MediaStream Recording API - Web-APIs | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

MediaStream Recording API

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2021 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Die MediaStream Recording API, manchmal auch als Media Recording API oder MediaRecorder API bezeichnet, ist eng verbunden mit der Media Capture and Streams API und der WebRTC API. Die MediaStream Recording API ermöglicht es, die von einem MediaStream oder einem HTMLMediaElement erzeugten Daten für Analyse, Verarbeitung oder Speicherung auf der Festplatte zu erfassen. Sie ist auch überraschend einfach zu verwenden.

In diesem Artikel

Konzepte und Nutzung

Die MediaStream Recording API besteht aus einer einzigen Hauptschnittstelle, MediaRecorder, die die Aufgabe hat, die Daten von einem MediaStream zu nehmen und sie Ihnen zur Verarbeitung bereitzustellen. Die Daten werden durch eine Reihe von dataavailable Ereignissen geliefert, bereits in dem von Ihnen bei der Erstellung des MediaRecorder angegebenen Format. Sie können die Daten dann weiterverarbeiten oder wie gewünscht auf eine Datei schreiben.

Überblick über den Aufnahmeprozess

Der Prozess des Aufnehmens eines Streams ist einfach:

Richten Sie einen MediaStream oder ein HTMLMediaElement (in Form eines <audio> oder <video> Elements) ein, um als Quelle der Mediendaten zu dienen.
Erstellen Sie ein MediaRecorder Objekt und geben Sie den Quellstream sowie alle gewünschten Optionen an (z. B. den MIME-Typ des Containers oder die gewünschten Bitraten seiner Spuren).
Setzen Sie ondataavailable auf einen Ereignishandler für das dataavailable Ereignis; dies wird aufgerufen, wenn Daten für Sie verfügbar sind.
Sobald das Quellmedium abgespielt wird und Sie bereit sind, Video aufzunehmen, rufen Sie MediaRecorder.start() auf, um die Aufnahme zu starten.
Ihr dataavailable Ereignishandler wird jedes Mal aufgerufen, wenn Daten bereit sind, die Sie nach Belieben verwenden können; das Ereignis hat ein data Attribut, dessen Wert ein Blob ist, das die Mediendaten enthält. Sie können ein dataavailable Ereignis erzwingen, um sich den neuesten Klang liefern zu lassen, damit Sie ihn filtern, speichern oder was auch immer tun können.
Die Aufnahme stoppt automatisch, wenn das Quellmedium nicht mehr abgespielt wird.
Sie können die Aufnahme jederzeit durch einen Aufruf von MediaRecorder.stop() beenden.

Hinweis: Einzelne Blobs, die Scheiben der aufgenommenen Medien enthalten, sind nicht unbedingt einzeln abspielbar. Die Medien müssen vor der Wiedergabe neu zusammengestellt werden.

Wenn während der Aufnahme etwas schiefgeht, wird ein error Ereignis an den MediaRecorder gesendet. Sie können auf error Ereignisse hören, indem Sie einen onerror Ereignishandler einrichten.

Im folgenden Beispiel verwenden wir ein HTML Canvas als Quelle des MediaStream und beenden die Aufnahme nach 9 Sekunden.

js
const canvas = document.querySelector("canvas");

// Optional frames per second argument.
const stream = canvas.captureStream(25);
const recordedChunks = [];

console.log(stream);
const options = { mimeType: "video/webm; codecs=vp9" };
const mediaRecorder = new MediaRecorder(stream, options);

mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();

function handleDataAvailable(event) {
  console.log("data-available");
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
    console.log(recordedChunks);
    download();
  } else {
    // …
  }
}
function download() {
  const blob = new Blob(recordedChunks, {
    type: "video/webm",
  });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";
  a.href = url;
  a.download = "test.webm";
  a.click();
  URL.revokeObjectURL(url);
}

// demo: to download after 9sec
setTimeout((event) => {
  console.log("stopping");
  mediaRecorder.stop();
}, 9000);

Überprüfen und Steuern des Recorder-Status

Sie können auch die Eigenschaften des MediaRecorder Objekts verwenden, um den Status des Aufnahmeprozesses zu bestimmen, und seine Methoden pause() und resume(), um die Aufnahme des Quellmediums zu pausieren und fortzusetzen.

Wenn Sie prüfen möchten, ob ein bestimmter MIME-Typ unterstützt wird, ist dies ebenfalls möglich. Rufen Sie einfach MediaRecorder.isTypeSupported() auf.

Überprüfen potenzieller Eingabequellen

Wenn Sie planen, Kamera- und/oder Mikrofoneingaben aufzuzeichnen, möchten Sie möglicherweise die verfügbaren Eingabegeräte überprüfen, bevor Sie mit dem Aufbau des MediaRecorder beginnen. Dazu müssen Sie navigator.mediaDevices.enumerateDevices() aufrufen, um eine Liste der verfügbaren Mediengeräte zu erhalten. Sie können dann diese Liste überprüfen und die potenziellen Eingabequellen identifizieren und sogar die Liste nach gewünschten Kriterien filtern.

In diesem Code-Snippet wird enumerateDevices() verwendet, um die verfügbaren Eingabegeräte zu überprüfen, solche zu lokalisieren, die Audioeingabegeräte sind, und <option> Elemente zu erstellen, die dann einem <select> Element hinzugefügt werden, das einen Eingabequellen-Wähler darstellt.

js
navigator.mediaDevices.enumerateDevices().then((devices) => {
  devices.forEach((device) => {
    const menu = document.getElementById("input-devices");
    if (device.kind === "audioinput") {
      const item = document.createElement("option");
      item.textContent = device.label;
      item.value = device.deviceId;
      menu.appendChild(item);
    }
  });
});

Ähnlicher Code kann verwendet werden, um dem Benutzer zu ermöglichen, die Menge der Geräte einzuschränken, die er verwenden möchte.

Weitere Informationen

Um mehr über die Verwendung der MediaStream Recording API zu lernen, lesen Sie Using the MediaStream Recording API, das zeigt, wie Sie die API verwenden, um Audio-Clips aufzuzeichnen. Ein zweiter Artikel, Recording a media element, beschreibt, wie man einen Stream von einem <audio> oder <video> Element empfängt und den erfassten Stream verwendet (in diesem Fall aufnehmen und auf einer lokalen Festplatte speichern).

Schnittstellen

BlobEvent

Jedes Mal, wenn ein Chunk von Mediendaten fertig aufgenommen wurde, wird es den Nutzern in Blob Form über ein BlobEvent vom Typ dataavailable geliefert.

MediaRecorder

Die primäre Schnittstelle, die die MediaStream Recording API implementiert.

MediaRecorderErrorEvent

Die Schnittstelle, die Fehler darstellt, die von der MediaStream Recording API geworfen werden. Ihre error Eigenschaft ist eine DOMException, die den aufgetretenen Fehler spezifiziert.

Beispiele

Grundlegende Videoaufnahme

html
<button id="record-btn">Start</button>
<video id="player" src="" autoplay controls></video>

js
const recordBtn = document.getElementById("record-btn");
const video = document.getElementById("player");

let chunks = [];
let isRecording = false;
let mediaRecorder = null;

const constraints = { video: true };

recordBtn.addEventListener("click", async () => {
  if (!isRecording) {
    // Acquire a recorder on load
    if (!mediaRecorder) {
      const stream = await navigator.mediaDevices.getUserMedia(constraints);
      mediaRecorder = new MediaRecorder(stream);
      mediaRecorder.addEventListener("dataavailable", (e) => {
        console.log("data available");
        chunks.push(e.data);
      });
      mediaRecorder.addEventListener("stop", (e) => {
        console.log("onstop fired");
        const blob = new Blob(chunks, { type: "video/ogv; codecs=opus" });
        video.src = window.URL.createObjectURL(blob);
      });
      mediaRecorder.addEventListener("error", (e) => {
        console.error("An error occurred:", e);
      });
    }
    isRecording = true;
    recordBtn.textContent = "Stop";
    chunks = [];
    mediaRecorder.start();
    console.log("recorder started");
  } else {
    isRecording = false;
    recordBtn.textContent = "Start";
    mediaRecorder.stop();
    console.log("recorder stopped");
  }
});

Startseite der Media Capture and Streams API
MediaDevices.getUserMedia()
simpl.info MediaStream Recording demo, von Sam Dutton
HTML5's Media Recorder API in Action on Chrome and Firefox
MediaRecorder Polyfill für Safari und Edge
TutorRoom: HTML-Videoaufnahme/-wiedergabe/-download mit getUserMedia und der MediaStream Recording API (Quelle auf GitHub)
Fortgeschrittenes Media-Stream-Recorder-Beispiel
OpenLang: HTML-Video-Sprachlabor-Webanwendung unter Verwendung von MediaDevices und der MediaStream Recording API zur Videoaufzeichnung (Quelle auf GitHub)
MediaStream Recorder API jetzt verfügbar in Safari Technology Preview 73

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

MediaStream Recording API
Anleitungen
1. Verwendung der MediaStream Recording API
2. Aufnehmen eines Medienelements
Interfaces