MediaRecorder.stream — Eigenschaft · JavaScript-Referenz

Signatur

get MediaRecorder.prototype.stream

Beschreibung

Die Eigenschaft MediaRecorder.stream liefert genau das MediaStream-Objekt, das beim Aufruf von new MediaRecorder(stream, options) übergeben wurde. Es handelt sich um dieselbe Objektreferenz, also um keine Kopie. Die Eigenschaft ist schreibgeschützt: Einem bestehenden Recorder kann man keinen anderen Stream zuweisen.

Das ist vor allem dann nützlich, wenn man nur noch den Recorder in der Hand hat, etwa in einem Event-Handler wie onstop oder in einer Hilfsfunktion, und trotzdem auf die zugrunde liegenden Spuren (MediaStreamTrack) zugreifen will. Typische Aufgaben sind: nach der Aufnahme alle Spuren mit track.stop() beenden, damit Kamera- oder Mikrofonanzeige erlöschen, sich die Einstellungen einer Spur ansehen oder denselben Stream in einem <video>-Element als Vorschau anzeigen.

Ein wichtiger Punkt: Der Recorder zeichnet die Spuren auf, die der Stream beim Start enthält. Fügt man während einer laufenden Aufnahme Spuren über stream.addTrack() hinzu oder entfernt welche, brechen die meisten Browser die Aufnahme mit einem Fehler ab (Ereignis error) oder ignorieren die neuen Spuren.

Rückgabewert

Typ

MediaStream

Beschreibung

Das MediaStream-Objekt, das dem Konstruktor übergeben wurde. Es ist identisch mit dem ursprünglichen Objekt (recorder.stream === stream).

Beispiele

Stream-Referenz prüfen

const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const recorder = new MediaRecorder(stream);

console.log(recorder.stream === stream);
console.log(recorder.stream.getAudioTracks().length);

true 1

Kamera und Mikrofon nach der Aufnahme freigeben

const startRecording = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
  const recorder = new MediaRecorder(stream);
  const chunks = [];

  recorder.ondataavailable = (e) => chunks.push(e.data);
  recorder.onstop = () => {
    // Spuren über recorder.stream beenden, damit die Aufnahmeanzeige erlischt
    recorder.stream.getTracks().forEach((track) => track.stop());
    const blob = new Blob(chunks, { type: recorder.mimeType });
    console.log(`Aufnahme fertig: ${blob.size} Bytes`);
  };

  recorder.start();
  setTimeout(() => recorder.stop(), 3000);
};

startRecording();

Aufnahme fertig: 245812 Bytes

Live-Vorschau aus dem Recorder-Stream

const showPreview = (recorder, videoEl) => {
  videoEl.srcObject = recorder.stream;
  videoEl.muted = true; // Rückkopplung vermeiden
  return videoEl.play();
};

const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
await showPreview(recorder, document.querySelector('video'));
recorder.start(1000);

const [track] = recorder.stream.getVideoTracks();
console.log(track.label, track.getSettings().width);

screen:0:0 1920

// Wichtig · Fallstricke

Nur lesbar: Wenn man recorder.stream etwas zuweist, passiert im nicht-strikten Modus einfach nichts, im strikten Modus gibt es einen TypeError. Wer einen anderen Stream aufnehmen will, braucht einen neuen MediaRecorder.
Spuren ändern während der Aufnahme: Wird addTrack() oder removeTrack() auf dem Stream aufgerufen, während state === 'recording' gilt, bricht die Aufnahme in Chrome und Firefox meist ab. Wer Quellen dynamisch wechseln will, mischt sie vorher, zum Beispiel über ein <canvas> mit captureStream() oder einen AudioContext.
Ressourcen: recorder.stop() beendet nicht die Spuren des Streams. Kamera und Mikrofon bleiben so lange aktiv, bis man track.stop() aufruft.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt, in Safari ab 14.1. getUserMedia und getDisplayMedia funktionieren nur in sicheren Kontexten (HTTPS oder localhost).

Siehe auch

MediaRecorder MediaStream MediaStreamTrack.stop() MediaRecorder.state MediaDevices.getUserMedia() MediaRecorderErrorEvent.error