MediaRecorder.start() — Methode · JavaScript-Referenz

Signatur

MediaRecorder.prototype.start(timeslice)

Beschreibung

Mit start() startet ein MediaRecorder die Aufnahme des Streams, den er beim Erzeugen erhalten hat, etwa Mikrofon, Kamera, Bildschirmfreigabe oder ein <canvas>-Stream. Der Zustand (state) wechselt von "inactive" auf "recording", und das Event start wird ausgelöst.

Ohne Argument sammelt der Recorder alle Daten in einem einzigen Blob. Diesen erhalten Sie erst, wenn Sie stop() oder requestData() aufrufen, und zwar über das Event dataavailable. Mit dem Parameter timeslice teilen Sie die Aufnahme in Stücke von ungefähr dieser Länge in Millisekunden. Das ist sinnvoll, wenn Sie Daten schon während der Aufnahme hochladen oder streamen wollen, zum Beispiel per WebSocket, oder wenn bei langen Aufnahmen nicht alles im Speicher gehalten werden soll.

Die Methode gibt nichts zurück und arbeitet asynchron. Der Aufruf kehrt also sofort zurück, und die Aufnahme beginnt kurz danach. Wollen Sie reagieren, sobald die Aufnahme wirklich läuft, hören Sie auf das Event start.

Parameter

Name	Typ	Default	Beschreibung
$timeslice	number	undefined (ein einziger Blob)	Länge der einzelnen Stücke in Millisekunden. Nach jedem Intervall wird ein `dataavailable`-Event mit einem `Blob` ausgelöst. Ohne Angabe entsteht nur ein Blob, und zwar bei `stop()` oder `requestData()`.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined). Die Daten kommen über das Event dataavailable.

Beispiele

Mikrofon aufnehmen und als Audio abspielen

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('stop', () => {
  const blob = new Blob(chunks, { type: recorder.mimeType });
  const audio = new Audio(URL.createObjectURL(blob));
  audio.play();
  stream.getTracks().forEach((t) => t.stop()); // Mikrofon freigeben
});

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

// nach 5 Sekunden beenden
setTimeout(() => recorder.stop(), 5000);

recording

Aufnahme in 1-Sekunden-Stücken per WebSocket streamen

const socket = new WebSocket('wss://example.com/upload');
const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });

const mimeType = MediaRecorder.isTypeSupported('video/webm;codecs=vp9,opus')
  ? 'video/webm;codecs=vp9,opus'
  : '';
const recorder = new MediaRecorder(stream, mimeType ? { mimeType } : {});

recorder.ondataavailable = (e) => {
  if (e.data.size > 0 && socket.readyState === WebSocket.OPEN) {
    socket.send(e.data); // Blob direkt senden
  }
};

recorder.onstart = () => console.log('Aufnahme läuft, MIME-Typ:', recorder.mimeType);
recorder.start(1000); // ca. jede Sekunde ein Blob

Aufnahme läuft, MIME-Typ: video/webm;codecs=vp9,opus

Zustand prüfen, um InvalidStateError zu vermeiden

const startRecording = (recorder) => {
  if (recorder.state !== 'inactive') {
    console.warn('Recorder läuft bereits:', recorder.state);
    return;
  }
  try {
    recorder.start();
  } catch (err) {
    console.error(err.name, err.message);
  }
};

const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const recorder = new MediaRecorder(stream);
startRecording(recorder);
startRecording(recorder); // zweiter Aufruf wird abgefangen

Recorder läuft bereits: recording

// Wichtig · Fallstricke

InvalidStateError: Wird ausgelöst, wenn state nicht "inactive" ist. Das passiert, wenn Sie start() doppelt aufrufen. Eine pausierte Aufnahme setzen Sie mit resume() fort, nicht mit start().
NotSupportedError: Wird ausgelöst, wenn der Stream inaktiv ist oder keine Spuren (Tracks) hat, oder wenn der gewählte mimeType nicht zu den Spuren passt, etwa ein reiner Audio-Typ für einen Videostream.
SecurityError: Wird ausgelöst, wenn der Stream aus Sicherheitsgründen nicht aufgenommen werden darf, zum Beispiel ein Canvas mit Inhalten aus fremden Quellen (origin-clean ist false).
timeslice ist nur ungefähr: Die Stücke können je nach Codec deutlich länger oder kürzer ausfallen, und kleine Werte werden je nach Browser auf ein Minimum angehoben. Nur das erste Stück enthält den Container-Header (z. B. von WebM). Einzelne spätere Stücke lassen sich daher nicht allein abspielen. Fügen Sie sie in der richtigen Reihenfolge zusammen.
Spuren ändern: Kommen während der Aufnahme Spuren hinzu oder fallen welche weg, brechen manche Browser die Aufnahme mit einem Fehler ab.
Kompatibilität: Die unterstützten Formate unterscheiden sich je nach Browser. Chrome und Firefox nehmen standardmäßig WebM auf, Safari MP4. Prüfen Sie den Typ vorher mit MediaRecorder.isTypeSupported(). Der Zugriff auf Mikrofon und Kamera funktioniert nur in einer sicheren Umgebung (HTTPS oder localhost).
Geben Sie nach der Aufnahme die Geräte mit track.stop() frei und die Speicher-URL mit URL.revokeObjectURL().

Siehe auch

MediaRecorder MediaRecorder.stop() MediaRecorder.pause() MediaRecorder.resume() MediaRecorder.requestData() MediaRecorder.isTypeSupported() MediaDevices.getUserMedia()