使用navigator.mediaDevices.getDisplayMedia的JavaScript屏幕录制不存在'；看不见

我们正在尝试使用navigator.mediaDevices.getDisplayMediaAPI在ReatJS中录制屏幕，并在将流转换为Blob后在本地下载视频

要下载视频，我将流转换为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;
}

以下是使用上述代码下载的视频链接：

请在下载视频后播放，因为它在brwser中播放得很好

---

如果您认为我可以使用其他方法录制和下载视频，请分享详细信息

使用

文件阅读器

获取链接。href

试试这种方法。这应该行得通。（不过我没有测试）

我可以下载和播放视频，但无法使用搜索栏搜索视频

不幸的是，

MediaRecorder

API

这是因为它是一个实时记录器，不断生成数据，并以增量方式将数据返回给JS

这使得生成一个可查找的WebM文件变得很困难，这需要在事件发生后使用可查找的线索对文件的开头进行变异

---

解决方法是在以后使用或js库重新复制文件。

尝试了此代码，但仍然得到相同的结果，我仍然无法搜索视频。

startRecording(captureStream).then (recordedChunks => {
    let recordedBlob = new Blob(recordedChunks, { type: "video/webm;codecs=vp8" });
    const reader = new FileReader();
    reader.readAsDataURL(recordedBlob);
    reader.onload = e => {
        const link = document.createElement('a');
        link.href = e.target.result;
        link.download = "RecordedVideo.webm";
        link.click();   
    }   
}