MediaRecorder: error — Ereignis · JavaScript-Referenz

Signatur

mediaRecorder.addEventListener("error", handler)

Beschreibung

Das error-Ereignis wird an einer MediaRecorder-Instanz ausgelöst, wenn die Aufnahme wegen eines Fehlers nicht fortgesetzt werden kann. Typische Ursachen: Die Aufnahme ist aus Sicherheitsgründen nicht erlaubt (SecurityError), dem Stream wurden während der Aufnahme Spuren hinzugefügt oder entfernt (InvalidModificationError), der Encoder ist fehlgeschlagen (EncodingError) oder es ist ein unbekannter interner Fehler aufgetreten (UnknownError).

Man registriert den Handler entweder per recorder.addEventListener("error", handler) oder über die Eigenschaft recorder.onerror = handler. Nach einem Fehler beendet der Browser die Aufnahme: Er feuert in der Regel noch ein letztes dataavailable mit den bis dahin gesammelten Daten und danach stop. Der Zustand recorder.state wechselt auf "inactive".

Das Ereignisobjekt enthält in den meisten Browsern die Eigenschaft error mit einer DOMException, deren name und message die Fehlerursache beschreiben. Das Ereignis lässt sich nicht abbrechen und steigt nicht auf (kein Bubbling).

Wichtig: Fehler, die bereits beim Aufruf auftreten – etwa ein nicht unterstützter mimeType im Konstruktor oder start() auf einem inaktiven Stream – werden synchron als Ausnahme geworfen und nicht über dieses Ereignis gemeldet. Diese Fälle sollte man zusätzlich mit try…catch abfangen.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname, hier immer `"error"`.
$handler Pflicht	(event: Event & { error?: DOMException }) => void		Callback, der beim Fehler aufgerufen wird. `event.error` enthält (sofern vorhanden) eine `DOMException` mit `name` und `message`.
$options	boolean \| AddEventListenerOptions	false	Optionale Listener-Optionen wie `once` oder `signal` (zum Entfernen per `AbortController`).

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler erhält ein Ereignisobjekt; dessen Eigenschaft error (DOMException) beschreibt den Fehler.

Beispiele

Fehler bei der Aufnahme mit addEventListener behandeln

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

  recorder.addEventListener('dataavailable', (e) => chunks.push(e.data));

  recorder.addEventListener('error', (event) => {
    // event.error ist eine DOMException (falls vom Browser geliefert)
    const err = event.error ?? event;
    console.error(`Aufnahmefehler: ${err.name} – ${err.message}`);
    stream.getTracks().forEach((t) => t.stop());
  });

  recorder.addEventListener('stop', () => {
    const blob = new Blob(chunks, { type: recorder.mimeType });
    console.log('Gesicherte Daten:', blob.size, 'Bytes');
  });

  recorder.start(1000); // alle Sekunde ein Datenpaket
  return recorder;
};

startRecording();

Aufnahmefehler: InvalidModificationError – ... (im Fehlerfall) Gesicherte Daten: 48213 Bytes

Handler über die onerror-Eigenschaft setzen

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

recorder.onerror = (event) => {
  const name = event.error?.name ?? 'UnknownError';
  const messages = {
    SecurityError: 'Aufnahme aus Sicherheitsgründen blockiert.',
    InvalidModificationError: 'Die Spuren des Streams haben sich geändert.',
    EncodingError: 'Kodierung fehlgeschlagen.',
  };
  console.warn(messages[name] ?? `Unbekannter Fehler (${name})`);
};

recorder.start();

// Handler später entfernen
// recorder.onerror = null;

Die Spuren des Streams haben sich geändert.

Synchrone Fehler und error-Ereignis kombiniert abfangen, Listener per AbortController entfernen

const record = async (mimeType) => {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
  const controller = new AbortController();

  let recorder;
  try {
    // Nicht unterstützter mimeType wirft hier synchron NotSupportedError
    recorder = new MediaRecorder(stream, { mimeType });
  } catch (err) {
    console.error('Konstruktor-Fehler:', err.name);
    return;
  }

  recorder.addEventListener('error', (e) => {
    console.error('Laufzeitfehler:', e.error?.name);
  }, { signal: controller.signal });

  recorder.addEventListener('stop', () => {
    controller.abort(); // entfernt alle Listener mit diesem Signal
    stream.getTracks().forEach((t) => t.stop());
  }, { signal: controller.signal });

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

record('video/x-unbekannt');

Konstruktor-Fehler: NotSupportedError

// Wichtig · Fallstricke

Ereignistyp uneinheitlich: Ältere Browser liefern ein MediaRecorderErrorEvent (inzwischen veraltet), neuere ein allgemeines Event/ErrorEvent. Auf event.error daher defensiv zugreifen, z. B. event.error?.name. Die früher dokumentierte Eigenschaft event.name ist veraltet.
Nicht alle Fehler kommen als Ereignis: Ungültiger mimeType im Konstruktor (NotSupportedError) oder start() im falschen Zustand (InvalidStateError) werden synchron geworfen. Vorher mit MediaRecorder.isTypeSupported() prüfen.
Aufnahme endet: Nach dem Ereignis ist der Recorder "inactive". Ein erneuter Start braucht in der Regel eine neue Instanz. Die Medienspuren (track.stop()) selbst beenden, sonst bleiben Kamera- oder Mikrofonanzeige aktiv.
Spuren ändern: Fügt man während der Aufnahme dem MediaStream Spuren hinzu oder entfernt welche, meldet Firefox InvalidModificationError. Chrome verhält sich hier teils anders.
Kompatibilität: Safari unterstützt MediaRecorder erst ab Version 14.1. Die verfügbaren Codecs unterscheiden sich stark (Safari: MP4/AAC/H.264, Chrome/Firefox: WebM/Opus/VP8/VP9).
Die Aufnahme setzt einen sicheren Kontext (HTTPS) und Nutzerfreigabe über getUserMedia()/getDisplayMedia() voraus.

Siehe auch

MediaRecorder: stop MediaRecorder: pause MediaRecorder: resume MediaRecorder: start MediaRecorder: dataavailable AudioEncoder: dequeue AudioWorkletNode: processorerror