MediaStream Recording API
Die MediaStream Recording API, manchmal auch als Media Recording API oder MediaRecorder API bezeichnet, ist eng mit der Media Capture and Streams API und der WebRTC API verbunden. Die MediaStream Recording API ermöglicht es, die von einem MediaStream
oder einem HTMLMediaElement
Objekt erzeugten Daten zur Analyse, Verarbeitung oder Speicherung auf einer Festplatte zu erfassen. Die Arbeit mit dieser API ist auch überraschend einfach.
Konzepte und Verwendung
Die MediaStream Recording API besteht aus einem einzigen wesentlichen Interface, MediaRecorder
, das die gesamte Arbeit übernimmt, die Daten von einem MediaStream
zu übernehmen und Ihnen zur Verarbeitung zur Verfügung zu stellen. Die Daten werden durch eine Reihe von dataavailable
Ereignissen geliefert, bereits im Format, das Sie bei der Erstellung des MediaRecorder
angegeben haben. Sie können die Daten dann weiterverarbeiten oder nach Belieben auf eine Datei schreiben.
Überblick über den Aufnahmeprozess
Der Prozess der Aufnahme eines Streams ist einfach:
- Richten Sie einen
MediaStream
oder einHTMLMediaElement
(in Form eines<audio>
oder<video>
Elements) ein, um als Quelle der Mediendaten zu dienen. - Erstellen Sie ein
MediaRecorder
Objekt und spezifizieren Sie den Quellstream und alle gewünschten Optionen (wie den MIME-Typ des Containers oder die gewünschten Bitraten seiner Tracks). - Legen Sie
ondataavailable
als Event-Handler für dasdataavailable
Ereignis fest; dies wird aufgerufen, wann immer 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 beginnen. - Ihr
dataavailable
Ereignishandler wird jedes Mal aufgerufen, wenn Daten für Sie bereit sind; das Ereignis hat eindata
Attribut, dessen Wert einBlob
ist, das die Mediendaten enthält. Sie können eindataavailable
Ereignis auslösen, um den neuesten Sound zu liefern, damit Sie ihn filtern, speichern oder anderweitig verwenden können. - Die Aufnahme stoppt automatisch, wenn das Quellmedium aufhört zu spielen.
- Sie können die Aufnahme jederzeit durch Aufruf von
MediaRecorder.stop()
beenden.
Hinweis: Einzelne Blob
s, die Abschnitte der aufgenommenen Medien enthalten, sind möglicherweise nicht einzeln abspielbar. Die Medien müssen vor der Wiedergabe neu zusammengesetzt werden.
Wenn während der Aufnahme etwas schiefgeht, wird ein error
Ereignis an den MediaRecorder
gesendet. Sie können auf error
Ereignisse lauschen, indem Sie einen onerror
Event-Handler einrichten.
Beispiel: Hier verwenden wir ein HTML Canvas als Quelle des MediaStream
und stoppen 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();
window.URL.revokeObjectURL(url);
}
// demo: to download after 9sec
setTimeout((event) => {
console.log("stopping");
mediaRecorder.stop();
}, 9000);
Untersuchung und Kontrolle des Recorder-Status
Sie können auch die Eigenschaften des MediaRecorder
Objekts verwenden, um den Zustand des Aufnahmeprozesses zu bestimmen, sowie seine Methoden pause()
und resume()
, um die Aufnahme des Quellmediums zu pausieren und wieder aufzunehmen.
Wenn Sie überprüfen müssen oder möchten, ob ein bestimmter MIME-Typ unterstützt wird, ist das ebenfalls möglich. Rufen Sie einfach MediaRecorder.isTypeSupported()
auf.
Untersuchung potenzieller Eingabequellen
Wenn Ihr Ziel darin besteht, Kamera- und/oder Mikrofoneingaben aufzuzeichnen, möchten Sie möglicherweise die verfügbaren Eingabegeräte prüfen, bevor Sie mit der Konstruktion des MediaRecorder
beginnen. Dazu müssen Sie navigator.mediaDevices.enumerateDevices()
aufrufen, um eine Liste der verfügbaren Mediengeräte zu erhalten. Sie können diese Liste dann prüfen und die potenziellen Eingabequellen identifizieren und sogar die Liste basierend auf gewünschten Kriterien filtern.
In diesem Code-Schnipsel wird enumerateDevices()
verwendet, um die verfügbaren Eingabegeräte zu prüfen, diejenigen zu finden, die Audioeingabegeräte sind, und <option>
Elemente zu erstellen, die dann zu einem <select>
Element hinzugefügt werden, das eine Eingabequellenauswahl 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);
}
});
});
Ein ähnlicher Code kann verwendet werden, um dem Benutzer zu ermöglichen, die Menge der Geräte, die sie verwenden möchten, einzuschränken.
Für weitere Informationen
Um mehr über die Verwendung der MediaStream Recording API zu erfahren, siehe Verwendung der MediaStream Recording API, die zeigt, wie die API verwendet wird, um Audio-Clips aufzunehmen. Ein zweiter Artikel, Aufnahme eines Medienelements, beschreibt, wie man einen Stream von einem <audio>
oder <video>
Element empfängt und den erfassten Stream benutzt (in diesem Fall wird er aufgenommen und auf einer lokalen Festplatte gespeichert).
Schnittstellen
BlobEvent
-
Jedes Mal, wenn ein Abschnitt der Mediendaten fertig aufgenommen ist, wird er den Konsumenten in
Blob
Form mit einemBlobEvent
vom Typdataavailable
übergeben. MediaRecorder
-
Das primäre Interface, das die MediaStream Recording API implementiert.
MediaRecorderErrorEvent
Veraltet Nicht standardisiert-
Das Interface, das Fehler darstellt, die von der MediaStream Recording API ausgelöst werden. Seine
error
Eigenschaft ist einDOMException
, das den aufgetretenen Fehler spezifiziert.
Spezifikationen
Specification |
---|
MediaStream Recording |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Media Capture and Streams API Startseite
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 (Quellcode auf GitHub)
- Einfaches Videoaufnahme-Demo
- Erweitertes Media-Stream-Recorder-Beispiel
- OpenLang: HTML Video Sprachlabor Webanwendung unter Verwendung von MediaDevices und der MediaStream Recording API für Videoaufnahmen (Quellcode auf GitHub)
- MediaStream Recorder API Jetzt Verfügbar im Safari Technology Preview 73