是否可以从具有跨源数据的元素中捕获？

Question

我有这个简单的脚本，我在 webRTC 文档中找到了我尝试运行它，但似乎我错过了一些东西

const leftVideo = document.getElementById('leftVideo');
const rightVideo = document.getElementById('rightVideo');

leftVideo.addEventListener('canplay', () => {
const stream = leftVideo.captureStream();
rightVideo.srcObject = stream;
});

我在检查流捕获时收到此错误 Uncaught DOMException: Failed to execute 'captureStream' on 'HTMLMediaElement': 无法从 HTMLVideoElement.leftVideo.addEventListener 处的跨源数据元素捕获这是我的 index.html

<video id="leftVideo" playsinline controls loop muted>
    <source src="test1.webm" type="video/webm"/>
    <p>This browser does not support the video element.</p>
</video>

<video id="rightVideo" playsinline autoplay></video>

Answer 1

1. 您可以设置 crossOrigin，如此链接示例所示：

<video crossOrigin="anonymous" src="https://cdn.myapp.com:81/video.mp4"></video>

您想确保链接使用的是 https

参考：https : //stackoverflow.com/a/35245146/8689969

2. 或者您可以使用 fetch 创建可读流，请在此链接上跟进文档：https : //developer.mozilla.org/en-US/docs/Web/API/ReadableStream它为您提供应该有助于解决该问题的 blob url：例子：

// Fetch the original image
    fetch(video.filePath,  {
      mode: 'cors',
      headers: {
        'Access-Control-Allow-Origin':'*'
      }
    })
    // Retrieve its body as ReadableStream
    .then(response => {
      const reader = response.body.getReader();

      return new ReadableStream({
        start(controller) {
          return pump();
          function pump() {
            return reader.read().then(({ done, value }) => {
              // When no more data needs to be consumed, close the stream
              if (done) {
                  controller.close();
                  return;
              }
              // Enqueue the next data chunk into our target stream
              controller.enqueue(value);
              return pump();
            });
          }
        }  
      })
    })
    .then(stream => new Response(stream))
    .then(response => response.blob())
    .then(blob => URL.createObjectURL(blob))
    .then((url) => {
      // gives the blob url which solves cors error in reading stream(using captureStream() func)

      console.log(url);

      // do your thing
    })
    .catch(err => console.error(err));

• 祝你好运...