MediaRecorder: dataavailable-Ereignis
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.
Das dataavailable-Ereignis der MediaRecorder-Schnittstelle wird ausgelöst, wenn der MediaRecorder Ihrer Anwendung Mediendaten zur Verfügung stellt. Die Daten werden in einem Blob-Objekt bereitgestellt. Dies geschieht in vier Situationen:
- Wenn der Medienstrom endet, werden alle Mediendaten, die noch nicht an Ihren
ondataavailable-Handler übergeben wurden, in einem einzigenBlobbereitgestellt. - Wenn
MediaRecorder.stop()aufgerufen wird, werden alle Mediendaten, die seit Beginn der Aufzeichnung oder seit dem letztendataavailable-Ereignis erfasst wurden, in einemBlobbereitgestellt. Danach endet die Erfassung. - Wenn
MediaRecorder.requestData()aufgerufen wird, werden alle Mediendaten bereitgestellt, die seit Beginn der Aufzeichnung oder seit dem letztendataavailable-Ereignis erfasst wurden. Anschließend wird ein neuerBloberstellt und die Medienerfassung darin fortgesetzt. - Wenn der Methode
MediaRecorder.start(), mit der die Medienerfassung gestartet wurde, eintimeslice-Wert übergeben wurde, wird alletimesliceMillisekunden eindataavailable-Ereignis ausgelöst. Normalerweise enthält daher jeder Blob Mediendaten mit einer bestimmten Dauer. Der letzte Blob kann kürzer sein, da er nur die seit dem letzten Ereignis verbleibenden Daten enthält. Lautet der Methodenaufruf beispielsweiserecorder.start(1000);, wird dasdataavailable-Ereignis nach jeder Sekunde der Medienerfassung ausgelöst. Unser Event-Handler wird dann jede Sekunde mit einem Blob aufgerufen, der eine Sekunde Mediendaten enthält. Sie könnentimeslicezusammen mitMediaRecorder.stop()undMediaRecorder.requestData()verwenden, um mehrere gleich lange Blobs sowie weitere kürzere Blobs zu erzeugen.
Hinweis:
Wie andere Zeitwerte in Web-APIs ist timeslice nicht exakt. Die tatsächlichen Intervalle können sich durch andere ausstehende Aufgaben, Browserfunktionen (etwa das Pausieren von Kamera und Mikrofon in Safari), browserspezifisches Verhalten (das Sperren des Bildschirms während einer Aufzeichnung in Chrome unter Android pausiert das dataavailable-Ereignis) oder andere Browserfehler verzögern. Dadurch können auch erheblich größere Datenabschnitte entstehen.
Verlassen Sie sich daher bei der Berechnung der verstrichenen Zeit nicht auf timeslice und die Anzahl der empfangenen Datenabschnitte, da sich Fehler aufsummieren können. Verwenden Sie stattdessen einen separaten Timer mit Event.timeStamp oder einer ähnlichen Lösung, um die seit dem Start insgesamt verstrichene Zeit zu erfassen.
Der Blob mit den Mediendaten ist über die data-Eigenschaft des dataavailable-Ereignisses verfügbar.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("dataavailable", (event) => { })
Alternativ können Sie die Event-Handler-Eigenschaft der Schnittstelle zuweisen:
ondataavailable = (event) => { }
Ereignistyp
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
| Spezifikation |
|---|
| MediaStream Recording # dom-mediarecorder-ondataavailable |
Browser-Kompatibilität
Siehe auch
- Verwendung der MediaStream Recording API
- Web Dictaphone: Demo für MediaRecorder + getUserMedia + Visualisierung mit der Web Audio API, von Chris Mills (Quellcode auf GitHub).
- simpl.info-Demo zur MediaStream-Aufzeichnung, von Sam Dutton.
Navigator.getUserMedia()- Umgang mit sehr großen MediaRecorder-Datenabschnitten auf addpipe.com (2024)