Блог

Главная - Вопросы по программированию - WebRTC captureStream() преобразование видео в видео с помощью CORS

WebRTC captureStream() преобразование видео в видео с помощью CORS

#javascript #webrtc #html5-video

#javascript #webrtc #html5-видео #capturestream

Вопрос:

Пример WebRTC (https://webrtc.github.io/samples/src/content/capture/video-video ) демонстрирует, что вы можете передавать содержимое одного видео в другое видео с помощью video.captureStream() . Однако у меня возникли некоторые проблемы с выполнением этого в источниках. Это ошибка:

Не обнаруженная ошибка безопасности: не удалось выполнить ‘captureStream’ для ‘HTMLMediaElement’: не удается выполнить захват из элемента с данными из разных источников

Вот мой код:

 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>

Ответ №1:

Как говорится в сообщении, один

Не удается выполнить захват из элемента с данными из разных источников

Добавить к этому особо нечего, нет обходного пути, нет решения, ничего, вы просто не можете этого сделать.

Если вы хотите создать медиапоток с любого носителя, он должен обслуживаться с тем же источником (либо с тем же источником, либо с соответствующими заголовками Access-Control-Allow-Origin)