前端使用html5、ffmpeg實現錄屏攝像等功能

沒事兒發表於2018-11-16
前端HTML

前段時間做一個windows的桌面應用，vue + electron，涉及到錄屏和攝像功能，網上相關的文件蠻少的給需要的人一些參考

如果文章描寫有誤或者還有更好的方法，請留言告訴我，筆芯 (´▽`ʃ♡ƪ)

背景介紹

** 涉及技術：vue、electron、ffmpeg、node **

關於錄屏和攝像對比了兩種方法

  • 使用HTML5的api實現

    攝像：mediaDevices（獲取裝置）+ getUserMedia（獲取流） + MediaRecorder（儲存）

    錄屏：getDisplayMedia（獲取流） + MediaRecorder（儲存）

  • ffmpeg + node：FFmpeg是一套非常強大的音視訊處理的開源工具，不多介紹，而Electron基於node和chromium，它允許使用node的API以及幾乎所有的node模組，這意味這著我們可以呼叫cmd命令來操作ffmpeg實現錄屏和攝像錄製，當然ffmpeg功能絕不止這點

HTML5實現

mediaDevices

  • 用於收集系統上可用的多媒體輸入和輸出裝置的資訊

  • 該方法呼叫成功返回裝置列表，並傳入帶有devceID的MediaStreamConstraints物件可以指定裝置獲取流媒體來源

  navigator.mediaDevices.enumerateDevices().then(devicelist => {
    // audiooutput 揚聲器
    // audioinput  麥克風
    // audiooutput 攝像
    console.log(devicelist)
  }).catch(err => console.log(err))
複製程式碼

getUserMedia

  • 使用者提供訪問硬體裝置媒體（攝像頭、視訊、音訊、地理位置等）的介面，基於該介面，開發者可以在不依賴任何瀏覽器外掛的條件下訪問硬體媒體裝置。

  • 該方法返回視訊流，將獲取到的流賦給video標籤可實現邊錄邊看

navigator.mediaDevices.getUserMedia(MediaStreamConstraints).then(stream => {
    videoElement.srcObject = stream; // 
  }, error => console.log(error));
複製程式碼

getDisplayMedia

  • 將使用者的顯示或其部分用作媒體流的來源，它允許以視訊流的形式獲取使用者的顯示器或其一部分

  • 錄屏主要依靠該方法，和getUserMedia一樣返回一個promise物件，呼叫成功返回流，將這個流賦給video 元素實現邊錄邊看

  • ** 需要注意的是** 如果你做的是網頁端在谷歌上使用這個元素，需要在chrome://flags/開啟Experimental Web Platform features功能

    而Electron基於node + chromium構建，在electron需要引入desktopCapturer模組，並在基於該模組使用這個方法

navigator.mediaDevices.getDisplayMedia({ video: true })
  .then(stream => {
    videoElement.srcObject = stream;
  }, error => console.log(error));
複製程式碼

MediaRecorder

  • 記錄和捕獲媒體，也就是視訊和音訊

  • getDisplayMedia 和 getUserMedia 獲取到的流都需要使用MediaRecorder儲存起來，並且可以儲存成檔案

let herf
this.recorder = new MediaRecorder(stream);
this.recorder.ondataavailable = e => { 
  herf = e.data;
  download.href = URL.createObjectURL(herf);
};
this.recorder.start();
複製程式碼

第二種使用ffmpeg

官網安裝包下載 ffmpeg.zeranoe.com/builds/

一些基本引數

  • -formats 輸出所有可用格式
  • -f fmt 指定格式(音訊或視訊格式)
  • -i filename 指定輸入檔名，在linux下當然也能指定:0.0(螢幕錄製)或攝像頭
  • -y 覆蓋已有檔案
  • -t duration 記錄時長為t
  • -fs limit_size 設定檔案大小上限
  • -itsoffset time_off 設定時間偏移(s)，該選項影響所有後面的輸入檔案。該偏移被加到輸入檔案的時戳，定義一個正偏移意味著相應的流被延遲了 offset秒。 [-]hh:mm:ss* [.xxx]的格式也支援 音 頻
  • -ab bitrate 設定音訊位元速率
  • -ar freq 設定音訊取樣率
  • -ac channels 設定通道 預設為1 視 頻
  • -b bitrate 設定位元率，預設200kb/s
  • -r fps 設定幀頻 預設25
  • -s size 設定幀大小 格式為WXH 預設160X128.下面的簡寫也可以直接使用：

錄屏相關命令

列出可用的裝置包括音訊和攝像等等
ffmpeg -list_devices true -f dshow -i dummy

錄屏，你也可以加入關於視訊的一些基本引數來獲得你想要的檔案
ffmpeg -f gdigrab -i desktop captrue.mkv -y
複製程式碼

node呼叫

cd進入bin資料夾後執行錄屏相關命令

關於停止錄製，雖然ffmpeg按 Q 可以停止錄製，但是我們通過程式碼呼叫是看不到cmd命令列的而且他在錄製過程中是一直佔用這個程式什麼命令也無法輸入 所以這個地方我只想到一個辦法就是強制停止該程式

參考文章

MDN developer.mozilla.org/zh-CN/docs/…  developer.mozilla.org/en-US/docs/…  developer.mozilla.org/zh-CN/docs/…

W3C w3c.github.io/mediacaptur…

相關文章