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;
    }
    // 対応していても、 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", () => {
  // MediaSource で sourceopen を待ってから、SourceBuffer を作成し、
  // 取得したメディアを投入してください。MediaSource は、
  // HTMLMediaElement に接続され、その readyState が "open" になるまで
  // SourceBuffer の作成を受け入れません。
});

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