MediaRecorder: dataavailable Ereignis
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.
Das dataavailable Ereignis der MediaRecorder Schnittstelle wird ausgelöst, wenn der MediaRecorder Mediendaten an Ihre Anwendung zur Nutzung liefert. Die Daten werden in einem Blob Objekt bereitgestellt, das die Daten enthält. Dies tritt in vier Situationen auf:
- Wenn der Medienstream endet, werden alle Mediendaten, die noch nicht an Ihren
ondataavailableHandler geliefert wurden, in einem einzelnenBlobübergeben. - Wenn
MediaRecorder.stop()aufgerufen wird, werden alle Mediendaten, die seit Beginn der Aufnahme oder das letzte Mal, als eindataavailableEreignis auftrat, erfasst wurden, in einemBlobübergeben; danach endet die Aufnahme. - Wenn
MediaRecorder.requestData()aufgerufen wird, werden alle Mediendaten, die seit Beginn der Aufnahme oder dem letztendataavailableEreignis erfasst wurden, übergeben; dann wird ein neuerBloberstellt und die Aufnahme wird in diesem Blob fortgesetzt. - Wenn die Eigenschaft
timesliceder MethodeMediaRecorder.start(), die die Medienaufnahme startet, übergeben wurde, wird alletimesliceMillisekunden eindataavailableEreignis ausgelöst. Das bedeutet, dass normalerweise jeder Blob eine bestimmte Zeitdauer hat (außer dem letzten Blob, der möglicherweise kürzer ist, da er das restliche Stück seit dem letzten Ereignis wäre). Wenn der Methodenaufruf beispielsweise so aussähe –recorder.start(1000);– würde dasdataavailableEreignis jede Sekunde der Medienaufnahme ausgelöst, und unser Ereignishandler würde jede Sekunde mit einem Blob von Mediendaten, der eine Sekunde lang ist, aufgerufen. Sie könnentimeslicezusammen mitMediaRecorder.stop()undMediaRecorder.requestData()verwenden, um mehrere Blobs gleicher Länge plus anderer kürzerer Blobs zu produzieren.
Hinweis:
Wie andere Zeitwerte in Web-APIs ist timeslice nicht exakt und die tatsächlichen Intervalle können aufgrund anderer anstehender Aufgaben, Browserfunktionen (wie das Pausieren der Kamera und des Mikrofons in Safari), browserspezifischer Verhaltensweisen (Bildschirm sperren während der Aufnahme in Chrome auf Android pausiert das dataavailable Ereignis) oder anderer Browserfehler verzögert werden. Solche Szenarien können auch zu deutlich größeren Datenmengen führen.
Verlassen Sie sich daher nicht auf timeslice und die Anzahl der empfangenen Datenmengen, um die verstrichene Zeit zu berechnen, da Fehler sich summieren können. Stattdessen sollten Sie einen separaten Timer wie Event.timeStamp oder ähnliches verwenden, der die gesamte seit dem Start verstrichene Zeit aufzeichnet.
Der Blob, der die Mediendaten enthält, ist in der data Eigenschaft des dataavailable Ereignisses verfügbar.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("dataavailable", (event) => { })
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
| Specification |
|---|
| MediaStream Recording # dom-mediarecorder-ondataavailable |
Browser-Kompatibilität
Loading…
Siehe auch
- Verwendung der MediaStream Recording API
- Web Dictaphone: MediaRecorder + getUserMedia + Web Audio API Visualisierungsdemo von Chris Mills (Quellcode auf GitHub.)
- simpl.info MediaStream Recording Demo von Sam Dutton.
Navigator.getUserMedia()- Umgang mit großen MediaRecorder-Datenstücken auf addpipe.com (2024)