html5采集pcm音频通过websocket发送到服务端

1.html中引用该js文件

<script language=javascript src='/js/recorder.js'></script>

该文件下载地址：https://download.csdn.net/download/linyibin_123/86052295

2.js核心代码

var TalkRec = null;
var TalkChunck = null;
var TalkChuncks = null;
var TalkWS = null;//开始对讲
function StartTalk (nSamplerate, url) { //nSamplerate：采样率 url：websocket要推送的urlvar bsuc = true;SpeekStop ();TalkRec = Recorder({type:"pcm",bitRate:16,onProcess:function(buffers, powerLevel, bufferDuration, bufferSampleRate){TalkSend(buffers, bufferSampleRate, false);}});TalkRec.open(function(){TalkChuncks = null; // 重置缓冲区// init webscoketTalkWS = new WebSocket(url);TalkWS.onopen = function () {console.log("ws handshake success.");if (TalkWS.readyState == 1) {TalkRec.start(); // 开始录制数据}}TalkWS.onerror = function (err) {console.log(err);}TalkWS.onclose=function(e){console.log("ws close success");};}, function(e, isUserNotAllow){bsuc = false;});return bsuc;
}//停止对讲
function StopTalk () {// close speek recordif(TalkRec)  {TalkRec.close();TalkRec = null;}// close websocket after send.TalkSend([], 0, true);
}//数据发送
function TalkSend(buffers, bufferSampleRate, isClose) {if(TalkChuncks == null){TalkChunck = null;console.logTalkChuncks = [];};var pcm = [];var pcmSampleRate = 0;if(buffers.length > 0) {//借用SampleData函数进行数据的连续处理，采样率转换是顺带的，得到新的pcm数据var chunk = Recorder.SampleData(buffers, bufferSampleRate, 8000, TalkChunck);//清理已处理完的缓冲数据，释放内存以支持长时间录音，最后完成录音时不能调用stop，因为数据已经被清掉了for(var i = TalkChunck?TalkChunck.index:0; i<chunk.index; i++){buffers[i] = null;};//此时的chunk.data就是原始的音频16位pcm数据（小端LE），直接保存即为16位pcm文件TalkChunck = chunk;pcm = chunk.data;pcmSampleRate = chunk.sampleRate;if(pcmSampleRate != 8000) {throw new Error("error pcmSampleRate:"+pcmSampleRate+"!=8000");}console.log("pcm.length="+pcm.length);}if(pcm && pcm.length > 0){//将pcm数据丢进缓冲，凑够一帧发送，缓冲内的数据可能有多帧，循环切分发送TalkChuncks.push({pcm:pcm,pcmSampleRate:pcmSampleRate});}//从缓冲中切出一帧数据var chunkSize = speek_fsize/2;//8位时需要的采样数和帧大小一致，16位时采样数为帧大小的一半var pcm = new Int16Array(chunkSize), pcmSampleRate=0;var pcmOK = false, pcmLen=0;for1:for(var i1=0; i1<TalkChuncks.length; i1++){var chunk = TalkChuncks[i1];pcmSampleRate = chunk.pcmSampleRate;for(var i2=chunk.offset||0;i2<chunk.pcm.length;i2++){pcm[pcmLen] = chunk.pcm[i2];pcmLen++;//满一帧了，清除已消费掉的缓冲if(pcmLen==chunkSize){pcmOK = true;chunk.offset = i2+1;for(var i3=0; i3<i1; i3++){TalkChuncks.splice(0, 1);};break for1;}}};//缓冲的数据不够一帧时，不发送 或者 是结束了if(!pcmOK) {//结束发送，销毁websocket.if(isClose && TalkWS) {// close websocketTalkWS.close();TalkWS = null;}return;}// 发送一帧数据var blob = new Blob([pcm], {type:"audio/pcm"});if(TalkWS) { // send to serverTalkWS.send(blob);}//循环调用，继续切分缓冲中的数据帧，直到不够一帧TalkSend([], 0, isClose);
}

3.websocket服务器端部分代码参考

//websocket接收
static int on_ws_talk(void* param, int opcode, const void* data, size_t bytes, int flags)
{http_websocket_t *ws = (http_websocket_t*)param;http_session_t *ss = (http_session_t *)ws->session;// keepalive for websocket. must keepalive by client.ss->activity = ffss_time_get_sec_bootup() + (CONN_TIMEOUT); // to second.switch (opcode){   case WEBSOCKET_OPCODE_BINARY:talk_play_audio(data, bytes);  break;default:websocket_send(ws, opcode, data, bytes);break;}return 0;
}//音频数据拷贝和发送到播放端
static void talk_play_audio(const void* data, size_t bytes)
{//data copyaudio_msg_t msgbuf = {0};msgbuf.lenth = bytes/2;memcpy(msgbuf.buf, (short*)data, msgbuf.lenth);msgbuf.mtype = CGI_AUDIO_MSGTYPE;//send message to ffavs for play  int msgid = ffstream_audio_get_msgid();ffss_msg_snd_nowait(msgid, &msgbuf, sizeof(audio_msg_t));if(ffss_msg_rcv_wait_timeout(msgid, &msgbuf, sizeof(audio_msg_t), CGI_AUDIO_MSGACK, 500) == -1){printf("Websocket Session Push audio timeout");}else{printf("Websocket Session Push audio success3 bytes:%d", bytes);   }
}

本文参考

https://xiangyuecn.gitee.io/recorder/assets/%E5%B7%A5%E5%85%B7-%E4%BB%A3%E7%A0%81%E8%BF%90%E8%A1%8C%E5%92%8C%E9%9D%99%E6%80%81%E5%88%86%E5%8F%91Runtime.html?jsname=teach.realtime.encode_transfer_frame_pcm

html5采集pcm音频通过websocket发送到服务端相关推荐

H5实现实时音频MP3上传至服务端
H5实现实时音频MP3上传至服务端背景实现方法音频采集服务器端源码前端页面源码如下: 服务端源码背景最近由于项目需求,需要对接广播,实现在业务平台上集成话筒的实时喊话功能.没问题,很简 ...
认识WebSocket并搭建服务端
认识WebSocket并搭建服务端前言一.概述 WebSocket 协议在2008年诞生,2011年成为国际标准.webSocket能够在建立连接之后,在服务器端推送数据到客户端,解决HTTP协议 ...
使用tomcat方式实现websocket即时通讯服务端讲解
使用tomcat方式实现websocket即时通讯服务端讲解第一种方案:使用Tomcat的方式实现 tomcat版本要求:tomcat7.0+.需要支持Javaee7 导入javeee-api的ja ...
Java Websocket实例【服务端与客户端实现全双工通讯】
Java Websocket实例[服务端与客户端实现全双工通讯] 现很多网站为了实现即时通讯,所用的技术都是轮询(polling).轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP ...
服务器怎么向指定客户端发送信息,WebSocket 如何实现服务端向客户端发送消息？...
我们都知道, Websocket 是一个双向的通讯方式,一般情况下,我们都是根据 Client 的情况返回信息,但是在一个更加健壮的系统,我们可能需要主动的向客户端发送消息.我试图在中文网络去搜索,查 ...
http协议与https协议+UDP协议和TCP协议+WebSocket协议下服务端主动去发送信息+对称加密与非对称加密+get和post请求方式区别详解+浏览器内核以及jsj解析引擎
TCP和UDP协议是TCP/IP协议的核心. 在TCP/IP网络体系结构中,TCP(传输控制协议,Transport Control Protocol).UDP(用户数据报协议,User Data P ...
魔坊APP项目-16-种植园、websocket协议、服务端基于socket提供服务（基于房间管理分发信息）、种植园页面展示
种植园我们需要完成的种植园,是一个互动频繁,并且要求有一定即时性的模块,所以如果继续基于http协议开发,那么需要通过ajax发送大量http请求,同时因为http本身属于单向通讯,所以服务端无法主 ...
使用极光推送实现分组发送和服务端集成
推送功能在手机应用开发中越来越重要,几乎成为所有App必备的功能,由于Android本身没有消息推送机制,通常采用的是基于XMPP协议的推送,但这种开发很麻烦,因此在市场上应运而生了提供消息推送服务的 ...
Silverlight+WCF 实战-网络象棋最终篇之对战视频-下篇[客户端发送与服务端中转](六)...
本篇继上一篇:Silverlight+WCF 实战-网络象棋最终篇之对战视频-上篇[客户端开启视频/注册编号/接收视频](五) 一:对战视频简单原理略,内容见上篇. 二:对战视频步骤解析: 略 ...