1. 前言
使用JavaScript實現瀏覽器中打開系統錄屏功能
示例圖:
2. 源碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button id="start">開始錄制</button><button id="end">結束錄制</button><script>let recorder;// 開始錄制視頻按鈕點擊事件document.getElementById('start').addEventListener('click', function () {// 獲取當前屏幕,video:true表示獲取屏幕,audio:true表示獲取聲音navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }).then(stream => {// stream就是返回的視頻流// 使用MediaRecorder錄制視頻流recorder = new MediaRecorder(stream);// 定義data變量,用于存放視頻數據const data = [];// 在ondataavailable(錄制視頻的時候觸發)recorder.ondataavailable = function (e) {// 將視頻數據添加到data中data.push(e.data);};// onstop表示視頻錄制完畢recorder.onstop = function () {// 獲取錄制窗口并調用stop方法停止錄制this.stream.getTracks().forEach(track => track.stop());// 將視頻數據轉化為blob對象const blob = new Blob(data, { type: this.mimeType });// 創建a標簽(用于下載)const a = document.createElement('a');// 使用URL.createObjectURL給視頻流創建鏈接a.href = URL.createObjectURL(blob);// 設置下載時的視頻名稱a.download = new Date().getTime() + '.webm';// 調用a標簽的click方法下載視頻a.click();// 使用URL.revokeObjectURL方法釋放占用的資源URL.revokeObjectURL(a.href);// 刪除a標簽a.remove();};// recorder.start()開始錄制recorder.start();});});// 結束錄制視頻按鈕點擊事件document.getElementById('end').addEventListener('click', function () {// 停止錄屏recorder.stop();});</script></body>
</html>## 3. 總結
以上就是本期分享的全部內容了,本篇博客只是分享的錄屏的小demo,使用時可以根據不同的情景調整源碼,例如騰訊會議的這種實時分享屏幕之類的需求
