new MediaRecorder() — Methode · JavaScript-Referenz

Signatur

new MediaRecorder(stream, options)

Beschreibung

Der Konstruktor MediaRecorder() erzeugt einen Rekorder für einen MediaStream. Die Quelle kann z. B. aus navigator.mediaDevices.getUserMedia() (Kamera/Mikrofon), getDisplayMedia() (Bildschirmaufnahme), HTMLCanvasElement.captureStream() oder einem MediaStreamAudioDestinationNode der Web Audio API stammen.

Nach der Erstellung befindet sich der Rekorder im Zustand "inactive". Mit start() beginnt die Aufnahme; die kodierten Daten werden über das Ereignis dataavailable als Blob-Stücke geliefert. Diese sammelt man typischerweise in einem Array und fügt sie nach stop() zu einer Datei zusammen, die sich hochladen, herunterladen oder per URL.createObjectURL() abspielen lässt.

Über das Objekt options legt man das Containerformat samt Codecs (mimeType) und die Bitraten fest. Da die Browser unterschiedliche Formate unterstützen (Chrome/Firefox meist WebM, Safari MP4), sollte man den gewünschten Typ vorher mit MediaRecorder.isTypeSupported() prüfen, sonst wirft der Konstruktor eine Ausnahme.

Parameter

Name	Typ	Default	Beschreibung
$stream Pflicht	MediaStream		Der aufzuzeichnende Medienstrom, z. B. aus `getUserMedia()`, `getDisplayMedia()` oder `canvas.captureStream()`.
$options	object	{}	Optionales Konfigurationsobjekt mit folgenden Eigenschaften: `mimeType` (`string`): Container und Codecs, z. B. `"video/webm;codecs=vp9,opus"`. `audioBitsPerSecond` (`number`): Audio-Bitrate. `videoBitsPerSecond` (`number`): Video-Bitrate. `bitsPerSecond` (`number`): Gesamtbitrate, ersetzt die beiden Einzelwerte, sofern nicht angegeben. `audioBitrateMode` (`"variable"\|"constant"`): Bitratenmodus für Audio (nicht überall unterstützt). `videoKeyFrameIntervalDuration` / `videoKeyFrameIntervalCount`: Abstand der Keyframes (neuere Browser).

Rückgabewert

Typ

MediaRecorder

Beschreibung

Ein neues MediaRecorder-Objekt im Zustand "inactive", das mit start() gestartet werden kann.

Beispiele

Mikrofonaufnahme erstellen und abspielen

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

  recorder.addEventListener('dataavailable', (e) => {
    if (e.data.size > 0) chunks.push(e.data);
  });

  recorder.addEventListener('stop', () => {
    const blob = new Blob(chunks, { type: recorder.mimeType });
    const audio = new Audio(URL.createObjectURL(blob));
    audio.controls = true;
    document.body.append(audio);
    // Mikrofon freigeben
    stream.getTracks().forEach((t) => t.stop());
    console.log('Aufnahme fertig:', blob.type, blob.size, 'Bytes');
  });

  recorder.start();
  console.log('Status:', recorder.state);
  setTimeout(() => recorder.stop(), dauerMs);
};

document.querySelector('#aufnahme').addEventListener('click', () => aufnehmen());

Status: recording Aufnahme fertig: audio/webm;codecs=opus 48213 Bytes

Unterstütztes Format wählen und Bitrate setzen

const kandidaten = [
  'video/webm;codecs=vp9,opus',
  'video/webm;codecs=vp8,opus',
  'video/mp4;codecs=avc1,mp4a',
  'video/mp4'
];

const mimeType = kandidaten.find((t) => MediaRecorder.isTypeSupported(t)) ?? '';

const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
const recorder = new MediaRecorder(stream, {
  mimeType,
  videoBitsPerSecond: 2_500_000,
  audioBitsPerSecond: 128_000
});

console.log('Verwendetes Format:', recorder.mimeType || '(Browser-Standard)');

Verwendetes Format: video/webm;codecs=vp9,opus

Bildschirmaufnahme als Datei herunterladen

const bildschirmAufnehmen = async () => {
  const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
  const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
  const chunks = [];

  recorder.ondataavailable = (e) => chunks.push(e.data);
  recorder.onstop = () => {
    const blob = new Blob(chunks, { type: 'video/webm' });
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = `bildschirm-${Date.now()}.webm`;
    a.click();
    URL.revokeObjectURL(a.href);
  };

  // Aufnahme endet automatisch, wenn der Nutzer die Freigabe beendet
  stream.getVideoTracks()[0].addEventListener('ended', () => recorder.stop());

  // alle 1000 ms ein Datenstück liefern
  recorder.start(1000);
};

document.querySelector('#screen').addEventListener('click', bildschirmAufnehmen);

// Wichtig · Fallstricke

Ausnahme bei nicht unterstütztem Format: Ist options.mimeType gesetzt, aber nicht unterstützt, wirft der Konstruktor einen NotSupportedError (DOMException). Vorher immer MediaRecorder.isTypeSupported() prüfen oder mimeType weglassen.
Browser-Unterschiede: Chrome, Edge und Firefox nehmen standardmäßig WebM (VP8/VP9/Opus) auf, Safari (ab 14.1) MP4 (H.264/AAC). Neuere Chrome-Versionen unterstützen auch MP4. Den tatsächlich verwendeten Typ liefert recorder.mimeType.
Bitraten sind Richtwerte: Der Browser darf die angegebenen Werte anpassen oder ignorieren.
Berechtigungen und sicherer Kontext: getUserMedia()/getDisplayMedia() funktionieren nur über HTTPS (oder localhost) und benötigen die Zustimmung des Nutzers; getDisplayMedia() zusätzlich eine Nutzeraktion.
Ressourcen freigeben: recorder.stop() beendet nicht die Kamera/das Mikrofon – dafür track.stop() auf allen Tracks aufrufen. Erzeugte Object-URLs mit URL.revokeObjectURL() freigeben.
Fehlende Metadaten: WebM-Dateien aus Chrome enthalten oft keine Dauer-Angabe, wodurch Spulen in Playern eingeschränkt ist; ggf. nachträglich reparieren (z. B. serverseitig mit ffmpeg).
Werden dem Stream während der Aufnahme Tracks hinzugefügt oder entfernt, kann die Aufnahme mit einem Fehler abbrechen.

Siehe auch

Blob new AudioDecoder() new AudioEncoder() new MediaSource() new NDEFRecord()