MediaRecorder

Konstruktor

MediaRecorder()

Erstellt ein neues MediaRecorder-Objekt für die Aufzeichnung eines übergebenen MediaStream. Über Optionen lassen sich unter anderem der MIME-Typ des Containers (etwa "video/webm" oder "video/mp4") sowie die Bitraten der Audio- und Videospuren oder eine gemeinsame Gesamtbitrate festlegen.

Instanzeigenschaften

MediaRecorder.mimeType Schreibgeschützt

Gibt den MIME-Typ zurück, der beim Erstellen des MediaRecorder-Objekts als Aufzeichnungscontainer ausgewählt 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 an den Konstruktor übergeben wurde.

MediaRecorder.videoBitsPerSecond Schreibgeschützt

Gibt die aktuell verwendete Bitrate für die Videocodierung zurück. Diese kann von der im Konstruktor angegebenen Bitrate abweichen, sofern eine angegeben wurde.

MediaRecorder.audioBitsPerSecond Schreibgeschützt

Gibt die aktuell verwendete Bitrate für die Audiocodierung zurück. Diese kann von der im Konstruktor angegebenen Bitrate abweichen, sofern eine angegeben wurde.

MediaRecorder.audioBitrateMode Schreibgeschützt

Gibt den für die Codierung von Audiospuren verwendeten Bitratenmodus zurück.

Statische Methoden

MediaRecorder.isTypeSupported()

Eine statische Methode, die true oder false zurückgibt und damit angibt, ob der aktuelle User Agent den angegebenen Medien-MIME-Typ unterstützt.

Instanzmethoden

MediaRecorder.pause()

Pausiert die Medienaufzeichnung.

MediaRecorder.requestData()

Fordert ein Blob mit den bis dahin gespeicherten Daten an (oder mit den Daten, die seit dem letzten Aufruf von requestData() gespeichert wurden). Nach dem Aufruf dieser Methode wird die Aufzeichnung in einem neuen Blob fortgesetzt.

MediaRecorder.resume()

Setzt eine pausierte Medienaufzeichnung fort.

MediaRecorder.start()

Beginnt die Medienaufzeichnung. Der Methode kann optional ein timeslice-Argument mit einem Wert in Millisekunden übergeben werden. Ist dieses angegeben, werden die Medien in separaten Abschnitten dieser Dauer aufgezeichnet, statt wie standardmäßig in einem einzigen großen Abschnitt.

MediaRecorder.stop()

Beendet die Aufzeichnung. Dabei wird ein dataavailable-Ereignis ausgelöst, das das abschließende Blob mit den gespeicherten Daten enthält. Danach erfolgt keine weitere Aufzeichnung.

Ereignisse

Sie können diese Ereignisse mit addEventListener() überwachen oder der Eigenschaft oneventname dieser Schnittstelle einen Event-Listener zuweisen.

dataavailable

Wird regelmäßig ausgelöst, sobald jeweils timeslice Millisekunden Medien aufgezeichnet wurden (oder wenn die gesamte Aufzeichnung abgeschlossen ist, falls timeslice nicht angegeben wurde). Das Ereignis vom Typ BlobEvent enthält die aufgezeichneten Medien in seiner Eigenschaft data.

error

Wird ausgelöst, wenn ein schwerwiegender Fehler die Aufzeichnung beendet. Das empfangene Ereignis basiert auf der Schnittstelle MediaRecorderErrorEvent. Deren Eigenschaft error enthält eine DOMException, die den aufgetretenen Fehler beschreibt.

pause

Wird ausgelöst, wenn die Medienaufzeichnung pausiert wird.

resume

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

start

Wird ausgelöst, wenn die Medienaufzeichnung beginnt.

stop

Wird ausgelöst, wenn die Medienaufzeichnung endet – entweder weil der MediaStream endet oder weil die Methode MediaRecorder.stop() aufgerufen wird.

Beispiel

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}`);
    });
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwendung der MediaStream Recording API
• Web Dictaphone: Demo zur Visualisierung mit MediaRecorder, getUserMedia und der Web Audio API, von Chris Mills (Quelltext auf GitHub)
• Aufzeichnen eines Medienelements
• simpl.info-Demo zur MediaStream-Aufzeichnung, von Sam Dutton.
• MediaDevices.getUserMedia()
• OpenLang: Webanwendung als HTML-Videosprachlabor, die MediaDevices und die MediaStream Recording API zur Videoaufzeichnung verwendet (Quelltext auf GitHub)