如何从 Screen Capture Web API 存储/下载录制内容？

Question

我正在使用屏幕捕获 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是 aPromise解析为 a MediaStream。tracks是一个对象数组MediaStreamTrack。这是我第一次进行任何类型的 Web 开发，所以我有点迷失！

Answer 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 文件