0

我正在使用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是 a Promise，它解析为 a MediaStream。tracks是一个MediaStreamTrack对象数组。这是我第一次做任何类型的 Web 开发，所以我有点迷茫！

4

3 回答 3

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

于 2021-01-01T11:29:49.033 回答
1

在 MDN 文档上记录媒体元素对我帮助很大。基本上，我们不使用getUserMedia()，而是使用getDisplayMedia()。

于 2020-07-22T16:16:57.127 回答
0

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

于 2020-07-22T04:05:41.610 回答