MediaRecorder: start — Ereignis · JavaScript-Referenz

Signatur

mediaRecorder.addEventListener("start", handler)

Beschreibung

Das Ereignis start der Schnittstelle MediaRecorder wird ausgelöst, nachdem MediaRecorder.start() aufgerufen wurde und der Rekorder mit der Aufnahme des Medienstroms beginnt. Dann hat state bereits den Wert "recording".

Sie können das Ereignis per addEventListener("start", handler) oder über die Eigenschaft onstart abonnieren. Übergeben wird ein einfaches Event-Objekt ohne zusätzliche Eigenschaften. Es lässt sich nicht abbrechen und steigt nicht im DOM auf.

Typische Einsätze: die Oberfläche auf den Aufnahmemodus umstellen (Aufnahme-Anzeige, Stopp-Schaltfläche aktivieren), einen Timer für die Aufnahmedauer starten oder Datenpuffer zurücksetzen. Weil das Ereignis asynchron eintrifft, beginnt die Aufnahme verlässlich erst hier und nicht schon direkt nach dem Aufruf von start().

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname, immer `"start"`.
$handler Pflicht	(event: Event) => void		Callback, das ein einfaches `Event` erhält. `event.target` verweist auf den auslösenden `MediaRecorder`.
$options	boolean \| AddEventListenerOptions	false	Optionale Listener-Optionen wie `{ once: true }` oder `{ signal }`.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler erhält ein Event-Objekt.

Beispiele

Aufnahme-Anzeige mit addEventListener einschalten

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

  recorder.addEventListener('start', (event) => {
    console.log('Aufnahme läuft, Status:', event.target.state);
    document.body.classList.add('is-recording');
  });

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

  recorder.start(1000); // alle 1000 ms ein Datenblock
  return recorder;
};

startAufnahme();

Aufnahme läuft, Status: recording

onstart-Eigenschaft mit Aufnahmedauer-Timer

const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
let timerId;
let sekunden = 0;

recorder.onstart = () => {
  sekunden = 0;
  timerId = setInterval(() => {
    sekunden += 1;
    console.log(`Aufnahmedauer: ${sekunden}s`);
  }, 1000);
};

recorder.onstop = () => {
  clearInterval(timerId);
  stream.getTracks().forEach((t) => t.stop());
};

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

Aufnahmedauer: 1s Aufnahmedauer: 2s Aufnahmedauer: 3s

Listener wieder entfernen mit removeEventListener

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

const onStart = () => {
  console.log('Erste Aufnahme gestartet');
  recorder.removeEventListener('start', onStart);
};

recorder.addEventListener('start', onStart);

recorder.start();
setTimeout(() => {
  recorder.stop();
  recorder.start(); // löst start aus, Handler ist aber entfernt
}, 1000);

Erste Aufnahme gestartet

// Wichtig · Fallstricke

Das Ereignis kommt asynchron. Code direkt nach recorder.start() läuft vor dem Handler. Starten Sie Timer oder UI-Wechsel deshalb im Handler.
start() wirft einen InvalidStateError, wenn state nicht "inactive" ist. Dann wird kein start-Ereignis ausgelöst. Nach dem Fortsetzen mit resume() kommt resume, nicht start.
Bei inaktivem Stream oder nicht unterstütztem MIME-Typ kann statt start ein error-Ereignis kommen. Prüfen Sie den MIME-Typ vorher mit MediaRecorder.isTypeSupported().
getUserMedia() funktioniert nur in einem sicheren Kontext (HTTPS oder localhost) und braucht die Erlaubnis des Nutzers.
Kompatibilität: Chrome, Edge und Firefox seit Langem, Safari erst ab 14.1. Unterstützte Container unterscheiden sich: Safari bevorzugt video/mp4, Chrome und Firefox video/webm.

Siehe auch

MediaRecorder MediaRecorder.start() MediaDevices.getUserMedia() MediaRecorder: stop MediaRecorder: error