MediaRecorder.isTypeSupported() — Methode · JavaScript-Referenz

Signatur

MediaRecorder.isTypeSupported(mimeType)

Beschreibung

MediaRecorder.isTypeSupported() ist eine statische Methode. Man ruft sie direkt über die Klasse MediaRecorder auf, nicht über eine Instanz. Sie gibt true zurück, wenn der Browser Aufnahmen im angegebenen MIME-Typ voraussichtlich erstellen kann. Dazu gehören der Container (z. B. video/webm, video/mp4, audio/ogg) und optional die Codecs im Parameter codecs, etwa video/webm;codecs=vp9,opus.

Hauptsächlich wählt man mit der Methode vor dem Erzeugen eines MediaRecorder ein passendes Format aus. Die Browser unterstützen sehr unterschiedliche Formate: Chrome und Firefox bevorzugen WebM mit VP8/VP9/Opus, Safari dagegen MP4 mit H.264/AAC. Deshalb prüft man meist eine Liste von Wunschformaten der Reihe nach und nimmt das erste, das unterstützt wird. Dieses übergibt man dann als Option mimeType an den Konstruktor.

Das Ergebnis ist nur eine Einschätzung: true heißt, dass der Browser das Format grundsätzlich aufnehmen können sollte. Eine Garantie ist das nicht. Die Aufnahme kann trotzdem scheitern, z. B. wenn die Eigenschaften des Datenstroms nicht zum Codec passen oder die Hardware-Kodierung nicht verfügbar ist. false dagegen ist verlässlich: Übergibt man einen solchen Typ an den Konstruktor, wirft dieser einen NotSupportedError.

Parameter

Name	Typ	Default	Beschreibung
$mimeType Pflicht	string		Zu prüfender MIME-Typ, optional mit Codecs, z. B. `"audio/webm"`, `"video/webm;codecs=vp9,opus"` oder `"video/mp4;codecs=avc1.42E01E,mp4a.40.2"`.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn der Browser Aufnahmen in diesem Format voraussichtlich erstellen kann, sonst false. Bei einem leeren String liefern Browser in der Regel true, weil dann der Browser selbst ein Format wählt.

Beispiele

Einzelne Formate prüfen

const typen = [
  'video/webm',
  'video/webm;codecs=vp9,opus',
  'video/mp4',
  'audio/ogg;codecs=opus',
  'video/x-matroska;codecs=avc1'
];

for (const typ of typen) {
  console.log(`${typ}: ${MediaRecorder.isTypeSupported(typ)}`);
}

// Beispiel Chrome: video/webm: true video/webm;codecs=vp9,opus: true video/mp4: true audio/ogg;codecs=opus: false video/x-matroska;codecs=avc1: true

Bestes verfügbares Format auswählen und aufnehmen

const wunschFormate = [
  'video/webm;codecs=vp9,opus',
  'video/webm;codecs=vp8,opus',
  'video/webm',
  'video/mp4;codecs=avc1.42E01E,mp4a.40.2',
  'video/mp4'
];

const waehleFormat = () =>
  wunschFormate.find((typ) => MediaRecorder.isTypeSupported(typ)) ?? '';

const starteAufnahme = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
  const mimeType = waehleFormat();
  const recorder = new MediaRecorder(stream, mimeType ? { mimeType } : {});
  const teile = [];

  recorder.addEventListener('dataavailable', (e) => teile.push(e.data));
  recorder.addEventListener('stop', () => {
    const blob = new Blob(teile, { type: recorder.mimeType });
    console.log('Aufnahme fertig:', recorder.mimeType, blob.size, 'Bytes');
    stream.getTracks().forEach((t) => t.stop());
  });

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

starteAufnahme();

Aufnahme fertig: video/webm;codecs=vp9,opus 482113 Bytes

Passende Dateiendung für den Download bestimmen

const audioFormate = [
  { typ: 'audio/webm;codecs=opus', endung: 'webm' },
  { typ: 'audio/ogg;codecs=opus', endung: 'ogg' },
  { typ: 'audio/mp4', endung: 'm4a' }
];

const format = audioFormate.find(({ typ }) => MediaRecorder.isTypeSupported(typ));

if (format) {
  console.log(`Aufnahme als .${format.endung} (${format.typ})`);
} else {
  console.warn('Kein bekanntes Audioformat wird unterstützt.');
}

Aufnahme als .webm (audio/webm;codecs=opus)

// Wichtig · Fallstricke

Statisch: Aufrufen als MediaRecorder.isTypeSupported(). recorder.isTypeSupported() auf einer Instanz ist undefined und führt zu einem TypeError.
true ist keine Garantie: Die Aufnahme kann trotzdem scheitern. Deshalb auf das error-Event reagieren und nach dem Start den tatsächlich verwendeten Typ über recorder.mimeType auslesen.
Browser-Unterschiede: Safari unterstützt vor allem video/mp4 bzw. audio/mp4. Chrome und Firefox unterstützen WebM, neuere Versionen teilweise auch MP4. Formate nie fest vorgeben, sondern immer eine Liste als Rückfall prüfen.
Schreibweise der Codecs: Nur gültige Codec-Bezeichnungen verwenden. Ein Tippfehler oder ein unbekannter Codec-String führt zu false, auch wenn der Container unterstützt wird.
Verfügbarkeit: MediaRecorder gibt es nur in sicheren Kontexten mit Mediengeräten; ältere Safari-Versionen (vor 14.1) kennen es nicht. Vorher mit typeof MediaRecorder !== 'undefined' prüfen.
Nicht verwechseln mit HTMLMediaElement.canPlayType() (Wiedergabe) oder MediaSource.isTypeSupported() (Wiedergabe über Media Source Extensions). Diese beziehen sich nicht auf Aufnahmen.

Siehe auch

MediaRecorder MediaRecorder.mimeType MediaRecorder.prototype.start() MediaSource.isTypeSupported() HTMLMediaElement.canPlayType() MediaDevices.getUserMedia()