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 einzigen Blob übergeben.
  • Wenn MediaRecorder.stop() aufgerufen wird, werden alle Mediendaten, die seit Beginn der Aufnahme oder seit dem letzten dataavailable-Event erfasst wurden, in einem Blob geliefert; danach endet die Aufnahme.
  • Wenn MediaRecorder.requestData() aufgerufen wird, werden alle Mediendaten, die seit Beginn der Aufnahme oder seit dem letzten dataavailable-Event erfasst wurden, geliefert; dann wird ein neuer Blob erstellt und die Medienspeicherung wird in diesem Blob fortgesetzt.
  • Wenn eine timeslice-Eigenschaft in die Methode MediaRecorder.start() übergeben wurde, die die Medienaufnahme gestartet hat, wird ein dataavailable-Event alle timeslice-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 das dataavailable-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 kann timeslice zusammen mit MediaRecorder.stop() und MediaRecorder.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.

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

ondataavailable = (event) => {};

Event-Typ

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

BCD tables only load in the browser

Siehe auch