关于H5录音的调研

实现方式

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

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

相关文档

第一种方式文档

• 原生h5实现录音和录视频
• 使用h5新标准MediaRecorder API在web页面进行音视频录制

第二种方式文档

• html5+js 进行录音 -- 2018-12-27
• html5 record 录音实例 使用websocket -- 2013-08-28
• 使用Web Audio API实现基于浏览器的Web端录音 -- 2015-12-31
• 2fps/recorder -- github 18 days ago update
• Recorder -- github 14 days ago update

相关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进行支持

浏览器测试记录：

• iphone 5s 无法获取录音权限
• iphone 6 无法获取录音权限
• iphone 6p 正常
• iphone 7 正常
• iphone 8 正常
• iphone X 正常
• iphone XR 正常

Android：

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

浏览器测试记录：

• 华为v20，Android 9，chrome 63 自带浏览器正常
• 小米4，Android 6.0，chrome61 自带浏览器无法获取录音权限
• oppo R9s，Android6.0，chrome52 自带浏览器无法获取录音权限
• oppo R9s，Android6.0，chrome66 QQ浏览器能录音，但音频无法正常播放
• oppo R9s，Android6.0，chrome66 微信浏览器正常
• vivo x23，Android 8.1，chrome62 自带浏览器无法获取录音权限
• vivo x23，Android 8.1，chrome66 QQ浏览器能录音，但音频无法正常播放
• 三星G9300，Android 8.0，chrome67 正常
• vivo x9，Android 7.1，chrome66 自带浏览器无法获取录音权限
• vivo x9，Android 7.1，chrome66 微信浏览器正常

兼容性文档

• Can I Use -- MediaRecorder
• MDN - MediaRecorder
• MDN -- navigator.getUserMedia
• MDN -- navigator.MediaDevices.getUserMedia

结论

iOS

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

Android

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