Блог

Я пытаюсь записать поток, возвращаемый из getUserMedia() использования MediaRecorder каждые 5 секунд, и хочу установить записанное видео на другой видеоэлемент, изменив атрибут src. Ниже приведен код, который я написал, но проблема в том, что он воспроизводится в первый раз, когда установлен src attr, но когда я изменил src attr во второй раз, он не воспроизводится.

 const socket = io();

const $videoMedia = document.querySelector("#video-media");
const $remoteVideoMedia = document.querySelector("#remote-video-media");
let mediaStream = new MediaStream();

const init = async () => {
  const constraints = {
    audio: true,
    video: true,
  };

  mediaStream = await navigator.mediaDevices.getUserMedia(constraints);
  const mediaRecorder = new MediaRecorder(mediaStream);
  mediaRecorder.start(5000);
  console.log(mediaStream);
  mediaRecorder.ondataavailable = (e) => {
    const blob = new Blob([e.data], {
      type: "video/x-matroska;codecs=avc1,opus",
    });
    console.log(blob);
    $remoteVideoMedia.setAttribute("src", window.URL.createObjectURL(blob));
  };
  $videoMedia.srcObject = mediaStream;
};

init().then(() => {
  console.log("media stream added");
});
 

Я проверил некоторые ответы stackoverflow относительно динамического изменения значения атрибута src для видеоэлемента, но ни один из них не сработал для меня.