devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

LiveMedia视频平台是如何实现基于网页的语音对讲

作者：小丑西瓜9 | 2024-06-07 14:06:47

赞

踩

livemedia

        目前主流的安防厂家的摄像头或者NVR都可以支持语音通道，只要配备拾音器和Mic即可实现和平台的语音交互，甚至渠道机已经内置Mic和扬声器，实现即插即用的的语音交互体验，但是目前主流的安防平台，需要安装CS客户端，或者使用厂家提供的浏览器插件来实现语音对讲，应用厂家如果想实现语音互动、大屏指挥等语音场景业务，需要切换到厂家提供的平台或者页面，无法与自己的业务平台实现完美的兼容。

        LiveMedia视频中间件提供了完美的语音互动API，在自身的业务平台上全过程使用HTTP API接口通过视频中间件对前端设备进行语音交互，语音界面可由第三方应用厂家自由定制。实现拓扑如下图示：

平台对讲组实现时序图

 上图中网页端中获取麦克风声音数据需要服务端开启https

getUserMedia API简介

      HTML5的getUserMedia API为用户提供访问硬件设备媒体（摄像头、视频、音频、地理位置等）的接口，基于该接口，开发者可以在不依赖任何浏览器插件的条件下访问硬件媒体设备。 
      getUserMedia API最初是navigator.getUserMedia，目前已被最新Web标准废除，变更为navigator.mediaDevices.getUserMedia（），但浏览器支持情况不如旧版API普及。 
MediaDevices.getUserMedia（）方法提示用户允许使用一个视频和/或一个音频输入设备，例如相机或屏幕共享和/或麦克风。如果用户给予许可，就返回一个Promise对象，MediaStream对象作为此Promise对象的Resolved［成功］状态的回调函数参数，相应的，如果用户拒绝了许可，或者没有媒体可用的情况下PermissionDeniedError或者NotFoundError作为此Promise的Rejected［失败］状态的回调函数参数。注意，由于用户不会被要求必须作出允许或者拒绝的选择，所以返回的Promise对象可能既不会触发resolve也不会触发 reject。

浏览器兼容性

语法

  1. navigator.mediaDevices.getUserMedia(constraints)
  2. .then(function(mediaStream) { ... })
  3. .catch(function(error) { ... })

示例：HTML 5调用音频

HTML

  1. <html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <title>test</title>
  5. </head>
  6. <body>
  7. <div>
  8.     <button id="intercomBegin">开始对讲</button>
  9.     <button id="intercomEnd">关闭对讲</button>
  10. </div>
  11. </body>
  12. </html>

javascript

开启本地音频采集、定时20毫秒通过Websocket发送音频PCM数据至LiveMedia中间件

  1. var begin = document.getElementById('intercomBegin');
  2.     var end = document.getElementById('intercomEnd');
  3.     navigator.mediaDevices.getUserMedia = navigator.mediaDevices.getUserMedia || navigator.mediaDevices.webkitGetUserMedia;
  4.     var ws = null;//实现WebSocket
  5.     var record=null;//多媒体对象，用来处理音频
  6.     var timeInte = null;//定义一个定时器
  7.     begin.onclick = function() {
  8.         console.log('开始对讲')
  9.     }
  10.     end.onclick = function() {
  11.         console.log('关闭对讲')
  12.         if(ws) {
  13.             ws.close();
  14.             record.stop();
  15.             clearInterval(timeInte);
  16.         }
  17.     }
  18.  
  19.     function init(rec){
  20.         record = rec;
  21.     }
  22.     if (!navigator.mediaDevices.getUserMedia) {
  23.         alert('浏览器不支持音频输入');
  24.     }else{
  25. 		
  26.         navigator.mediaDevices.getUserMedia( { audio: true })
  27. 		.then(function (mediaStream){
  28.                 init(new Recorder(mediaStream));
  29.             }
  30.         )
  31. 		.catch(function(err){ console.log(err.name + ": " + err.message); });
  32.     }
  33.     //录音对象
  34.     var Recorder = function(stream) {
  35.         var sampleBits = 16;//输出采样数位 8, 16
  36.         var sampleRate = 44100;//输出采样率
  37. 		var bufSize = 8192;
  38.         var context = new AudioContext();
  39.         var audioInput = context.createMediaStreamSource(stream);
  40.         var recorder = context.createScriptProcessor(0, 1, 1);
  41. 		var resample = new Resampler(context.sampleRate, 44100, 1, bufSize);
  42.         var audioData = {
  43.             size: 0          //录音文件长度
  44.             , buffer: []    //录音缓存
  45.             , inputSampleRate: context.sampleRate    //输入采样率
  46.             , inputSampleBits: 16      //输入采样数位 8, 16
  47.             , outputSampleRate: sampleRate
  48.             , oututSampleBits: sampleBits
  49.             , clear: function() {
  50.                 this.buffer = [];
  51.                 this.size = 0;
  52.             }
  53.             , input: function (data) {
  54.                 this.buffer.push(new Float32Array(data));
  55.                 this.size += data.length;
  56.             }
  57.             , compress: function () { //合并压缩
  58.                 //合并
  59.                 var data = new Float32Array(this.size);
  60.                 var offset = 0;
  61.                 for (var i = 0; i < this.buffer.length; i++) {
  62.                     data.set(this.buffer[i], offset);
  63.                     offset += this.buffer[i].length;
  64.                 }
  65.                 //压缩
  66.                 var compression = parseInt(this.inputSampleRate / this.outputSampleRate);
  67.                 var length = data.length / compression;
  68.                 var result = new Float32Array(length);
  69.                 var index = 0, j = 0;
  70.                 while (index < length) {
  71.                     result[index] = data[j];
  72.                     j += compression;
  73.                     index++;
  74.                 }
  75.                 return result;
  76.             }, encodePCM: function(){//这里不对采集到的数据进行其他格式处理，如有需要均交给服务器端处理。
  77.                 var sampleRate = Math.min(this.inputSampleRate, this.outputSampleRate);
  78.                 var sampleBits = Math.min(this.inputSampleBits, this.oututSampleBits);
  79.                 var bytes = this.compress();
  80.                 var dataLength = bytes.length * (sampleBits / 8);
  81.                 var buffer = new ArrayBuffer(dataLength);
  82.                 var data = new DataView(buffer);
  83.                 var offset = 0;
  84.                 for (var i = 0; i < bytes.length; i++, offset += 2) {
  85.                     var s = Math.max(-1, Math.min(1, bytes[i]));
  86.                     data.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
  87.                 }
  88.                 return new Blob([data]);
  89.             }
  90.         };
  91.         this.start = function () {
  92.             audioInput.connect(recorder);
  93.             recorder.connect(context.destination);
  94.         }
  95.  
  96.         this.stop = function () {
  97.             recorder.disconnect();
  98.         }
  99.  
  100.         this.getBlob = function () {
  101.             return audioData.encodePCM();
  102.         }
  103.  
  104.         this.clear = function() {
  105.             audioData.clear();
  106.         }
  107.  
  108.         recorder.onaudioprocess = function (e) {
  109. 			audioData.input(e.inputBuffer.getChannelData(0));
  110.         }
  111.     };
  112.  
  113. 	function getDate(extra){
  114. 	var dat = new Date;//生成日期
  115.  var year = dat.getFullYear();//取得年
  116.  var month = dat.getMonth()+1;    //取得月,js从0开始取,所以+1
  117.  var date1 = dat.getDate(); //取得天
  118.  var hour = dat.getHours();//取得小时
  119.  var minutes = dat.getMinutes();//取得分钟
  120.  var second = dat.getSeconds();//取得秒
  121.  var haomiao = dat.getMilliseconds();
  122.  dat = undefined;
  123.  return year+"-"+month+"-"+date1+" "+hour+":"+minutes +":"+second+" "+haomiao + extra ;
  124. }
  125.  
  126.     begin.onclick = function() {
  127.  
  128.         ws = new WebSocket("ws://192.168.3.23:9030/ws_talk/57?token=607b9f0b-293f-4412-ac6f-278804be5982");
  129.         ws.binaryType = 'arraybuffer'; //传输的是 ArrayBuffer 类型的数据
  130.         ws.onopen = function(event) {
  131.             console.log('握手成功');
  132. 			record.start();
  133.         };
  134.         timeInte=setInterval(function(){
  135.             if(ws.readyState==1){//ws进入连接状态，则每隔500毫秒发送一包数据
  136. 				
  137.                 console.log(getDate('>>'));
  138. 				console.log(record.getBlob());
  139. 				if(record.getBlob().length != 0){
  140. 					console.log("###########send Blob start ########");
  141. 				ws.send(record.getBlob());    //发送音频数据
  142. 					console.log("##############send Blob end ###########");
  143. 					}
  144.                 
  145.                 record.clear();	//每次发送完成则清理掉旧数据
  146. 				
  147.             }
  148.         },20);  //每隔20ms发送一次，定时器
  149.  
  150.  
  151.     }

 LiveMedia可支持一对一，一对多的集群指挥对讲

qq交流群：698793654

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/685701
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号