WEB前端语音对讲实现方案以及示例
需求
司机需要通过车载终端设备与WEB平台进行语音对讲,目前已实现WebSocket服务端,需要实现客户端
说到websocket想比大家不会陌生,如果陌生的话也没关系,一句话概括
WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信
实现
我们需要在web端实现双向对讲,首先创建html文件,这个只是用来做个demo,比较简单:
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<div>
<button id="intercomBegin">开始对讲</button>
<button id="intercomEnd">关闭对讲</button>
</div>
</body>
<script>
var begin = document.getElementById('intercomBegin');
var end = document.getElementById('intercomEnd');
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
var ws = null;//实现WebSocket
var record=null;//多媒体对象,用来处理音频
var timeInte = null;//定义一个定时器
begin.onclick = function() {
console.log('开始对讲')
}
end.onclick = function() {
console.log('关闭对讲')
if(ws) {
ws.close();
record.stop();
clearInterval(timeInte);
}
}
</script>
</html>
难点
第一个是实时输出音频数据,第二是实时解析输入的音频流并进行播放
1.实时输出音频数据
这里要介绍一下Navigator.getUserMedia()方法,点我查看API文档
该方法提醒用户需要使用的设备类型,音频(true或者false)和视频(true或者false),比如麦克风。
如下例,我们使用音频输入,获取mediaStream,构建相关业务对象:
function init(rec){
record = red;
}
if (!navigator.getUserMedia) {
alert('浏览器不支持音频输入');
}else{
navigator.getUserMedia(
{ audio: true },
function (mediaStream) {
init(new Recorder(mediaStream));
},function(error){
console.log(error)
}
)
}
//录音对象
var Recorder = function(stream) {
var sampleBits = 16;//输出采样数位 8, 16
var sampleRate = 8000;//输出采样率
var context = new AudioContext();
var audioInput = context.createMediaStreamSource(stream);
var recorder = co