景介紹

** 涉及技術(shù)：vue、electron、ffmpeg、node **
關(guān)于錄屏和攝像對比了兩種方法

• 使用HTML5的api實現(xiàn)
  攝像：mediaDevices（獲取設(shè)備）+ getUserMedia（獲取流） + MediaRecorder（存儲）
  錄屏：getDisplayMedia（獲取流） + MediaRecorder（存儲）
• ffmpeg + node：FFmpeg是一套非常強大的音視頻處理的開源工具，不多介紹，而Electron基于node和chromium，它允許使用node的API以及幾乎所有的node模塊，這意味這著我們可以調(diào)用cmd命令來操作ffmpeg實現(xiàn)錄屏和攝像錄制，當然ffmpeg功能絕不止這點

HTML5實現(xiàn)

mediaDevices

• 用于收集系統(tǒng)上可用的多媒體輸入和輸出設(shè)備的信息
• 該方法調(diào)用成功返回設(shè)備列表，并傳入帶有devceID的MediaStreamConstraints對象可以指定設(shè)備獲取流媒體來源

navigator.mediaDevices.enumerateDevices().then(devicelist => {
    // audiooutput 揚聲器
    // audioinput  麥克風(fēng)
    // audiooutput 攝像
    console.log(devicelist)
  }).catch(err => console.log(err))

getUserMedia

• 用戶提供訪問硬件設(shè)備媒體（攝像頭、視頻、音頻、地理位置等）的接口，基于該接口，開發(fā)者可以在不依賴任何瀏覽器插件的條件下訪問硬件媒體設(shè)備。
• 該方法返回視頻流，將獲取到的流賦給video標簽可實現(xiàn)邊錄邊看

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

getDisplayMedia

• 將用戶的顯示或其部分用作媒體流的來源，它允許以視頻流的形式獲取用戶的顯示器或其一部分
• 錄屏主要依靠該方法，和getUserMedia一樣返回一個promise對象，調(diào)用成功返回流，將這個流賦給video 元素實現(xiàn)邊錄邊看
• ** 需要注意的是** 如果你做的是網(wǎng)頁端在谷歌上使用這個元素，需要在chrome://flags/開啟Experimental Web Platform features功能

而Electron基于node + chromium構(gòu)建，在electron需要引入desktopCapturer模塊，并在基于該模塊使用這個方法

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

相關(guān)學(xué)習(xí)資料推薦，點擊下方鏈接免費報名，先碼住不迷路~】

音視頻免費學(xué)習(xí)地址：FFmpeg/WebRTC/RTMP/NDK/Android音視頻流媒體高級開發(fā)

【免費分享】音視頻學(xué)習(xí)資料包、大廠面試題、技術(shù)視頻和學(xué)習(xí)路線圖，資料包括（C/C++，Linux，F(xiàn)Fmpeg webRTC rtmp hls rtsp ffplay srs 等等）有需要的可以點擊788280672加群免費領(lǐng)取~

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

官網(wǎng)安裝包下載 ffmpeg.zeranoe.com/builds/

一些基本參數(shù)

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

錄屏相關(guān)命令

列出可用的設(shè)備包括音頻和攝像等等
ffmpeg -list_devices true -f dshow -i dummy

錄屏，你也可以加入關(guān)于視頻的一些基本參數(shù)來獲得你想要的文件
ffmpeg -f gdigrab -i desktop captrue.mkv -y

node調(diào)用

cd進入bin文件夾后執(zhí)行錄屏相關(guān)命令

關(guān)于停止錄制，雖然ffmpeg按 Q 可以停止錄制，但是我們通過代碼調(diào)用是看不到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…


原文 前端使用html5、ffmpeg實現(xiàn)錄屏攝像等功能 - 掘金

海軟件DRM-X 4.0支持加密保護PPT課件，防止錄屏和修改盜用。提供多種防護功能，包括防止錄屏、防止修改、在課件上顯示用戶的水印信息。

在線教育培訓(xùn)PPT演示文稿、PPT課件、網(wǎng)頁HTML5課件，最大的問題就是盜版問題，盜版的方式通常是錄屏截圖、抄襲和修改后使用，這些盜版問題一直困擾著內(nèi)容制作者，也給內(nèi)容制作者帶來巨大的商業(yè)損失。那么如何才能保護PPT防止截圖錄屏、保護PPT課件不被修改和盜用呢？

我們需要借助于SCORM課件制作軟件，SCORM是一種標準，是在線學(xué)習(xí)系統(tǒng)的一種內(nèi)容標準，課件的內(nèi)容主要由HTML、XML標簽和JS代碼組成。iSpring Suite是一款SCORM交互式課件制作工具，可以輕松地將PPT演示文檔加入聲音、視頻、測試題、交互等，同時支持一鍵轉(zhuǎn)換為HTML5課件和視頻課件。

轉(zhuǎn)換后的PPT (HTML5)課件支持在線和本地安全播放，并且支持智能防錄屏、黑名單防錄屏和用戶動態(tài)水印功能。經(jīng)過加密后的HTML5課件無法修改，用戶只有獲取認證后才可以播放。通過DRM-X 4.0加密，可以有效地防止PPT課件的盜用和修改，更好地保護PPT課件、HTML5動畫課件的版權(quán)和課件制作者的利益。

加密后的PPT（HTML），在Xvast瀏覽器中的播放效果(以上截圖是開啟了允許截圖的情況下顯示的效果)，帶有水印，若開啟智能防翻錄，則無法截圖和錄屏。

如何加密保護HTML課件？

請參考DRM-X 4.0HTML網(wǎng)頁加密教程，https://www.drm-x.com/DRM_web_page_html_encryption_tutorial.aspx