MediaRecorder

Die MediaRecorder-Schnittstelle der MediaStream Recording API bietet Funktionen zum einfachen Aufzeichnen von Medien. Sie wird mit dem MediaRecorder()-Konstruktor erstellt.

EventTarget MediaRecorder

Konstruktor

MediaRecorder()

Erstellt ein neues MediaRecorder-Objekt, basierend auf einem MediaStream, das aufgezeichnet werden soll. Es stehen Optionen zur Verfügung, um Dinge einzustellen wie den MIME-Typ des Containers (z. B. "video/webm" oder "video/mp4") und die Bitraten der Audio- und Videospuren oder eine einzige Gesamtbitrate.

Instanz-Eigenschaften

MediaRecorder.mimeType Schreibgeschützt

Gibt den MIME-Typ zurück, der als Aufzeichnungscontainer für das MediaRecorder-Objekt ausgewählt wurde, als es erstellt wurde.

MediaRecorder.state Schreibgeschützt

Gibt den aktuellen Zustand des MediaRecorder-Objekts zurück (inactive, recording oder paused).

MediaRecorder.stream Schreibgeschützt

Gibt den Stream zurück, der beim Erstellen des MediaRecorder in den Konstruktor übergeben wurde.

MediaRecorder.videoBitsPerSecond Schreibgeschützt

Gibt die verwendete Video-Codierungsrate zurück. Diese kann sich von der im Konstruktor angegebenen Bitrate unterscheiden (falls diese angegeben wurde).

MediaRecorder.audioBitsPerSecond Schreibgeschützt

Gibt die verwendete Audio-Codierungsrate zurück. Diese kann sich von der im Konstruktor angegebenen Bitrate unterscheiden (falls diese angegeben wurde).

MediaRecorder.audioBitrateMode Schreibgeschützt Experimentell

Gibt den Bitratenmodus zurück, der zum Codieren von Audiospuren verwendet wird.

Statische Methoden

MediaRecorder.isTypeSupported()

Eine statische Methode, die einen true- oder false-Wert zurückgibt, der anzeigt, ob der gegebene MIME-Medientyp vom aktuellen Benutzeragenten unterstützt wird.

Instanz-Methoden

MediaRecorder.pause()

Pausiert die Aufzeichnung von Medien.

MediaRecorder.requestData()

Fordert ein Blob an, das die bisher empfangenen gespeicherten Daten enthält (oder seit dem letzten Aufruf von requestData()). Nach dem Aufruf dieser Methode wird die Aufzeichnung fortgesetzt, jedoch in einem neuen Blob.

MediaRecorder.resume()

Setzt die Aufnahme von Medien nach einer Pause fort.

MediaRecorder.start()

Beginnt mit der Aufnahme von Medien; dieser Methode kann optional ein timeslice-Argument mit einem Wert in Millisekunden übergeben werden. Wenn dies angegeben ist, wird das Medium in separaten Abschnitten dieser Dauer aufgenommen, anstatt im Standardverhalten das Medium in einem großen Abschnitt aufzunehmen.

MediaRecorder.stop()

Beendet die Aufzeichnung, woraufhin ein dataavailable-Ereignis ausgelöst wird, das den finalen Blob der gespeicherten Daten enthält. Es erfolgt keine weitere Aufzeichnung.

Ereignisse

Hören Sie diese Ereignisse mit addEventListener() ab oder weisen Sie einen Ereignislistener der oneventname-Eigenschaft dieser Schnittstelle zu.

dataavailable

Wird periodisch jedes Mal ausgelöst, wenn timeslice Millisekunden Medien aufgezeichnet wurden (oder wenn das gesamte Medium aufgezeichnet wurde, falls timeslice nicht angegeben wurde). Das Ereignis, vom Typ BlobEvent, enthält die aufgezeichneten Medien in seiner data-Eigenschaft.

error

Wird ausgelöst, wenn es zu schwerwiegenden Fehlern kommt, die die Aufzeichnung stoppen. Das empfangene Ereignis basiert auf der MediaRecorderErrorEvent-Schnittstelle, deren error-Eigenschaft eine DOMException enthält, die den tatsächlich aufgetretenen Fehler beschreibt.

pause

Wird ausgelöst, wenn die Medienaufnahme pausiert wird.

resume

Wird ausgelöst, wenn die Medienaufnahme nach einer Pause fortgesetzt wird.

start

Wird ausgelöst, wenn die Medienaufnahme startet.

stop

Wird ausgelöst, wenn die Medienaufnahme endet, entweder wenn der MediaStream endet oder nachdem die Methode MediaRecorder.stop() aufgerufen wurde.

Beispiel

js
if (navigator.mediaDevices) {
  console.log("getUserMedia supported.");

  const constraints = { audio: true };
  let chunks = [];

  navigator.mediaDevices
    .getUserMedia(constraints)
    .then((stream) => {
      const mediaRecorder = new MediaRecorder(stream);

      record.onclick = () => {
        mediaRecorder.start();
        console.log(mediaRecorder.state);
        console.log("recorder started");
        record.style.background = "red";
        record.style.color = "black";
      };

      stop.onclick = () => {
        mediaRecorder.stop();
        console.log(mediaRecorder.state);
        console.log("recorder stopped");
        record.style.background = "";
        record.style.color = "";
      };

      mediaRecorder.onstop = (e) => {
        console.log("data available after MediaRecorder.stop() called.");

        const clipName = prompt("Enter a name for your sound clip");

        const clipContainer = document.createElement("article");
        const clipLabel = document.createElement("p");
        const audio = document.createElement("audio");
        const deleteButton = document.createElement("button");
        const mainContainer = document.querySelector("body");

        clipContainer.classList.add("clip");
        audio.setAttribute("controls", "");
        deleteButton.textContent = "Delete";
        clipLabel.textContent = clipName;

        clipContainer.appendChild(audio);
        clipContainer.appendChild(clipLabel);
        clipContainer.appendChild(deleteButton);
        mainContainer.appendChild(clipContainer);

        audio.controls = true;
        const blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
        chunks = [];
        const audioURL = URL.createObjectURL(blob);
        audio.src = audioURL;
        console.log("recorder stopped");

        deleteButton.onclick = (e) => {
          const evtTgt = e.target;
          evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
        };
      };

      mediaRecorder.ondataavailable = (e) => {
        chunks.push(e.data);
      };
    })
    .catch((err) => {
      console.error(`The following error occurred: ${err}`);
    });
}

Hinweis: Dieses Code-Beispiel ist vom Web Diktiergerät-Demo inspiriert. Einige Zeilen wurden der Kürze halber weggelassen; sehen Sie sich die Quelle an, um den vollständigen Code zu erhalten.

Spezifikationen

Specification
MediaStream Recording
# mediarecorder-api

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
MediaRecorder
MediaRecorder() constructor
options parameter
audioBitrateMode
Experimental
audioBitsPerSecond
dataavailable event
error event
isTypeSupported() static method
mimeType
pause
pause event
requestData
resume
resume event
start
start event
state
stop
stop event
stream
videoBitsPerSecond

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Has more compatibility info.

Siehe auch