Start · Sprachen · JavaScript · Referenz · MediaStreamTrack.stop()

MediaStreamTrack.stop()

Methode

Beendet einen <code>MediaStreamTrack</code> endgültig, gibt die zugehörige Quelle (z. B. Kamera oder Mikrofon) frei und setzt <code>readyState</code> auf <code>"ended"</code>.

seit JavaScript Baseline: alle modernen Browser Kategorie: webapi

Signatur

MediaStreamTrack.prototype.stop()

Beschreibung

stop() beendet einen Audio- oder Video-Track dauerhaft. Danach liefert der Track keine Mediendaten mehr und seine Eigenschaft readyState steht auf "ended". Ein gestoppter Track lässt sich nicht wieder starten. Wer die Quelle erneut braucht, muss sie z. B. über navigator.mediaDevices.getUserMedia() neu anfordern.

Die Methode ist vor allem wichtig, um Hardware freizugeben. Erst wenn alle Tracks gestoppt sind, die auf eine Kamera oder ein Mikrofon zugreifen, schaltet der Browser die Aufnahmeanzeige aus (z. B. die Kamera-LED oder das Aufnahme-Symbol im Tab). Das Gleiche gilt für Bildschirmfreigaben über getDisplayMedia().

Wenn Sie einen Track mit clone() kopieren, teilen sich Original und Kopie dieselbe Quelle. stop() beendet nur den Track, auf dem Sie es aufrufen. Die Quelle wird erst freigegeben, wenn kein Track mehr auf sie zugreift. Um einen Track nur kurz stummzuschalten, ohne ihn zu beenden, setzen Sie stattdessen track.enabled = false.

Rückgabewert

Typ
void
Beschreibung
Kein Rückgabewert (undefined).

Beispiele

Kamera starten und wieder freigeben

const video = document.querySelector('video');
let stream;

const startCamera = async () => {
  stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
  video.srcObject = stream;
};

const stopCamera = () => {
  // Alle Tracks beenden, damit die Kamera-LED ausgeht
  stream?.getTracks().forEach((track) => track.stop());
  video.srcObject = null;
};

document.querySelector('#start').addEventListener('click', startCamera);
document.querySelector('#stop').addEventListener('click', stopCamera);

readyState nach stop() prüfen

const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const [audioTrack] = stream.getAudioTracks();

console.log(audioTrack.readyState);
audioTrack.stop();
console.log(audioTrack.readyState);
live ended

Nur Video beenden, Audio weiterlaufen lassen

const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });

// Kamera abschalten, Mikrofon bleibt aktiv
stream.getVideoTracks().forEach((track) => {
  track.stop();
  stream.removeTrack(track);
});

console.log(stream.getTracks().map((t) => `${t.kind}: ${t.readyState}`));
["audio: live"]

Bildschirmfreigabe beim Verlassen der Seite beenden

const screen = await navigator.mediaDevices.getDisplayMedia({ video: true });

const cleanup = () => screen.getTracks().forEach((t) => t.stop());
window.addEventListener('pagehide', cleanup);

// Nutzer beendet die Freigabe über die Browser-Leiste
screen.getVideoTracks()[0].addEventListener('ended', () => {
  console.log('Freigabe vom Nutzer beendet');
});

// Wichtig · Fallstricke

  • Nicht umkehrbar: Ein gestoppter Track bleibt beendet. Für eine kurze Pause verwenden Sie track.enabled = false.
  • Kein ended-Event: Rufen Sie stop() selbst auf, wird das Ereignis ended nicht ausgelöst. Es feuert nur, wenn der Track von außen endet, zum Beispiel weil das Gerät getrennt wird, der Nutzer die Berechtigung entzieht oder die Freigabe über die Browser-Leiste beendet.
  • MediaStream.stop() ist veraltet: Es wurde aus der Spezifikation entfernt. Stoppen Sie stattdessen jeden Track einzeln über getTracks().
  • Geklonte Tracks: Die Hardware wird erst freigegeben, wenn alle Klone gestoppt sind.
  • Wenn Sie srcObject = null setzen oder den <video>-Knoten entfernen, bleiben die Tracks trotzdem aktiv. Sie müssen sie ausdrücklich mit stop() beenden.
  • Bei WebRTC endet ein gestoppter lokaler Track auch für den RTCRtpSender. Die Gegenseite erhält danach nichts mehr, bis Sie mit replaceTrack() einen neuen Track einsetzen.
  • Die Methode wird von allen modernen Browsern unterstützt. getUserMedia() funktioniert allerdings nur in sicheren Kontexten (HTTPS).