javascript - 如何在开始录制 MediaStream 之前添加延迟?
问题描述
我正在尝试构建一个简单的屏幕录像机,并且在 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]
出错。任何帮助都是极好的!
解决方案
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;
}
推荐阅读
- c# - 我的 c# 代码无法导入 p12 证书并进行身份验证并显示错误无效凭据
- android - Oppo Firebase 在后台通知
- java - 如何使用 Java 8 流过滤列表并从值数组开始
- node.js - MongoDB 中的某种连接聚合查询
- hyperledger-fabric - 拜占庭容错 (BFT) 和崩溃容错 (CFT)
- botframework - 英雄卡中长文本的工具提示
- ios - ios中的UIUserInterfaceIdiomPad
- read-the-docs - 构建失败 Sphinx 错误 contents.rst 未找到
- javascript - 如何删除 RecordRTC 中的空白帧
- reactjs - 在 React + material-ui 中提取样式