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

蘇格團隊發表於2019-03-23
安卓優化
  • 蘇格團隊
  • 作者：BigBen

在之前的專案中遇上移動端微信h5頁面上傳使用者錄影的功能需求，在簡單使用input type=file的時候發現，ios錄影上傳會做自動壓縮，而安卓端會直接上傳錄製的原視訊，在使用者不主動設定降低解析度的情況下導致錄影體積巨大，上傳緩慢，體驗及其不好，便有了這次的優化之旅。

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

在當下瀏覽器的飛速發展，可以看到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檔案解析得到

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

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

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

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

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

後記

到這裡基本上完成了產品的需求了，但是，作為一個程式設計師，還是決定去多測試看別處的相容性如何。Chrome完美支援毋庸置疑，但是在safari碰上了卡殼，檢視控制檯可以看到報錯

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

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

檢視原始碼發現錄製視訊是通過瀏覽器提供的MediaRecorder提供的，而safari並不支援，這裡發現可以考慮結合WhammyRecorder和StereoAudioRecorder錄製，然後通過ffmpeg合成視訊音訊，嗯，暫時是目前的設想設計，等待進一步實驗驗證，後續會做基於控制元件更多的應用分享，歡迎討論與指正。

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

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

補充

相關查閱資料

zhuanlan.zhihu.com/p/46903150

juejin.im/post/5b32fb…

www.jianshu.com/p/a4bbedb23…

相關文章