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

前段時間作一個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…