如何解决WebRTC captureStream视频转换为带有CORS的视频
WebRTC的示例(https://webrtc.github.io/samples/src/content/capture/video-video)演示了您可以使用video.captureStream()
将一个视频的内容流传输到另一个视频。但是,我在跨来源进行此操作时遇到了一些麻烦。这是错误:
未捕获的SecurityError:无法在'HTMLMediaElement'上执行'captureStream':无法从具有跨源数据的元素捕获
这是我的代码:
const leftVideo = document.getElementById('leftVideo');
const rightVideo = document.getElementById('rightVideo');
leftVideo.addEventListener('canplay',() => {
let stream;
const fps = 0;
if (leftVideo.captureStream) {
stream = leftVideo.captureStream(fps);
} else if (leftVideo.mozCaptureStream) {
stream = leftVideo.mozCaptureStream(fps);
} else {
console.error('Stream capture is not supported');
stream = null;
}
rightVideo.srcObject = stream;
});
<video id="leftVideo" playsinline controls loop muted>
<source src="https://webrtc.github.io/samples/src/video/chrome.webm" type="video/webm"/>
<source src="https://webrtc.github.io/samples/src/video/chrome.mp4" type="video/mp4"/>
<p>This browser does not support the video element.</p>
</video>
<video id="rightVideo" playsinline autoplay></video>
解决方法
如消息所示,一个
无法从具有跨来源数据的元素中捕获
要添加的内容不多,没有解决方法,没有解决方案,没什么,您只是不能这样做。
如果要从任何媒体创建MediaStream,则需要将其用作相同的来源(作为真正相同的来源,或使用适当的Access-Control-Allow-Origin标头)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。