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

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

BCD tables only load in the browser

Siehe auch