js實現錄屏、視頻捕獲（流媒體API）

JS實現屏幕錄制主要使用了瀏覽器提供的Screen Capture API 和 MediaStream Recording API，可以錄制整個屏幕或某個標簽頁，並在錄制完成后提供下載。

 

瀏覽器支持：

Chrome: 72

Edge: 79

Firefox: 66 (不支持音頻錄制)

IE: 不支持

Safari:13

移動端：不支持

 

實現：

注：直接將下面的代碼復制到<script>標簽下即可，無需其他標簽

        const streamPromise = navigator.mediaDevices.getDisplayMedia();　　// 請求屏幕捕獲

        streamPromise.then(stream => {
            var recordedChunks = [];　　　　// 錄制的視頻數據

            console.log(stream);
            var options = { mimeType: "video/webm; codecs=vp9" };　　// 設置編碼格式
            var mediaRecorder = new MediaRecorder(stream, options);　　　　　// 初始化MediaRecorder實例

            mediaRecorder.ondataavailable = handleDataAvailable;　　　　// 設置數據可用（錄屏結束）時的回調
            mediaRecorder.start();

            function handleDataAvailable(event) {
                console.log("data-available");
                if (event.data.size > 0) {
                    recordedChunks.push(event.data);　　// 添加數據，event.data是一個BLOB對象
                    console.log(recordedChunks);
                    download();　　　　// 封裝成BLOB對象並下載
                } else {
                    // ...
                }
            }

            function download() {
                var blob = new Blob(recordedChunks, {
                    type: "video/webm"
                });
                var url = URL.createObjectURL(blob);
                var a = document.createElement("a");
                document.body.appendChild(a);
                a.style = "display: none";
                a.href = url;
                a.download = "test.webm";
                a.click();
                window.URL.revokeObjectURL(url);
            }

        })

        

本示例參考自：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaStream_Recording_API

 2023年2月補充：

MediaRecorder.start()方法可以接受一個timeslice參數，指定每多少毫秒產生一個blob，如果不指定這個參數，則會在錄制結束時產生一個非常大的blob

 

原理：

navigator.mediaDevices.getDisplayMedia()是瀏覽器提供的屏幕捕獲接口，它會向用戶請求分享屏幕，通過Promise返回一個MediaStream（媒體流）

MediaRecorder類可以捕獲MediaStream中的二進制媒體數據，再通過Blob API和URL API就能轉換成可供下載的文件。

 

可通過多種方式獲得MediaStream實例。

- HTML Audio/Video標簽

- Canvas標簽

- 用戶的麥克風和攝像頭

- 以及前面提到的屏幕捕獲接口

也就是說， 可以錄制<video>元素、<canvas>元素、攝像頭、麥克風 的音頻和視頻數據。

 

下面的表格給出了通過不同方式獲取MediaStream實例的方法：

 

源	獲取方式	promise
video元素	document.querySelector('video').captureStream()	no
audio元素	document.querySelector('audio').captureStream()	no
canvas元素	document.querySelector('canvas').captureStream()	no
麥克風和攝像頭	navigator.mediaDevices.getUserMedia({audio: true, video: true})	yes
屏幕捕獲	navigator.mediaDevices.getDisplayMedia()	yes

 

 

 

圖1：向用戶請求屏幕捕獲權限

 

圖2：視頻文件（進度條好像有問題，可能是視頻編碼格式的問題）

 

 

 

參考文檔：

https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API

https://developer.mozilla.org/zh-CN/docs/Web/API/MediaStream_Recording_API

https://developer.mozilla.org/zh-CN/docs/Web/API/Screen_Capture_API