如何从 Screen Capture Web API 存储/下载录制文件？答案

【问题标题】：How can I store / download the recording from the Screen Capture web API?如何从 Screen Capture Web API 存储/下载录制文件？
【发布时间】：2020-11-10 05:48:12
【问题描述】：

我正在使用Screen Capture API 并尝试将最终捕获保存到视频文件（WebM、MP4 等）。我有这两个 JavaScript 函数：

async function startCapture() {
    try {
      videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
    } catch(err) {
      console.error("Error: " + err);
    }
}

function stopCapture() {
    let tracks = videoElem.srcObject.getTracks();
    tracks.forEach(track => track.stop());
    videoElem.srcObject = null;
}

开始捕获时，视频可以正常显示，但我不确定如何实际存储其内容。 videoElem 是一个 Promise，它解析为 MediaStream。 tracks 是 MediaStreamTrack 对象的数组。这是我第一次做任何类型的 Web 开发，所以我有点迷茫！

【问题讨论】：

标签： javascript screen-capture mediastream get-display-media

【解决方案1】：

async function startRecording() {
    stream = await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: true
});
recorder = new MediaRecorder(stream);

const chunks = [];
recorder.ondataavailable = e => chunks.push(e.data);
recorder.onstop = e => {
    const blob = new Blob(chunks, { type: chunks[0].type });
    console.log(blob);
    stream.getVideoTracks()[0].stop();

    filename="yourCustomFileName"
    if(window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveBlob(blob, filename);
    }
    else{
        var elem = window.document.createElement('a');
        elem.href = window.URL.createObjectURL(blob);
        elem.download = filename;        
        document.body.appendChild(elem);
        elem.click();        
        document.body.removeChild(elem);
    }
    };
    recorder.start();
}
startRecording(); //Start of the recording 

-----------

recorder.stop() // End your recording by emitting this event

这会将您的录音保存为 webm 文件

【讨论】：

感谢您的回答，是否有任何解决方法可以使其在 Mac OS 上运行？

【解决方案2】：

与任何 MediaStream 一样，您可以使用 MediaRecorder API 对其进行录制。

【讨论】：

【解决方案3】：

MDN 文档上的Recording a media element 帮助了我很多。基本上，我们不使用getUserMedia()，而是使用getDisplayMedia()。

【讨论】：