是否可以从具有交叉原点数据的元素中捕获?

时间:2018-09-13 23:55:58

标签: javascript webrtc

我有一个简单的脚本,可以在webRTC文档中找到,我试过运行它,但是似乎我缺少了一些东西

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

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

我检查流捕获时收到此错误 未捕获的DOMException:无法在'HTMLMediaElement'上执行'captureStream':无法从具有跨域数据的元素捕获     在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>

1 个答案:

答案 0 :(得分:1)

  1. 您可以如本链接所示设置crossOrigin 示例:

thread1 = new Thread(DoWork);

您要确保链接使用的是https

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

  1. 或者您可以使用访存创建可读的流,请访问以下链接的文档https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream,该链接为您提供了可帮助解决该问题的Blob网址: 示例:

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

  • 祝你好运...