MediaRecorder.state — Eigenschaft · JavaScript-Referenz

Signatur

MediaRecorder.state

Beschreibung

Die Eigenschaft state eines MediaRecorder-Objekts zeigt, in welchem Zustand die Aufnahme gerade ist. Möglich sind genau drei Werte:

"inactive": Es läuft keine Aufnahme. Das gilt direkt nach dem Erzeugen und nach stop().
"recording": Die Aufnahme läuft, nachdem start() oder resume() aufgerufen wurde.
"paused": Die Aufnahme wurde mit pause() angehalten und kann mit resume() fortgesetzt werden.

In der Praxis prüft man state vor dem Aufruf von start(), pause(), resume() oder stop(). Ein Aufruf im falschen Zustand wirft nämlich eine InvalidStateError-DOMException, zum Beispiel start(), wenn schon aufgenommen wird. Mit state lässt sich außerdem die Oberfläche passend halten, etwa Beschriftungen von Schaltflächen oder ein Aufnahme-Symbol.

Die Eigenschaft ist nur lesbar. Den Zustand ändert man ausschließlich über die Methoden des Recorders. Jeder Zustandswechsel löst ein passendes Ereignis aus (start, pause, resume, stop). Auf diese Ereignisse kann man reagieren, statt state regelmäßig abzufragen.

Rückgabewert

Typ

"inactive" | "recording" | "paused"

Beschreibung

Ein String mit dem aktuellen Aufnahmezustand. Er ist immer einer der drei Werte "inactive", "recording" oder "paused".

Beispiele

Zustand im Lebenszyklus einer Aufnahme verfolgen

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

console.log(recorder.state); // direkt nach dem Erzeugen

recorder.start();
console.log(recorder.state);

recorder.pause();
console.log(recorder.state);

recorder.resume();
recorder.stop();
console.log(recorder.state);

inactive recording paused inactive

Umschalt-Schaltfläche für Aufnahme starten/stoppen

const button = document.querySelector('#record');
const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
const recorder = new MediaRecorder(stream);
const chunks = [];

recorder.addEventListener('dataavailable', (e) => chunks.push(e.data));
recorder.addEventListener('stop', () => {
  const blob = new Blob(chunks, { type: recorder.mimeType });
  console.log('Aufnahme fertig:', blob.size, 'Bytes');
  chunks.length = 0;
});

button.addEventListener('click', () => {
  if (recorder.state === 'inactive') {
    recorder.start();
    button.textContent = 'Stopp';
  } else {
    recorder.stop();
    button.textContent = 'Aufnehmen';
  }
});

Aufnahme fertig: 48213 Bytes

Pause/Fortsetzen ohne InvalidStateError

const togglePause = (recorder) => {
  switch (recorder.state) {
    case 'recording':
      recorder.pause();
      break;
    case 'paused':
      recorder.resume();
      break;
    default:
      console.warn('Keine laufende Aufnahme – Pause nicht möglich.');
  }
  return recorder.state;
};

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

Keine laufende Aufnahme – Pause nicht möglich. inactive paused recording

UI über Ereignisse statt Abfragen aktualisieren

const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const recorder = new MediaRecorder(stream);
const statusEl = document.querySelector('#status');

const updateStatus = () => {
  statusEl.textContent = `Status: ${recorder.state}`;
};

['start', 'pause', 'resume', 'stop'].forEach((type) =>
  recorder.addEventListener(type, updateStatus)
);

updateStatus();
recorder.start();

Status: inactive → Status: recording

// Wichtig · Fallstricke

InvalidStateError: start() wirft diesen Fehler, wenn state nicht "inactive" ist. pause(), resume() und stop() werfen ihn dagegen nur im Zustand "inactive". Deshalb vor jedem Aufruf state prüfen.
Zeitpunkt des Wechsels: state ändert sich sofort beim Methodenaufruf (synchron). Die zugehörigen Ereignisse wie stop oder das letzte dataavailable kommen dagegen erst später (asynchron). Nach stop() ist state also schon "inactive", obwohl die letzten Daten noch fehlen. Den fertigen Blob daher erst im stop-Ereignis zusammenbauen.
Automatisches Stoppen: Wenn alle Spuren des Streams enden, zum Beispiel weil der Nutzer die Bildschirmfreigabe beendet oder track.stop() aufgerufen wird, wechselt der Recorder von selbst zu "inactive". Bei einem Fehler löst er außerdem ein error-Ereignis aus.
Kompatibilität: Unterstützt von Chrome 49+, Firefox 25+, Edge 79+ und Safari 14.1+. Nur in sicheren Kontexten (HTTPS) nutzbar, da getUserMedia dort benötigt wird. Ob der Recorder überhaupt verfügbar ist, lässt sich mit 'MediaRecorder' in window prüfen.
Der Wert ist ein einfacher String und kein Enum-Objekt. Vergleiche daher mit === gegen den exakten, kleingeschriebenen Wert.

Siehe auch

MediaRecorder.stream MediaRecorder.mimeType MediaRecorder.audioBitrateMode MediaRecorder.audioBitsPerSecond MediaRecorder.videoBitsPerSecond