H5音视频方面的遇到的问题

前言

最近因为公司的项目要求，接触到了前端H5视频直播和实时语音识别这块的内容，由于我们项目的人都是第一次接触，开发的过程中踩了不少的坑，好在最后加班加点的还是完成了任务，所以写下这篇博客总结一下这次开发过程中的一些不足和收获。

recorder.js

实时语音这块使用的是recorder.js.使用了navigator.mediaDevices.getUserMedia来调取设备的麦克风，当开始录音后，浏览器会不断的触发onaudioprocess，在这个函数中可以获取到音频数据，然后再对获取到的音频数据进行转码，最终转成ArrayBuffer格式的字节数组。
recorder.js最后生成的是一个mp3文件，可以直接在页面上播放，但项目中的需求是利用websocket将音频数据实时的传输给后台，后台调用讯飞接口再实时生成文字返回给前端页面。所以需要生成arraybuffer来传给后台，并且采样率和采样数位需要设置成：

 config.sampleBits = 16 //config.sampleBits || 8 采样数位 8, 16
 config.sampleRate = 16000 //采样率(1/6 44100)

这样讯飞才能准确的识别出来，不然识别出来的错误率会非常高。
讯飞不支持实时的英文语音识别，所有项目后面又调用了百度的接口进行英文语音的识别，这边比较坑的就是百度传arraybuffer过去是不行的，必须再转一手才行：

let array = Array.prototype.slice.call(new Uint8Array(arrayBuffer))

如果需要将音频ArrayBuffer转为base64格式发送给服务端的话，需要将流转换为可操作的Uint8Array，再用自带的方法window.btoa转为base64格式：

transformArrayBufferToB