實現(xiàn)方式
關(guān)于瀏覽器錄音，目前可供支持的方式有如下：
- 在navigator.mediaDevices.getUserMedia獲取瀏覽器錄音權(quán)限的基礎(chǔ)上，通過MediaRecorder進(jìn)行音頻流的讀入。
- 在navigator.mediaDevices.getUserMedia獲取瀏覽器錄音權(quán)限的基礎(chǔ)上，通過AudioContext.createMediaStreamSource進(jìn)行音頻流的讀入。
相關(guān)文檔
第一種方式文檔
第二種方式文檔
- html5+js 進(jìn)行錄音 -- 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進(jìn)行音頻流的讀入的兼容性較差。如下：
Can I Use -- MediaRecorder
MDN -- MediaRecorder
綜合以上并輔以試驗，得出該API暫無法支持iOS，遂選擇第二種方式進(jìn)行嘗試。
第二種方式的兼容性
第二種方式在瀏覽器端需獲取錄音權(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，無法進(jìn)行錄音，需Native進(jìn)行支持
瀏覽器測試記錄：
- 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)限，可用性有待考證
- 微信端基本正常
