MediaStream: removeTrack() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2017年9月⁩.

removeTrack() は MediaStream インターフェイスのメソッドで、ストリームから MediaStreamTrack を除去します。

構文

removeTrack(track)

引数

track: ストリームから除去される MediaStreamTrack です。

次の例は、 MediaStream から音声トラックと映像トラックを除去する方法を示しています。 fetchStreamFunction は、 fetchStreamButton のイベントハンドラーです。このボタンがクリックされると、システムの機器から音声と動画がキャプチャされます。 removeTracksFunction は、 removeTracksButton のイベントハンドラーです。このボタンがクリックされると、音声と映像トラックが MediaStream から除去されます。

let initialStream = null;
let newStream = null;

let fetchStreamButton = document.getElementById("fetchStream");
let removeTracksButton = document.getElementById("removeTracks");

async function fetchStreamFunction() {
  initialStream = await navigator.mediaDevices.getUserMedia({
    video: { width: 620, height: 310 },
    audio: true,
  });
  if (initialStream) {
    await attachToDOM(initialStream);
  }
}

async function attachToDOM(stream) {
  newStream = new MediaStream(stream.getTracks());
  document.querySelector("video").srcObject = newStream;
}

async function removeTracksFunction() {
  let videoTrack = newStream.getVideoTracks()[0];
  let audioTrack = newStream.getAudioTracks()[0];

  newStream.removeTrack(videoTrack);
  newStream.removeTrack(audioTrack);

  // ストリームが空になる
  console.log(newStream.getTracks());
}

fetchStreamButton.addEventListener("click", fetchStreamFunction);
removeTracksButton.addEventListener("click", removeTracksFunction);