MediaRecorder.mimeType — Eigenschaft · JavaScript-Referenz

Signatur

MediaRecorder.mimeType

Beschreibung

Die Eigenschaft mimeType eines MediaRecorder-Objekts gibt als Zeichenkette an, in welchem Container-Format (und gegebenenfalls mit welchen Codecs) die Aufnahme kodiert wird, z. B. "video/webm;codecs=vp9,opus" oder "audio/mp4". Wurde im Konstruktor über options.mimeType ein Typ angegeben, spiegelt die Eigenschaft diesen wider.

Wurde kein Typ angegeben, wählt der Browser selbst ein Format. In diesem Fall kann mimeType vor dem Start eine leere Zeichenkette sein. Erst nach start() (spätestens beim start-Ereignis) wird der tatsächlich verwendete Typ eingetragen, eventuell ergänzt um Codec-Parameter.

Im Alltag nutzt man mimeType vor allem, um aus den aufgezeichneten Datenblöcken ein Blob mit dem richtigen type zu bauen, eine passende Dateiendung für den Download zu wählen oder den Typ beim Hochladen an den Server mitzuschicken.

Rückgabewert

Typ

string

Beschreibung

Der MIME-Typ der Aufnahme, eventuell mit codecs-Parameter. Kann eine leere Zeichenkette sein, solange der Browser noch kein Format festgelegt hat.

Beispiele

Unterstützten Typ wählen und auslesen

const kandidaten = [
  'video/webm;codecs=vp9,opus',
  'video/webm;codecs=vp8,opus',
  'video/mp4'
];
const typ = kandidaten.find((t) => MediaRecorder.isTypeSupported(t)) ?? '';

const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
const recorder = new MediaRecorder(stream, typ ? { mimeType: typ } : {});
console.log('Aufnahmeformat:', recorder.mimeType);

Aufnahmeformat: video/webm;codecs=vp9,opus

Blob mit korrektem Typ erstellen und herunterladen

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

recorder.addEventListener('dataavailable', (e) => teile.push(e.data));
recorder.addEventListener('stop', () => {
  // mimeType ist jetzt sicher befüllt
  const typ = recorder.mimeType;
  const blob = new Blob(teile, { type: typ });
  const endung = typ.includes('mp4') ? 'm4a' : typ.includes('ogg') ? 'ogg' : 'webm';
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = `aufnahme.${endung}`;
  a.click();
  URL.revokeObjectURL(a.href);
});

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

Vom Browser gewählten Typ nach dem Start prüfen

const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const recorder = new MediaRecorder(stream);
console.log('Vor start():', JSON.stringify(recorder.mimeType));

recorder.onstart = () => {
  console.log('Nach start():', recorder.mimeType);
};
recorder.start();

Vor start(): "" Nach start(): audio/webm;codecs=opus

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung an recorder.mimeType bleibt wirkungslos. Den Typ legt man ausschließlich über new MediaRecorder(stream, { mimeType }) fest.
Leerer Wert: Ohne Angabe im Konstruktor kann der Wert vor start() leer sein. Lies ihn für Blobs erst im start-, dataavailable- oder stop-Ereignis aus.
Nicht unterstützte Typen: Gibt man einen Typ an, den der Browser nicht kodieren kann, wirft der Konstruktor einen NotSupportedError (DOMException). Prüfe deshalb vorher mit MediaRecorder.isTypeSupported().
Browserunterschiede: Chrome und Firefox bevorzugen WebM (Firefox teils auch Ogg), Safari nimmt MP4 auf. Wer eine feste Endung wie .webm fest einprogrammiert, erzeugt in Safari unpassende Dateien. Leite die Endung deshalb immer aus mimeType ab.
Die Zeichenkette kann Codec-Parameter enthalten. Für einen einfachen Vergleich trennt man sie mit mimeType.split(';')[0] ab.

Siehe auch

MediaRecorder MediaRecorder.isTypeSupported() MediaRecorder.start() MediaRecorder.stream MediaRecorder.state