2

我们正在尝试使用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请下载后播放视频，因为它在浏览器中播放良好。

下载视频的属性

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

4

2 回答 2

0

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

遗憾的是，该MediaRecorderAPI不会创建可搜索的录音文件。

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

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

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

于 2020-08-28T20:12:52.693 回答
0

使用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();   
    }   
}
于 2020-08-07T09:16:48.960 回答