我们正在尝试使用navigator.mediaDevices.getDisplayMedia API 在 ReatJS 中录制屏幕,并在将 Stream 转换为 Blob 后在本地下载视频。
要下载视频,我将 Stream 转换为 Blob,然后使用 URL.createObjectURL() 获取 url 并以编程方式创建标签并以编程方式单击它以在本地下载视频。
我可以下载和播放视频,但无法在任何视频播放器中使用搜索栏搜索视频。
当我检查已下载视频的属性时,我看不到长度。我认为这就是问题所在,但我不确定在创建 blob 时应该如何设置长度。
function startRecording(stream) {
let options = {mimeType:'video/webm;codecs=vp8'};
let recorder = new MediaRecorder(stream,options);
let data = [];
recorder.ondataavailable = event => data.push(event.data);
recorder.start(1000);
let stopped = new Promise((resolve, reject) => {
recorder.onstop = resolve;
recorder.onerror = event => reject(event.name);
});
return Promise.all([
stopped
])
.then(() => data);
}
export async function startCapture(displayMediaOptions) {
let captureStream = null;
try {
captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
} catch(err) {
console.error("Error: " + err);
}
console.log("captureStream >>",captureStream)
if(captureStream ==null){
console.log("recording cancel")
return -1;
}
startRecording(captureStream).then (recordedChunks => {
let recordedBlob = new Blob(recordedChunks, { type: "video/webm;codecs=vp8" });
console.log(captureStream)
const href = URL.createObjectURL(recordedBlob);
console.log(href);
const link = document.createElement('a');
link.href = href;
link.download = "RecordedVideo";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})
return captureStream;
}
这是使用上述代码下载的视频链接:
https://drive.google.com/file/d/1rtniknYlhsYVX3oEV6V7SWoV3RsNupqK/view?usp=sharing
PS请下载后播放视频,因为它在浏览器中播放良好。
如果您认为我可以使用其他方法录制和下载视频,请分享详细信息