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 ondataavailable Handler geliefert wurden, in einem einzelnen Blob übergeben.
  • Wenn MediaRecorder.stop() aufgerufen wird, werden alle Mediendaten, die seit Beginn der Aufnahme oder das letzte Mal, als ein dataavailable Ereignis auftrat, erfasst wurden, in einem Blob übergeben; danach endet die Aufnahme.
  • Wenn MediaRecorder.requestData() aufgerufen wird, werden alle Mediendaten, die seit Beginn der Aufnahme oder dem letzten dataavailable Ereignis erfasst wurden, übergeben; dann wird ein neuer Blob erstellt und die Aufnahme wird in diesem Blob fortgesetzt.
  • Wenn die Eigenschaft timeslice der Methode MediaRecorder.start(), die die Medienaufnahme startet, übergeben wurde, wird alle timeslice Millisekunden ein dataavailable Ereignis 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 das dataavailable Ereignis 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önnen timeslice zusammen mit MediaRecorder.stop() und MediaRecorder.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.

js
addEventListener("dataavailable", (event) => { })

ondataavailable = (event) => { }

Ereignistyp

Ein BlobEvent. Erbt von Event.

Event BlobEvent

Beispiel

js
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

Siehe auch