BlobEvent.data — Eigenschaft · JavaScript-Referenz

Signatur

BlobEvent.data

Beschreibung

Die Eigenschaft BlobEvent.data liefert das Blob-Objekt, das zu einem BlobEvent gehört. In der Praxis begegnet man ihr fast ausschließlich im dataavailable-Ereignis eines MediaRecorder: Jedes Mal, wenn der Recorder Mediendaten bereitstellt, enthält event.data einen Teil (Chunk) der Aufnahme bzw. die gesamte Aufnahme.

Wann ein dataavailable-Ereignis ausgelöst wird, hängt vom Aufruf ab:

recorder.start() ohne Argument: ein einziges Blob beim Aufruf von stop().
recorder.start(timeslice): regelmäßig alle timeslice Millisekunden ein Chunk – ideal für Streaming oder Hochladen in Teilen.
recorder.requestData(): sofortige Ausgabe der bisher gepufferten Daten.

Üblicherweise sammelt man die einzelnen Blobs in einem Array und setzt sie nach dem stop-Ereignis mit new Blob(chunks, { type }) zu einer abspielbaren oder herunterladbaren Datei zusammen. Der MIME-Typ des Blobs entspricht dem Format des Recorders (z. B. video/webm oder audio/mp4) und ist über event.data.type abrufbar.

Rückgabewert

Typ

Blob

Beschreibung

Das mit dem Ereignis verknüpfte Blob mit den (Teil-)Mediendaten. Kann eine size von 0 haben, wenn keine Daten vorlagen.

Beispiele

Mikrofonaufnahme sammeln und abspielen

const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const recorder = new MediaRecorder(stream);
const chunks = [];

recorder.addEventListener('dataavailable', (event) => {
  // Leere Chunks ignorieren
  if (event.data.size > 0) chunks.push(event.data);
});

recorder.addEventListener('stop', () => {
  const blob = new Blob(chunks, { type: recorder.mimeType });
  const audio = new Audio(URL.createObjectURL(blob));
  audio.controls = true;
  document.body.append(audio);
  console.log(`Aufnahme: ${blob.size} Bytes, Typ ${blob.type}`);
});

recorder.start();
setTimeout(() => recorder.stop(), 3000);

Aufnahme: 48213 Bytes, Typ audio/webm;codecs=opus

Bildschirmaufnahme in Chunks hochladen (timeslice)

const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
let index = 0;

recorder.ondataavailable = async ({ data }) => {
  if (!data.size) return;
  const form = new FormData();
  form.append('chunk', data, `teil-${index++}.webm`);
  await fetch('/upload', { method: 'POST', body: form });
};

// Alle 2 Sekunden ein neues BlobEvent mit data
recorder.start(2000);

BlobEvent manuell erzeugen

const blob = new Blob(['Hallo Welt'], { type: 'text/plain' });
const event = new BlobEvent('dataavailable', { data: blob, timecode: 0 });

console.log(event.data === blob);
console.log(await event.data.text());

true Hallo Welt

// Wichtig · Fallstricke

Schreibgeschützt: event.data kann nicht neu zugewiesen werden; der Wert wird ausschließlich über den Konstruktor (new BlobEvent(type, { data })) oder den Browser gesetzt. Das data-Feld ist im Konstruktor Pflicht.
Einzelne Chunks sind oft nicht eigenständig abspielbar: Nur der erste Chunk enthält bei WebM/MP4 die Container-Header. Chunks daher in der richtigen Reihenfolge zusammenfügen.
Leere Blobs: Ein Chunk kann size === 0 haben – vor dem Speichern prüfen.
Letzter Chunk: Beim Aufruf von stop() wird zuerst ein finales dataavailable und erst danach stop ausgelöst. Die Datei also erst im stop-Handler zusammensetzen.
Speicher: Mit URL.createObjectURL() erzeugte URLs per URL.revokeObjectURL() wieder freigeben, sonst bleibt das Blob im Speicher.
Kompatibilität: In allen modernen Browsern verfügbar; Safari unterstützt MediaRecorder seit Version 14.1 und liefert bevorzugt audio/mp4/video/mp4 statt WebM. Unterstützte Formate mit MediaRecorder.isTypeSupported() prüfen. getUserMedia erfordert einen sicheren Kontext (HTTPS).

Siehe auch

Blob BlobEvent.timecode PushEvent.data TextEvent.data InputEvent.data