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 September 2017.

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

構文

js
removeTrack(track)

引数

track

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

返値

なし (undefined)。

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

js
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);

仕様書

Specification
Media Capture and Streams
# dom-mediastream-removetrack

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
removeTrack

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support