The demo of WebRTC (https://webrtc.github.io/samples/src/content/capture/video-video) showcases the ability to stream one video's contents to another using video.captureStream(). However, I'm encountering issues when attempting this across different origins. The specific error message is:
Uncaught SecurityError: Failed to execute 'captureStream' on 'HTMLMediaElement': Cannot capture from element with cross-origin data
Provided below is my code snippet:
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>