如何在开始录制MediaStream之前添加延迟

Question

我正在尝试构建一个简单的屏幕记录器，在MDN文档的帮助下，我有以下两个功能：

window.onload = function startStream() {
    navigator.mediaDevices.getDisplayMedia({
        video: {
            cursor: "always"
        },
        audio: true
    }).then(stream => {
        preview.srcObject = stream;
        downloadButton.href = stream;
        preview.captureStream = preview.captureStream || preview.mozCaptureStream;
        return new Promise(resolve => preview.onplaying = resolve);
    }).then(() => startRecording(preview.captureStream())).then(recordedChunks => {
        let recordedBlob = new Blob(recordedChunks, {
            type: "video/webm"
        });
        recording.src = URL.createObjectURL(recordedBlob);
        downloadButton.href = recording.src;
        downloadButton.download = "RecordedVideo.webm";
    });
}
async function startRecording(stream) {
    let recorder = new MediaRecorder(stream);
    let data = [];
    recorder.ondataavailable = event => data.push(event.data);
    recorder.start();
    let stopped = new Promise((resolve, reject) => {
        recorder.onstop = resolve;
        recorder.onerror = event => reject(event.name);
    });
  
    let recorded = () => recorder.state == "recording" && recorder.stop();
    
    await Promise.all([stopped, recorded]);
    return data;
}

我想在数据开始记录之前添加一个延迟(比如3秒(。我试着在不同的位置玩setTimeout()，但一直出现Cannot GET /[object%20MediaStream]错误。任何帮助都会很棒！

Answer 1

Ciao，试着做这样的事情：

function wait() {
   return new Promise(resolve => {
   setTimeout(() => {
   resolve();
 }, 3000);
});
}
async function startRecording(stream) {
   let recorder = new MediaRecorder(stream);
   let data = [];
   recorder.ondataavailable = event => data.push(event.data);
   await wait(); 
   recorder.start();
   let stopped = new Promise((resolve, reject) => {
       recorder.onstop = resolve;
       recorder.onerror = event => reject(event.name);
   });
   let recorded = () => recorder.state == "recording" && recorder.stop();
   await Promise.all([stopped, recorded]);
   return data;
}