关于H5录音的调研

2019-07-17  本文已影响0人  2林子易2

实现方式

关于浏览器录音，目前可供支持的方式有如下：

  1. 在navigator.mediaDevices.getUserMedia获取浏览器录音权限的基础上，通过MediaRecorder进行音频流的读入。
  2. 在navigator.mediaDevices.getUserMedia获取浏览器录音权限的基础上，通过AudioContext.createMediaStreamSource进行音频流的读入。

相关文档

第一种方式文档

第二种方式文档

相关API的兼容性

第一种方式的兼容性

目前第二种方式实现录音是主流，并且通过MediaRecorder进行音频流的读入的兼容性较差。如下：

Can I Use -- MediaRecorder MDN -- MediaRecorder

综合以上并辅以试验，得出该API暂无法支持iOS，遂选择第二种方式进行尝试。

第二种方式的兼容性

第二种方式在浏览器端需获取录音权限，老版本使用navigator.getUserMedia，新版本使用navigator.MediaDevices.getUserMedia。目前相关API兼容性如下：

Can I Use -- getUserMedia MDN -- getUserMedia

AudioContext兼容性如下：

Can I Use -- AudioContext MDN -- AudioContext

对比getUserMedia和AudioContext， 可发现目前getUserMedia作为录音实现的阻塞项。

试验后结论

iOS：

  1. 目前需系统在11及以上才可支持getUserMedia去获取浏览器录音的权限。且需要系统开启录音权限，在录音时需用户同意录音使用。
  2. 微信无法支持录音，需使用微信提供的API实现
  3. 在webview中，无getUserMediaAPI，无法进行录音，需Native进行支持

浏览器测试记录：

Android：

  1. 需浏览器Chrome内核版本在63及以上才可获取录音权限
  2. webview上直接拒绝了录音权限申请
  3. 新版本微信基本正常

浏览器测试记录：

兼容性文档

结论

iOS

  1. 浏览器需iOS系统版本11及以上
  2. webview需原生端支持开发
  3. 微信端需对接微信API

Android

  1. 浏览器受手机型号限制，只在华为，三星手机上正常，其他手机不支持且行为异常
  2. webview需原生端开启录音权限，可用性有待考证
  3. 微信端基本正常
上一篇下一篇

猜你喜欢

热点阅读