實現(xiàn)方式
關(guān)于瀏覽器錄音考赛，目前可供支持的方式有如下：
- 在navigator.mediaDevices.getUserMedia獲取瀏覽器錄音權(quán)限的基礎(chǔ)上，通過MediaRecorder進行音頻流的讀入。
- 在navigator.mediaDevices.getUserMedia獲取瀏覽器錄音權(quán)限的基礎(chǔ)上，通過AudioContext.createMediaStreamSource進行音頻流的讀入芹啥。
相關(guān)文檔
第一種方式文檔
第二種方式文檔
- html5+js 進行錄音 -- 2018-12-27
- html5 record 錄音實例 使用websocket -- 2013-08-28
- 使用Web Audio API實現(xiàn)基于瀏覽器的Web端錄音 -- 2015-12-31
- 2fps/recorder -- github 18 days ago update
- Recorder -- github 14 days ago update
相關(guān)API的兼容性
第一種方式的兼容性
目前第二種方式實現(xiàn)錄音是主流锻离，并且通過MediaRecorder進行音頻流的讀入的兼容性較差。如下：
Can I Use -- MediaRecorder
MDN -- MediaRecorder
綜合以上并輔以試驗叁征，得出該API暫無法支持iOS纳账，遂選擇第二種方式進行嘗試。
第二種方式的兼容性
第二種方式在瀏覽器端需獲取錄音權(quán)限捺疼，老版本使用navigator.getUserMedia疏虫，新版本使用navigator.MediaDevices.getUserMedia。目前相關(guān)API兼容性如下：
Can I Use -- getUserMedia
MDN -- getUserMedia
AudioContext兼容性如下：
Can I Use -- AudioContext
MDN -- AudioContext
對比getUserMedia和AudioContext啤呼， 可發(fā)現(xiàn)目前getUserMedia作為錄音實現(xiàn)的阻塞項卧秘。
試驗后結(jié)論
iOS：
- 目前需系統(tǒng)在11及以上才可支持getUserMedia去獲取瀏覽器錄音的權(quán)限。且需要系統(tǒng)開啟錄音權(quán)限官扣，在錄音時需用戶同意錄音使用翅敌。
- 微信無法支持錄音，需使用微信提供的API實現(xiàn)
- 在webview中惕蹄，無getUserMediaAPI蚯涮，無法進行錄音，需Native進行支持
瀏覽器測試記錄：
- iphone 5s 無法獲取錄音權(quán)限
- iphone 6 無法獲取錄音權(quán)限
- iphone 6p 正常
- iphone 7 正常
- iphone 8 正常
- iphone X 正常
- iphone XR 正常
Android：
- 需瀏覽器Chrome內(nèi)核版本在63及以上才可獲取錄音權(quán)限
- webview上直接拒絕了錄音權(quán)限申請
- 新版本微信基本正常
瀏覽器測試記錄：
- 華為v20卖陵，Android 9遭顶，chrome 63 自帶瀏覽器正常
- 小米4，Android 6.0泪蔫，chrome61 自帶瀏覽器無法獲取錄音權(quán)限
- oppo R9s棒旗，Android6.0，chrome52 自帶瀏覽器無法獲取錄音權(quán)限
- oppo R9s撩荣，Android6.0铣揉，chrome66 QQ瀏覽器能錄音，但音頻無法正常播放
- oppo R9s餐曹，Android6.0逛拱，chrome66 微信瀏覽器正常
- vivo x23，Android 8.1台猴，chrome62 自帶瀏覽器無法獲取錄音權(quán)限
- vivo x23橘券，Android 8.1，chrome66 QQ瀏覽器能錄音卿吐，但音頻無法正常播放
- 三星G9300旁舰，Android 8.0，chrome67 正常
- vivo x9嗡官，Android 7.1箭窜，chrome66 自帶瀏覽器無法獲取錄音權(quán)限
- vivo x9，Android 7.1衍腥，chrome66 微信瀏覽器正常
兼容性文檔
- Can I Use -- MediaRecorder
- MDN - MediaRecorder
- MDN -- navigator.getUserMedia
- MDN -- navigator.MediaDevices.getUserMedia
結(jié)論
iOS
- 瀏覽器需iOS系統(tǒng)版本11及以上
- webview需原生端支持開發(fā)
- 微信端需對接微信API
Android
- 瀏覽器受手機型號限制磺樱，只在華為纳猫，三星手機上正常，其他手機不支持且行為異常
- webview需原生端開啟錄音權(quán)限竹捉，可用性有待考證
- 微信端基本正常
