實現(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)限,可用性有待考證
- 微信端基本正常