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

H5音视频方面的总结

    • 前言
    • recorder.js
    • 视频直播:Flv.js

前言

最近因为公司的项目要求,接触到了前端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格式:

transformArrayBufferToBase64 (buffer) {
    var binary = '';
    var bytes = new Uint8Array(buffer);
    for (var len = bytes.byteLength, i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
    }
    return window.btoa(binary);
}

需要注意的几点:1、getUserMedia只支持在https环境中调用,如果不是https的话,在localhost环境下是没有问题的,但在http环境下谷歌浏览器会报环境不安全不让你调用麦克风,当时就是因为忽略了这一点,后面在部署https环境时耽误了一点时间。2、getUserMedia方法不支持IE浏览器,支持ios12以上的Safari,好像不支持UC内核的浏览器,也就是说不支持国内大部分的国产手机自带的浏览器,这点其实不太确定,不过我测试过华为手机自带手机确实是不支持的,三星手机自带的浏览器没有问题,微信网页浏览器也没有问题。在谷歌和火狐上的兼容性还是不错的。
项目开发过程中遇到的问题: 1、recorder.js是网上有人封装的一个比较简陋的音频的一个脚本,跟我们公司的需求还是有点不符合,所以我改了挺多的,特别是音频转码这块,我也没有接触过,而网上关于实时语音的资料也比较少,与后端一起联调了很久–音频的格式、音频的码率等问题,也算是自己的一个知识储备,还有就是前后端的沟通也很重要。2、https的问题,其实我在一开始是知道获取麦克风权限是需要在https环境下才可以的,但是我当时并没有太重视,在沟通的时候也只是稍微的提了一下,并没有强调,结果到最后部署的时候才发现在https环境下,所有的请求都必须是https,而公司的部署环境中又不支持多个端口,导致视频推流和拉流这块出了问题,在这里耗费了很多不必要的时间。

视频直播:Flv.js

视频直播前端采用的是哔哩哔哩的某位大神开源的Flv.js框架,一个实现了在 HTML5 视频中播放 FLV 格式视频的 JavaScript 库。它的工作原理是将 FLV 文件流转码复用成 ISO BMFF(MP4 碎片)片段,然后通过 Media Source Extensions 将 MP4 片段喂进浏览器。
flv.js 是使用 ECMAScript 6 编写的,然后通过 Babel Compiler 编译成 ECMAScript 5,使用 Browserify 打包。
功能:
FLV 容器,具有 H.264 + AAC 编解码器播放功能
多部分分段视频播放
HTTP FLV 低延迟实时流播放
FLV 通过 WebSocket 实时流播放
兼容 Chrome, FireFox, Safari 10, IE11 和 Edge
十分低开销,并且通过你的浏览器进行硬件加速
使用:
他的使用也非常简单:

let player = this.refs.myVieo
if (flvjs.isSupported()) {
  var flvPlayer = flvjs.createPlayer({
    type: 'flv',
    isLive: true,
    url: FlvRequet,
    hasVideo: true,
    hasAudio: true
  },{
    enableWorker: true,
    lazyLoadMaxDuration: 1*60,
    enableStashBuffer: false,
    fixAudioTimestampGap: false,
    autoCleanupSourceBuffer: true,
  })
  flvPlayer.attachMediaElement(player)
  flvPlayer.load() //
  player
    .play()
    .then(() => {
    })
    .catch(err => {
      console.error(err)
    })
}

需要注意的地方: 1、flv.js只支持h264+aac的格式。2、flv.js不支持IE浏览器。3、chrom现在取消了视频自动播放的支持,如果你想要自动播放的话,必须得满足这几点中的任意一点:1)视频为静音播放 2)用户得先与页面有交互
项目遇到的问题: 1、关于自动播放这块,我们两个前端研究了很久,用了很多方法想要试图绕开谷歌的限制,百度谷歌的方法也用了很多,奈何谷歌的限制很严格,或者是我们才疏学浅,最终还是妥协为静音播放才行,如果有人能有办法绕开这个限制的话还希望能够提供。2、视频推流的格式这块我们和后端一起调试了很久,刚开始推流延迟达到了十秒,后面经过不断的改推流的命令,降低到了三秒左右,其实还不是很理想,最后发现是在摄像头采集视频推流那块出了问题,之前推流的帧数一直限制在十到二十帧,后面尝试把它提到三十帧,发现延迟竟然降到了一秒左右。。。到现在也不知道是什么原因,总之就当做经验吧。

参考文章(侵删):https://www.jianshu.com/p/8dda2be878b3

你可能感兴趣的:(前端)