BlobEvent.timecode — Eigenschaft · JavaScript-Referenz

Signatur

BlobEvent.timecode

Beschreibung

Die Eigenschaft timecode des BlobEvent-Interfaces gibt einen DOMHighResTimeStamp in Millisekunden zurück. Er gibt den Abstand zwischen dem Zeitstempel des ersten Chunks in event.data und dem Zeitstempel des ersten Chunks im ersten BlobEvent an, das derselbe Recorder erzeugt hat. Die Zeitangabe bezieht sich also auf den Beginn der Aufnahme und nicht auf die Wanduhr.

In der Praxis bekommst du BlobEvent-Objekte vor allem im dataavailable-Event eines MediaRecorder. Startest du die Aufnahme mit recorder.start(timeslice), wird regelmäßig ein Datenstück ausgeliefert. Über timecode kannst du jedes Stück zeitlich in die Aufnahme einordnen, zum Beispiel für Fortschrittsanzeigen, Lücken-Erkennung, Synchronisation beim Streaming an einen Server oder eigene Container-Metadaten.

Da die Eigenschaft schreibgeschützt ist, kannst du den Wert nur über den Konstruktor new BlobEvent(type, { data, timecode }) selbst setzen, etwa in Tests oder bei synthetischen Events. Der Standardwert ist dann 0.

Rückgabewert

Typ

DOMHighResTimeStamp (number)

Beschreibung

Zeitabstand in Millisekunden (als Gleitkommazahl) zwischen dem ersten Chunk dieses Events und dem ersten Chunk des ersten BlobEvent des Recorders. In Browsern ohne Unterstützung ist der Wert undefined.

Beispiele

Zeitcodes der Aufnahme-Chunks protokollieren

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

recorder.addEventListener('dataavailable', (event) => {
  chunks.push(event.data);
  // timecode ist nicht in allen Browsern vorhanden
  const tc = event.timecode ?? 'nicht unterstützt';
  console.log(`Chunk ${chunks.length}: ${event.data.size} Bytes, timecode = ${tc}`);
});

// Alle 1000 ms ein Datenstück ausliefern
recorder.start(1000);
setTimeout(() => recorder.stop(), 3500);

Chunk 1: 16384 Bytes, timecode = 0 Chunk 2: 16012 Bytes, timecode = 1000.2 Chunk 3: 16230 Bytes, timecode = 2000.5 Chunk 4: 8120 Bytes, timecode = 3000.1

Lücken zwischen Chunks erkennen

const stream = await navigator.mediaDevices.getUserMedia({ video: true });
const recorder = new MediaRecorder(stream);
const timeslice = 500;
let lastTimecode = null;

recorder.ondataavailable = ({ data, timecode }) => {
  if (typeof timecode !== 'number') return; // Feature-Detection
  if (lastTimecode !== null) {
    const delta = timecode - lastTimecode;
    if (delta > timeslice * 1.5) {
      console.warn(`Lücke erkannt: ${delta.toFixed(1)} ms seit letztem Chunk`);
    }
  }
  lastTimecode = timecode;
};

recorder.start(timeslice);

Lücke erkannt: 1203.4 ms seit letztem Chunk (nur bei Ausfällen)

Synthetisches BlobEvent mit eigenem timecode (z. B. für Tests)

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

console.log(event.type);      // Ereignistyp
console.log(event.timecode);  // gesetzter Wert

const defaultEvent = new BlobEvent('dataavailable', { data: blob });
console.log(defaultEvent.timecode); // Standardwert

dataavailable 2500 0

// Wichtig · Fallstricke

Browser-Kompatibilität: Chromium-basierte Browser und Safari unterstützen timecode, Firefox bisher nicht (dort ist der Wert undefined). Prüfe den Wert deshalb immer mit typeof event.timecode === 'number'.
Relativ, nicht absolut: Der Wert bezieht sich auf den ersten Chunk der Aufnahme. Er ist keine Uhrzeit und kein performance.now()-Wert. Brauchst du eine Wanduhrzeit, merke dir beim start-Event selbst Date.now() und rechne den Wert darauf.
Der erste Wert ist nicht garantiert genau 0, und die Abstände entsprechen nicht exakt dem timeslice. Kodierung und Pufferung führen zu Abweichungen im Millisekundenbereich.
Nach pause()/resume() kann der Zeitcode je nach Implementierung weiterlaufen oder springen. Verlass dich also nicht auf lückenlose Werte.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wie event.timecode = 5 wird stillschweigend ignoriert (im Strict Mode gibt es einen TypeError).
BlobEvent und MediaRecorder funktionieren nur in sicheren Kontexten (HTTPS), wenn Kamera oder Mikrofon über getUserMedia genutzt werden.

Siehe auch

BlobEvent.data CloseEvent.code Document.timeline ErrorEvent.filename ErrorEvent.lineno