使用 navigator.mediaDevices.getDisplayMedia 的 JavaScript 屏幕录像不可搜索

Posted 2023-03-31

【中文标题】使用 navigator.mediaDevices.getDisplayMedia 的 JavaScript 屏幕录像不可搜索

【英文标题】：Screen recordings in JavaScript with navigator.mediaDevices.getDisplayMedia aren't seekable

【发布时间】：2020-08-07 08:31:01

【问题描述】：

我们正在尝试使用 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

附：请下载后播放视频，因为它在浏览器中播放良好。

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

【参考方案1】：

使用FileReader 作为链接.href。

试试这个方法。这应该有效。 （虽然我没有测试它）。

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();   
       

【讨论】：

试过这段代码仍然得到相同的结果我仍然无法寻找视频。

【参考方案2】：

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

MediaRecorder API 不幸的是 does not create seekable recording files。

那是因为它是一个实时记录器，不断生成数据并增量返回给 JS。

这使得生成可搜索的 WebM 文件变得很困难，这需要事后使用可搜索的线索来改变文件的开头。

解决方法是在之后使用 ffmpeg 或 js 库重新混合文件。