HTMLMediaElement.srcObject

const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true });
const video = document.createElement("video");
video.srcObject = mediaStream;

const mediaSource = new MediaSource();
const video = document.createElement("video");
video.srcObject = mediaSource;

const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true });
const video = document.createElement("video");
if ("srcObject" in video) {
  video.srcObject = mediaStream;
} else {
  // 사라질 예정이므로 새 브라우저에서는 사용하지 마세요.
  video.src = URL.createObjectURL(mediaStream);
}

const mediaSource = new MediaSource();
const video = document.createElement("video");
// 이전 브라우저는 srcObject가 없을수 있습니다.
if ("srcObject" in video) {
  try {
    video.srcObject = mediaSource;
  } catch (err) {
    if (err.name !== "TypeError") {
      throw err;
    }
    // 만약 srcObject가 있더라도 MediaStream만 지원하는 경우가 있을 수 있습니다.
    video.src = URL.createObjectURL(mediaSource);
  }
} else {
  video.src = URL.createObjectURL(mediaSource);
}

// 내부 전용 워커
let mediaSource = new MediaSource();
let handle = mediaSource.handle;
// 워커를 만든 컨텍스트로 핸들을 전송합니다
postMessage({ arg: handle }, [handle]);

mediaSource.addEventListener("sourceopen", () => {
  // SourceBuffers를 생성하고 가져온(fetched) 미디어로 채우기 전에
  // MediaSource에서 sourceopen을 기다리세요(await). MediaSource는
  // HTMLMediaElement에 연결되고 readyState가 "open"이 될 때까지
  // SourceBuffers 생성을 수락하지 않습니다.
});

worker.addEventListener("message", (msg) => {
  let mediaSourceHandle = msg.data.arg;
  video.srcObject = mediaSourceHandle;
  video.play();
});