php+socket+Recorder搭建web端实时语音通话
帅令雪
兼容没有测试 只测试了谷歌浏览器 不适合长时间通话 延迟2s~5s时间长了延迟会高 可以自己接着调试
**1.搭建socket **
参照官网 https://www.workerman.net/web-sender 本文不做详细介绍
2.下载音频录制插件
https://go.ctolib.com/article/wiki/85193
3.前台页面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="application/javascript" src="//cdn.bootcss.com/socket.io/1.3.7/socket.io.js"></script>
<script src="js/recorder.js"></script>
<script src="https://xiangyuecn.github.io/Recorder/src/engine/mp3.js"></script>
<script src="https://xiangyuecn.github.io/Recorder/src/engine/mp3-engine.js"></script>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<input type="text" id="a"/>
<button id="b" onclick="startaudio();">buttonB</button>
<button id="c" onclick="rec.stop()">停止</button>
<audio controls="controls" autoplay="autoplay"></audio>
<script type="application/javascript">
var videoMp4 = document.querySelector('audio');
var sourceBuffer;
if (window.MediaSource) {
var mediaSource = new MediaSource();
videoMp4.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', sourceOpen);
} else {
console.log("The Media Source Extensions API is not supported.")
}
function sourceOpen(e) {
URL.revokeObjectURL(videoMp4.src);
// 设置 媒体的编码类型
var mime = 'audio/mpeg';
var mediaSource = e.target;
sourceBuffer = mediaSource.addSourceBuffer(mime);
sourceBuffer.addEventListener('updateend', function(e) {
});
}
socket = io('//*.*.*.*:2120');
// uid可以是自己网站的用户id，以便针对uid推送以及统计在线人数 实现登陆即可不必完全一样
screen_uid=new Date().getTime();
var logindata=new Object();
logindata['uid']=screen_uid;
logindata['con_uid']="1544173952000cc";
socket.on('connect', function () {
socket.emit('login', logindata);
});
// 后端推送来在线数据时
socket.on('update_online_count', function (online_stat) {
console.log(online_stat);
});
//录制音频时候的偏移量 如果修改下面oldn值的话 需要从新自己计算
var timestampOffset=-0.07,appendWindowStart=0,appendWindowEnd=0.9;
socket.on('playsend', function (msg) {
var arr = msg.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
var url=new Blob([u8arr], { type: mime });
// console.log(window.URL.createObjectURL(url));
var reader = new FileReader();
reader.result="";
reader.readAsArrayBuffer(url);
reader.onload = function (e) {
//不断把数据添加给audio
sourceBuffer.timestampOffset=timestampOffset;
sourceBuffer.appendWindowStart=appendWindowStart;
sourceBuffer.appendWindowEnd=appendWindowEnd;
appendWindowStart+=0.899;
timestampOffset=appendWindowStart-0.07;
appendWindowEnd+=0.899;
sourceBuffer.appendBuffer(reader.result);
}
});
//开启实时采集 每5次发送一次数据 太短的话录音文件不太完整 可以自己尝试默认8192*5=40960
var oldn=0,begin=0,newsize=0;
var rec=Recorder({onProcess:function (buffer,size,recorder,step) {
if(oldn==5){oldn=0;newsize=40960;
if(step>1){//新采样高于录音采样不处理，省去了插值处理，直接抽样
newsize=Math.floor(newsize/step);
}else{
step=1;
};
var res=new Int16Array(newsize);
var last=begin,idx=0;
var nl=buffer.length;
for (var n=begin;n<nl;n++) {
var o=buffer[n];
var i=last,il=o.length;
while(i<il){
res[idx]=o[Math.round(i)];
idx++;
i+=step;//抽样
};
last=i-il;
};
begin=begin+5;
console.log(size);
recorder['mp3'](res,function (blob) {
var a = new FileReader();
a.readAsDataURL(blob);
a.onload = function (e) {
// console.log(e.target.result);
socket.emit('qtsend',e.target.result);
}
});
}
oldn++;
}});
function startaudio() {
rec.open(function(){//打开麦克风授权获得相关资源
rec.start();//开始录音
},function(msg){
console.log("无法录音:"+msg);
});
return false;
}
</script>
</body>
</html>
4.修改录音插件
修改回调参数
set.onProcess(buffer,This.recSize,This,(Recorder.Ctx.sampleRate/This.set.sampleRate),powerLevel,duration);
音频拼接参考：https://developers.google.com/web/updates/2015/06/Media-Source-Extensions-for-Audio
类似资料：