MediaRecorder: dataavailable-Event
Das dataavailable
-Event des MediaRecorder
-Interfaces wird ausgelöst, wenn der MediaRecorder Mediendaten für Ihre Anwendung bereitstellt. Die Daten werden in einem Blob
-Objekt bereitgestellt, das die Daten enthält. Dies geschieht in vier Situationen:
- Wenn der Medienstream endet, werden alle Mediendaten, die noch nicht an Ihren
ondataavailable
-Handler geliefert wurden, in einem einzigenBlob
übergeben. - Wenn
MediaRecorder.stop()
aufgerufen wird, werden alle Mediendaten, die seit Beginn der Aufnahme oder seit dem letztendataavailable
-Event erfasst wurden, in einemBlob
geliefert; danach endet die Aufnahme. - Wenn
MediaRecorder.requestData()
aufgerufen wird, werden alle Mediendaten, die seit Beginn der Aufnahme oder seit dem letztendataavailable
-Event erfasst wurden, geliefert; dann wird ein neuerBlob
erstellt und die Medienspeicherung wird in diesem Blob fortgesetzt. - Wenn eine
timeslice
-Eigenschaft in die MethodeMediaRecorder.start()
übergeben wurde, die die Medienaufnahme gestartet hat, wird eindataavailable
-Event alletimeslice
-Millisekunden ausgelöst. Das bedeutet, dass normalerweise jeder Blob eine bestimmte Zeitdauer hat (außer dem letzten Blob, der kürzer sein kann, da er nur das übrig gebliebene von dem letzten Event enthält). Wenn der Methodenaufruf beispielsweise so aussah —recorder.start(1000);
— dann würde dasdataavailable
-Event jede Sekunde der Medienaufnahme ausgelöst und unser Event-Handler würde jede Sekunde mit einem einsekündigen Blob von Mediendaten aufgerufen werden. Man kanntimeslice
zusammen mitMediaRecorder.stop()
undMediaRecorder.requestData()
verwenden, um mehrere gleich lange Blobs plus andere kürzere Blobs zu erzeugen.
Hinweis: Wie andere Zeitangaben in Web-APIs ist timeslice
nicht genau und die realen Intervalle können aufgrund von ausstehenden Aufgaben, Browser-Funktionen (wie das Pausieren der Kamera und des Mikrofons in Safari), browserspezifischen Verhaltensweisen (wie das Sperren des Bildschirms während der Aufnahme auf Chrome auf Android, das das dataavailable
-Event pausiert) oder anderen Browserfehlern verzögert werden. Solche Szenarien können auch zu deutlich größeren Chunk-Größen führen.
Verlassen Sie sich daher nicht auf timeslice
und die Anzahl der erhaltenen Chunks, um die verstrichene Zeit zu berechnen, da sich Fehler ansammeln können. Stattdessen sollten Sie einen separaten Timer verwenden, der mit Event.timeStamp
oder ähnlichem die insgesamt seit dem Start verstrichene Zeit aufzeichnet.
Der Blob
, der die Mediendaten enthält, ist in der dataavailable
-Eigenschaft des Events verfügbar.
Syntax
Verwenden Sie den Eventnamen in Methoden wie addEventListener()
oder setzen Sie eine Event-Handler-Eigenschaft.
addEventListener("dataavailable", (event) => {});
ondataavailable = (event) => {};
Event-Typ
Beispiel
const chunks = [];
mediaRecorder.onstop = (e) => {
console.log("data available after MediaRecorder.stop() called.");
const audio = document.createElement("audio");
audio.controls = true;
const blob = new Blob(chunks, { type: mediaRecorder.mimeType });
const audioURL = window.URL.createObjectURL(blob);
audio.src = audioURL;
console.log("recorder stopped");
};
mediaRecorder.ondataavailable = (e) => {
chunks.push(e.data);
};
Spezifikationen
Specification |
---|
MediaStream Recording # dom-mediarecorder-ondataavailable |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Verwendung der MediaStream Recording API
- Web-Diktiergerät: MediaRecorder + getUserMedia + Web Audio API Visualisierungsdemo, von Chris Mills (Quelle auf GitHub.)
- simpl.info MediaStream Recording Demo, von Sam Dutton.
Navigator.getUserMedia()
- Umgang mit großen MediaRecorder-Chunks auf addpipe.com (2024)