DieMediaStream Recording API, manchmal auch alsMedia Recording API oderMediaRecorder API bezeichnet, ist eng verbunden mit derMedia Capture and Streams API und derWebRTC API. Die MediaStream Recording API ermöglicht es, die von einemMediaStream oder einemHTMLMediaElement erzeugten Daten für Analyse, Verarbeitung oder Speicherung auf der Festplatte zu erfassen. Sie ist auch überraschend einfach zu verwenden.

Konzepte und Nutzung

Die MediaStream Recording API besteht aus einer einzigen Hauptschnittstelle,MediaRecorder, die die Aufgabe hat, die Daten von einemMediaStream zu nehmen und sie Ihnen zur Verarbeitung bereitzustellen. Die Daten werden durch eine Reihe vondataavailable Ereignissen geliefert, bereits in dem von Ihnen bei der Erstellung desMediaRecorder 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:

1. Richten Sie einenMediaStream oder einHTMLMediaElement (in Form eines<audio> oder<video> Elements) ein, um als Quelle der Mediendaten zu dienen.
2. Erstellen Sie einMediaRecorder 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).
3. Setzen Sieondataavailable auf einen Ereignishandler für dasdataavailable Ereignis; dies wird aufgerufen, wenn Daten für Sie verfügbar sind.
4. Sobald das Quellmedium abgespielt wird und Sie bereit sind, Video aufzunehmen, rufen SieMediaRecorder.start() auf, um die Aufnahme zu starten.
5. Ihrdataavailable Ereignishandler wird jedes Mal aufgerufen, wenn Daten bereit sind, die Sie nach Belieben verwenden können; das Ereignis hat eindata Attribut, dessen Wert einBlob ist, das die Mediendaten enthält. Sie können eindataavailable Ereignis erzwingen, um sich den neuesten Klang liefern zu lassen, damit Sie ihn filtern, speichern oder was auch immer tun können.
6. Die Aufnahme stoppt automatisch, wenn das Quellmedium nicht mehr abgespielt wird.
7. Sie können die Aufnahme jederzeit durch einen Aufruf vonMediaRecorder.stop() beenden.

Wenn während der Aufnahme etwas schiefgeht, wird einerror Ereignis an denMediaRecorder gesendet. Sie können auferror Ereignisse hören, indem Sie einenonerror Ereignishandler einrichten.

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

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 9secsetTimeout((event) => {  console.log("stopping");  mediaRecorder.stop();}, 9000);

Überprüfen und Steuern des Recorder-Status

Sie können auch die Eigenschaften desMediaRecorder Objekts verwenden, um den Status des Aufnahmeprozesses zu bestimmen, und seine Methodenpause() undresume(), 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 einfachMediaRecorder.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 desMediaRecorder beginnen. Dazu müssen Sienavigator.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 wirdenumerateDevices() 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.

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 SieUsing 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 inBlob Form über einBlobEvent vom Typdataavailable geliefert.

MediaRecorder

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

MediaRecorderErrorEventVeraltetNicht standardisiert

Die Schnittstelle, die Fehler darstellt, die von der MediaStream Recording API geworfen werden. Ihreerror Eigenschaft ist eineDOMException, die den aufgetretenen Fehler spezifiziert.

Beispiele

Grundlegende Videoaufnahme

<button>Start</button><video src="" autoplay controls></video>

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Startseite derMedia Capture and Streams API
• MediaDevices.getUserMedia()
• simpl.info MediaStream Recording demo, vonSam 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