基於RecordRTC的安卓端上傳錄像優化

• 蘇格團隊
• 做者：BigBen

在以前的項目中趕上移動端微信h5頁面上傳用戶錄像的功能需求，在簡單使用input type=file的時候發現，ios錄像上傳會作自動壓縮，而安卓端會直接上傳錄製的原視頻，在用戶不主動設置下降分辨率的狀況下致使錄像體積巨大，上傳緩慢，體驗及其很差，便有了此次的優化之旅。

在當下瀏覽器的飛速發展，能夠看到getUserMedia這個獲取媒體功能權限的API已經有了很好的兼容性，那麼咱們便從瀏覽器端主動調用攝像頭功能入手。實時音視頻通訊的將來是WebRTC的天下，在安卓微信瀏覽器（X5內核）上兼容性很好，直接使用開源的RecordRTC JS封裝，交互體驗好，將來能夠支持實時活體審覈。

在這裏先給你們安利一個控件recordrtc：github.com/muaz-khan/R…

目前這個組件集成了錄像錄音錄屏多種功能，本文暫以錄像的應用爲例，歡迎你們試驗和探討研究。

首先，調用瀏覽器獲取流媒體權限必不可少

const mediaConstraints = { audio: true, video: true }
navigator.mediaDevices.getUserMedia(mediaConstraints)
.then(this.successCallback)
.catch(this.errorCallback)
複製代碼

緊接着 succuess回調(successCallback(stream))中進行video標籤與攝像頭的相關綁定，同時初始化recordrtc，相關常見配置你們能夠去查看下文檔噢(這裏碰上個小坑，一開始直接使用 new RecordRTC(stream)，結果發現微信裏面錄的視頻有至關的卡頓感，改用了MediaStreamRecorder，神祕優化點...)

let recordingPlayer = this.$refs.videoRecorder
recordingPlayer.poster = ''
recordingPlayer.srcObject = stream
recordingPlayer.play()
this.recordRTC = new MediaStreamRecorder(stream, options)
複製代碼

在這裏須要處理下麥克風與video音頻相沖致使迴音的問題，給video加上volume/volumevalue=0,muted=true

開始與結束

this.recordRTC.record()
//結束按鈕
this.recordRTC.stop(function (blob) {  
let random = parseInt(Math.random()*1000000)  
_this.fileName = `test${random}.mp4`  
_this.videoFile = new File([recordedBlob], _this.fileName, {
    type: 'video/mp4'  
})
_this.downloadUrl = URL.createObjectURL(_this.videoFile)
upload(_this.videoFile)
//在這裏 咱們能夠選擇生成下載地址or上傳服務器返回視頻地址，我的仍是比較建議上傳服務器處理，後面也有個小坑講解}
複製代碼

好了，到這裏看着基本完工，瀏覽器調試完美美滋滋，天然是要趕忙拿起手機試一下了完整流程了，錄像功能完美，生成的文件是原來錄像大小的幾十分之一，通常須要的驗證視頻大約在20秒到1分鐘之間，生成的視頻只有小几M。嗯哼，就在這時，產品忽然想到，視頻拍完，仍是有個預覽的功能吧，嗯？從新播放竟然沒有聲音，這也是個大問題了。排查過程當中，檢查過各類相關配置沒有發現什麼錯誤，這時候想到編碼格式的問題，說到這裏，就要安利另外一個神奇工具: ffmpeg(相關安裝流程就不在這裏贅述了，相關文檔不少)

經過 ffmpeg -i xxx文件解析獲得

對比正常視頻（iphone,安卓微信客戶端），用ffmpeg -i 檢查，發現音頻流的差別就是壓縮編碼格式：正常的用aac，異常的用opus，查略相關資料發現微信瀏覽器針對這種編碼還有兼容性問題，那麼咱們就考慮轉換視頻的編碼模式，在接口收到文件後作一下編碼轉化，把音頻編碼由opus轉成vorbis，簡單語句以下

ffmpeg -i test387081.webm -acodec vorbis -ac 2 -strict -2 test387081_new.webm

再次測試，完美，聲音出來了。

後記

到這裏基本上完成了產品的需求了，可是，做爲一個程序員，仍是決定去多測試看別處的兼容性如何。Chrome完美支持毋庸置疑，可是在safari碰上了卡殼，查看控制檯能夠看到報錯

查看源碼發現錄製視頻是經過瀏覽器提供的MediaRecorder提供的，而safari並不支持，這裏發現能夠考慮結合WhammyRecorder和StereoAudioRecorder錄製，而後經過ffmpeg合成視頻音頻，嗯，暫時是目前的設想設計，等待進一步實驗驗證，後續會作基於控件更多的應用分享，歡迎討論與指正。

最後，用這樣的形式有什麼好處呢，除了針對視頻大小和編碼方面的優化自定義，還能更符合如錄製驗證身份等特殊使用場景，相信有更多待挖掘的地方。

補充

相關查閱資料

zhuanlan.zhihu.com/p/46903150

juejin.im/post/5b32fb…

www.jianshu.com/p/a4bbedb23…