CODEWITHSUNDEEP
javascriptwebrtchtml5-videocapturestream
Ben Botvinick
Ben Botvinick

Reputation: 3335

WebRTC captureStream() video to video with CORS

WebRTC's sample (https://webrtc.github.io/samples/src/content/capture/video-video) demonstrates that you can stream the contents of one video to another video using video.captureStream(). However, I'm having some trouble doing this across origins. This is the error:

Uncaught SecurityError: Failed to execute 'captureStream' on 'HTMLMediaElement': Cannot capture from element with cross-origin data

Here is my code:

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>

Upvotes: 0

Views: 1452

Answers (1)

Kaiido
Kaiido

Reputation: 136986

As the message says, one

Cannot capture from element with cross-origin data

Not much to add to this, there is no workaround, no solution, nothing, you just can't do that.

If you want to create a MediaStream from any media, it needs to be served as same origin (either as really same-origin, or with the proper Access-Control-Allow-Origin headers)

Upvotes: 1

Related Questions