image-to-pixel 3.0.0 → 3.0.1

package/lib/core/video/mux-mp4.js

@@ -1,131 +1,131 @@
-// Minimal MP4 (ISO BMFF) muxer for one H.264 video track. Everything is buffered in memory and
-// written with the 'moov' box first ("fast start"), so the file plays and seeks while downloading.
-// Input: AVCC samples (length-prefixed NAL units, as WebCodecs' VideoEncoder emits with
-// avc.format 'avc') plus the AVCDecoderConfigurationRecord ('description').
-
-const ENC = new TextEncoder();
-
-class Writer {
-  constructor() { this.parts = []; this.size = 0; }
-  u8(v) { return this.bytes([v & 255]); }
-  u16(v) { return this.bytes([(v >>> 8) & 255, v & 255]); }
-  u32(v) { return this.bytes([(v >>> 24) & 255, (v >>> 16) & 255, (v >>> 8) & 255, v & 255]); }
-  str(s) { return this.bytes(ENC.encode(s)); }
-  bytes(b) { const a = b instanceof Uint8Array ? b : Uint8Array.from(b); this.parts.push(a); this.size += a.length; return this; }
-  zeros(n) { return this.bytes(new Uint8Array(n)); }
-  out() { const r = new Uint8Array(this.size); let o = 0; for (const p of this.parts) { r.set(p, o); o += p.length; } return r; }
-}
-
-/** A box: 4-byte size, 4-char type, then the body produced by fill(w). */
-function box(type, fill) {
-  const w = new Writer();
-  fill(w);
-  const body = w.out();
-  const head = new Writer().u32(body.length + 8).str(type).out();
-  const r = new Uint8Array(body.length + 8); r.set(head); r.set(body, 8);
-  return r;
-}
-const fullBox = (type, version, flags, fill) => box(type, w => { w.u8(version).u8(flags >> 16).u8(flags >> 8).u8(flags); fill(w); });
-const MATRIX = [0x10000, 0, 0, 0, 0x10000, 0, 0, 0, 0x40000000];
-
-/**
- * @param {{ width: number, height: number, timescale?: number }} opts
- */
-export function createMp4Muxer({ width, height, timescale = 90000 }) {
-  const samples = [];   // { data, key, ts, dur } with ts/dur in microseconds
-  let description = null;
-
-  return {
-    /** Use with a VideoEncoder `output` callback. */
-    addChunk(chunk, meta) {
-      if (meta && meta.decoderConfig && meta.decoderConfig.description && !description) {
-        const d = meta.decoderConfig.description;
-        description = new Uint8Array(d instanceof ArrayBuffer ? d : d.buffer.slice(d.byteOffset, d.byteOffset + d.byteLength));
-      }
-      const data = new Uint8Array(chunk.byteLength);
-      chunk.copyTo(data);
-      samples.push({ data, key: chunk.type === 'key', ts: chunk.timestamp, dur: chunk.duration || 0 });
-    },
-    /** Lower-level: add an AVCC sample directly. ts/dur in microseconds. */
-    addSample(data, { key, timestamp, duration }) { samples.push({ data, key: !!key, ts: timestamp, dur: duration || 0 }); },
-    /** AVCDecoderConfigurationRecord ('avcC' contents). */
-    setDescription(d) { description = d; },
-
-    /** @returns {Uint8Array} the .mp4 file */
-    finish() {
-      if (!samples.length) throw new Error('No video frames were encoded');
-      if (!description) throw new Error('The encoder gave no H.264 decoder configuration (avcC)');
-      // Samples arrive in decode order with presentation timestamps (B-frames make them non-monotonic).
-      // Decode times are the sorted presentation times; 'ctts' holds the difference when there is one.
-      const t = us => Math.round(us * timescale / 1e6);
-      const pts = samples.map(s => t(s.ts));
-      const dts = pts.slice().sort((a, b) => a - b);
-      const lastDur = t(samples[samples.length - 1].dur) || (dts.length > 1 ? dts[dts.length - 1] - dts[dts.length - 2] : t(33333));
-      const durs = dts.map((d, i) => (i + 1 < dts.length ? dts[i + 1] - d : lastDur));
-      const offsets = pts.map((p, i) => p - dts[i]);
-      const hasOffsets = offsets.some(o => o !== 0);
-      const mediaDur = durs.reduce((a, b) => a + b, 0);
-      const movieDur = Math.round(mediaDur * 1000 / timescale);
-
-      const stts = [];
-      for (const d of durs) { const last = stts[stts.length - 1]; if (last && last[1] === d) last[0]++; else stts.push([1, d]); }
-      const ctts = [];
-      for (const o of offsets) { const last = ctts[ctts.length - 1]; if (last && last[1] === o) last[0]++; else ctts.push([1, o]); }
-      const keys = samples.map((s, i) => (s.key ? i + 1 : 0)).filter(Boolean);
-      const dataSize = samples.reduce((a, s) => a + s.data.length, 0);
-
-      const ftyp = box('ftyp', w => w.str('isom').u32(512).str('isom').str('iso2').str('avc1').str('mp41'));
-      const buildMoov = chunkOffset => box('moov', w => {
-        w.bytes(fullBox('mvhd', 0, 0, b => {
-          b.u32(0).u32(0).u32(1000).u32(movieDur).u32(0x00010000).u16(0x0100).zeros(10);
-          MATRIX.forEach(v => b.u32(v)); b.zeros(24).u32(2);
-        }));
-        w.bytes(box('trak', tr => {
-          tr.bytes(fullBox('tkhd', 0, 3, b => {
-            b.u32(0).u32(0).u32(1).u32(0).u32(movieDur).zeros(8).u16(0).u16(0).u16(0).u16(0);
-            MATRIX.forEach(v => b.u32(v)); b.u32(width << 16).u32(height << 16);
-          }));
-          tr.bytes(box('mdia', md => {
-            md.bytes(fullBox('mdhd', 0, 0, b => b.u32(0).u32(0).u32(timescale).u32(mediaDur).u16(0x55c4).u16(0)));
-            md.bytes(fullBox('hdlr', 0, 0, b => b.u32(0).str('vide').zeros(12).str('VideoHandler').u8(0)));
-            md.bytes(box('minf', mi => {
-              mi.bytes(fullBox('vmhd', 0, 1, b => b.u16(0).u16(0).u16(0).u16(0)));
-              mi.bytes(box('dinf', di => di.bytes(fullBox('dref', 0, 0, b => { b.u32(1); b.bytes(fullBox('url ', 0, 1, () => { })); }))));
-              mi.bytes(box('stbl', st => {
-                st.bytes(fullBox('stsd', 0, 0, b => {
-                  b.u32(1);
-                  b.bytes(box('avc1', a => {
-                    a.zeros(6).u16(1).zeros(16).u16(width).u16(height).u32(0x00480000).u32(0x00480000).u32(0).u16(1);
-                    const name = ENC.encode('image-to-pixel').slice(0, 31);
-                    a.u8(name.length).bytes(name).zeros(31 - name.length).u16(0x0018).u16(0xffff);
-                    a.bytes(box('avcC', c => c.bytes(description)));
-                  }));
-                }));
-                st.bytes(fullBox('stts', 0, 0, b => { b.u32(stts.length); for (const [n, d] of stts) b.u32(n).u32(d); }));
-                // version 1: signed offsets, so negative composition offsets are allowed
-                if (hasOffsets) st.bytes(fullBox('ctts', 1, 0, b => { b.u32(ctts.length); for (const [n, o] of ctts) b.u32(n).u32(o >>> 0); }));
-                if (keys.length < samples.length) st.bytes(fullBox('stss', 0, 0, b => { b.u32(keys.length); for (const k of keys) b.u32(k); }));
-                st.bytes(fullBox('stsc', 0, 0, b => b.u32(1).u32(1).u32(samples.length).u32(1)));
-                st.bytes(fullBox('stsz', 0, 0, b => { b.u32(0).u32(samples.length); for (const s of samples) b.u32(s.data.length); }));
-                st.bytes(fullBox('stco', 0, 0, b => b.u32(1).u32(chunkOffset)));
-              }));
-            }));
-          }));
-        }));
-      });
-      // the moov size doesn't depend on the offset value, so measure once and build again
-      const moovSize = buildMoov(0).length;
-      const offset = ftyp.length + moovSize + 8;
-      if (offset + dataSize > 0xffffffff) throw new Error('Video is larger than 4 GB');
-      const moov = buildMoov(offset);
-      const out = new Uint8Array(offset + dataSize);
-      out.set(ftyp, 0); out.set(moov, ftyp.length);
-      const dv = new DataView(out.buffer);
-      dv.setUint32(ftyp.length + moov.length, dataSize + 8);
-      out.set(ENC.encode('mdat'), ftyp.length + moov.length + 4);
-      let o = offset;
-      for (const s of samples) { out.set(s.data, o); o += s.data.length; }
-      return out;
-    },
-  };
-}
+// Minimal MP4 (ISO BMFF) muxer for one H.264 video track. Everything is buffered in memory and
+// written with the 'moov' box first ("fast start"), so the file plays and seeks while downloading.
+// Input: AVCC samples (length-prefixed NAL units, as WebCodecs' VideoEncoder emits with
+// avc.format 'avc') plus the AVCDecoderConfigurationRecord ('description').
+
+const ENC = new TextEncoder();
+
+class Writer {
+  constructor() { this.parts = []; this.size = 0; }
+  u8(v) { return this.bytes([v & 255]); }
+  u16(v) { return this.bytes([(v >>> 8) & 255, v & 255]); }
+  u32(v) { return this.bytes([(v >>> 24) & 255, (v >>> 16) & 255, (v >>> 8) & 255, v & 255]); }
+  str(s) { return this.bytes(ENC.encode(s)); }
+  bytes(b) { const a = b instanceof Uint8Array ? b : Uint8Array.from(b); this.parts.push(a); this.size += a.length; return this; }
+  zeros(n) { return this.bytes(new Uint8Array(n)); }
+  out() { const r = new Uint8Array(this.size); let o = 0; for (const p of this.parts) { r.set(p, o); o += p.length; } return r; }
+}
+
+/** A box: 4-byte size, 4-char type, then the body produced by fill(w). */
+function box(type, fill) {
+  const w = new Writer();
+  fill(w);
+  const body = w.out();
+  const head = new Writer().u32(body.length + 8).str(type).out();
+  const r = new Uint8Array(body.length + 8); r.set(head); r.set(body, 8);
+  return r;
+}
+const fullBox = (type, version, flags, fill) => box(type, w => { w.u8(version).u8(flags >> 16).u8(flags >> 8).u8(flags); fill(w); });
+const MATRIX = [0x10000, 0, 0, 0, 0x10000, 0, 0, 0, 0x40000000];
+
+/**
+ * @param {{ width: number, height: number, timescale?: number }} opts
+ */
+export function createMp4Muxer({ width, height, timescale = 90000 }) {
+  const samples = [];   // { data, key, ts, dur } with ts/dur in microseconds
+  let description = null;
+
+  return {
+    /** Use with a VideoEncoder `output` callback. */
+    addChunk(chunk, meta) {
+      if (meta && meta.decoderConfig && meta.decoderConfig.description && !description) {
+        const d = meta.decoderConfig.description;
+        description = new Uint8Array(d instanceof ArrayBuffer ? d : d.buffer.slice(d.byteOffset, d.byteOffset + d.byteLength));
+      }
+      const data = new Uint8Array(chunk.byteLength);
+      chunk.copyTo(data);
+      samples.push({ data, key: chunk.type === 'key', ts: chunk.timestamp, dur: chunk.duration || 0 });
+    },
+    /** Lower-level: add an AVCC sample directly. ts/dur in microseconds. */
+    addSample(data, { key, timestamp, duration }) { samples.push({ data, key: !!key, ts: timestamp, dur: duration || 0 }); },
+    /** AVCDecoderConfigurationRecord ('avcC' contents). */
+    setDescription(d) { description = d; },
+
+    /** @returns {Uint8Array} the .mp4 file */
+    finish() {
+      if (!samples.length) throw new Error('No video frames were encoded');
+      if (!description) throw new Error('The encoder gave no H.264 decoder configuration (avcC)');
+      // Samples arrive in decode order with presentation timestamps (B-frames make them non-monotonic).
+      // Decode times are the sorted presentation times; 'ctts' holds the difference when there is one.
+      const t = us => Math.round(us * timescale / 1e6);
+      const pts = samples.map(s => t(s.ts));
+      const dts = pts.slice().sort((a, b) => a - b);
+      const lastDur = t(samples[samples.length - 1].dur) || (dts.length > 1 ? dts[dts.length - 1] - dts[dts.length - 2] : t(33333));
+      const durs = dts.map((d, i) => (i + 1 < dts.length ? dts[i + 1] - d : lastDur));
+      const offsets = pts.map((p, i) => p - dts[i]);
+      const hasOffsets = offsets.some(o => o !== 0);
+      const mediaDur = durs.reduce((a, b) => a + b, 0);
+      const movieDur = Math.round(mediaDur * 1000 / timescale);
+
+      const stts = [];
+      for (const d of durs) { const last = stts[stts.length - 1]; if (last && last[1] === d) last[0]++; else stts.push([1, d]); }
+      const ctts = [];
+      for (const o of offsets) { const last = ctts[ctts.length - 1]; if (last && last[1] === o) last[0]++; else ctts.push([1, o]); }
+      const keys = samples.map((s, i) => (s.key ? i + 1 : 0)).filter(Boolean);
+      const dataSize = samples.reduce((a, s) => a + s.data.length, 0);
+
+      const ftyp = box('ftyp', w => w.str('isom').u32(512).str('isom').str('iso2').str('avc1').str('mp41'));
+      const buildMoov = chunkOffset => box('moov', w => {
+        w.bytes(fullBox('mvhd', 0, 0, b => {
+          b.u32(0).u32(0).u32(1000).u32(movieDur).u32(0x00010000).u16(0x0100).zeros(10);
+          MATRIX.forEach(v => b.u32(v)); b.zeros(24).u32(2);
+        }));
+        w.bytes(box('trak', tr => {
+          tr.bytes(fullBox('tkhd', 0, 3, b => {
+            b.u32(0).u32(0).u32(1).u32(0).u32(movieDur).zeros(8).u16(0).u16(0).u16(0).u16(0);
+            MATRIX.forEach(v => b.u32(v)); b.u32(width << 16).u32(height << 16);
+          }));
+          tr.bytes(box('mdia', md => {
+            md.bytes(fullBox('mdhd', 0, 0, b => b.u32(0).u32(0).u32(timescale).u32(mediaDur).u16(0x55c4).u16(0)));
+            md.bytes(fullBox('hdlr', 0, 0, b => b.u32(0).str('vide').zeros(12).str('VideoHandler').u8(0)));
+            md.bytes(box('minf', mi => {
+              mi.bytes(fullBox('vmhd', 0, 1, b => b.u16(0).u16(0).u16(0).u16(0)));
+              mi.bytes(box('dinf', di => di.bytes(fullBox('dref', 0, 0, b => { b.u32(1); b.bytes(fullBox('url ', 0, 1, () => { })); }))));
+              mi.bytes(box('stbl', st => {
+                st.bytes(fullBox('stsd', 0, 0, b => {
+                  b.u32(1);
+                  b.bytes(box('avc1', a => {
+                    a.zeros(6).u16(1).zeros(16).u16(width).u16(height).u32(0x00480000).u32(0x00480000).u32(0).u16(1);
+                    const name = ENC.encode('image-to-pixel').slice(0, 31);
+                    a.u8(name.length).bytes(name).zeros(31 - name.length).u16(0x0018).u16(0xffff);
+                    a.bytes(box('avcC', c => c.bytes(description)));
+                  }));
+                }));
+                st.bytes(fullBox('stts', 0, 0, b => { b.u32(stts.length); for (const [n, d] of stts) b.u32(n).u32(d); }));
+                // version 1: signed offsets, so negative composition offsets are allowed
+                if (hasOffsets) st.bytes(fullBox('ctts', 1, 0, b => { b.u32(ctts.length); for (const [n, o] of ctts) b.u32(n).u32(o >>> 0); }));
+                if (keys.length < samples.length) st.bytes(fullBox('stss', 0, 0, b => { b.u32(keys.length); for (const k of keys) b.u32(k); }));
+                st.bytes(fullBox('stsc', 0, 0, b => b.u32(1).u32(1).u32(samples.length).u32(1)));
+                st.bytes(fullBox('stsz', 0, 0, b => { b.u32(0).u32(samples.length); for (const s of samples) b.u32(s.data.length); }));
+                st.bytes(fullBox('stco', 0, 0, b => b.u32(1).u32(chunkOffset)));
+              }));
+            }));
+          }));
+        }));
+      });
+      // the moov size doesn't depend on the offset value, so measure once and build again
+      const moovSize = buildMoov(0).length;
+      const offset = ftyp.length + moovSize + 8;
+      if (offset + dataSize > 0xffffffff) throw new Error('Video is larger than 4 GB');
+      const moov = buildMoov(offset);
+      const out = new Uint8Array(offset + dataSize);
+      out.set(ftyp, 0); out.set(moov, ftyp.length);
+      const dv = new DataView(out.buffer);
+      dv.setUint32(ftyp.length + moov.length, dataSize + 8);
+      out.set(ENC.encode('mdat'), ftyp.length + moov.length + 4);
+      let o = offset;
+      for (const s of samples) { out.set(s.data, o); o += s.data.length; }
+      return out;
+    },
+  };
+}

package/lib/core/video/mux-webm.js

@@ -1,127 +1,127 @@
-// Minimal WebM (Matroska) muxer for one VP8/VP9/AV1 video track. Buffered in memory, written with
-// a SeekHead and Cues so players can seek. Input: encoded frames from WebCodecs' VideoEncoder.
-
-const ENC = new TextEncoder();
-
-/** EBML variable-length size, always 8 bytes (simple and valid for any size). */
-function size8(n) {
-  const b = new Uint8Array(8);
-  b[0] = 0x01;
-  let v = n;
-  for (let i = 7; i >= 1; i--) { b[i] = v % 256; v = Math.floor(v / 256); }
-  return b;
-}
-function idBytes(id) {
-  const out = [];
-  for (let v = id; v > 0; v = Math.floor(v / 256)) out.unshift(v % 256);
-  return out;
-}
-function concat(parts) {
-  let n = 0; for (const p of parts) n += p.length;
-  const out = new Uint8Array(n); let o = 0;
-  for (const p of parts) { out.set(p, o); o += p.length; }
-  return out;
-}
-/** An element: id, 8-byte size, data. */
-const el = (id, data) => concat([Uint8Array.from(idBytes(id)), size8(data.length), data]);
-const uint = (id, v, bytes = 0) => {
-  const b = [];
-  for (let x = v; x > 0 || b.length === 0; x = Math.floor(x / 256)) b.unshift(x % 256);
-  while (b.length < bytes) b.unshift(0);
-  return el(id, Uint8Array.from(b));
-};
-const str = (id, s) => el(id, ENC.encode(s));
-const float64 = (id, v) => { const b = new Uint8Array(8); new DataView(b.buffer).setFloat64(0, v); return el(id, b); };
-const master = (id, children) => el(id, concat(children));
-
-const ID = {
-  EBML: 0x1A45DFA3, EBMLVersion: 0x4286, EBMLReadVersion: 0x42F7, EBMLMaxIDLength: 0x42F2, EBMLMaxSizeLength: 0x42F3,
-  DocType: 0x4282, DocTypeVersion: 0x4287, DocTypeReadVersion: 0x4285,
-  Segment: 0x18538067, SeekHead: 0x114D9B74, Seek: 0x4DBB, SeekID: 0x53AB, SeekPosition: 0x53AC,
-  Info: 0x1549A966, TimestampScale: 0x2AD7B1, Duration: 0x4489, MuxingApp: 0x4D80, WritingApp: 0x5741,
-  Tracks: 0x1654AE6B, TrackEntry: 0xAE, TrackNumber: 0xD7, TrackUID: 0x73C5, TrackType: 0x83, FlagLacing: 0x9C,
-  CodecID: 0x86, CodecPrivate: 0x63A2, DefaultDuration: 0x23E383, Video: 0xE0, PixelWidth: 0xB0, PixelHeight: 0xBA,
-  Cluster: 0x1F43B675, Timestamp: 0xE7, SimpleBlock: 0xA3,
-  Cues: 0x1C53BB6B, CuePoint: 0xBB, CueTime: 0xB3, CueTrackPositions: 0xB7, CueTrack: 0xF7, CueClusterPosition: 0xF1,
-};
-
-const CODEC_IDS = { vp8: 'V_VP8', vp9: 'V_VP9', av1: 'V_AV1' };
-
-/**
- * @param {{ width: number, height: number, codec: 'vp8' | 'vp9' | 'av1', fps?: number }} opts
- */
-export function createWebmMuxer({ width, height, codec = 'vp9', fps = 0 }) {
-  const frames = [];   // { data, key, ms }
-  let codecPrivate = null;
-
-  return {
-    addChunk(chunk, meta) {
-      if (meta && meta.decoderConfig && meta.decoderConfig.description && !codecPrivate) {
-        const d = meta.decoderConfig.description;
-        codecPrivate = new Uint8Array(d instanceof ArrayBuffer ? d : d.buffer.slice(d.byteOffset, d.byteOffset + d.byteLength));
-      }
-      const data = new Uint8Array(chunk.byteLength);
-      chunk.copyTo(data);
-      frames.push({ data, key: chunk.type === 'key', ms: chunk.timestamp / 1000 });
-    },
-    /** Lower-level: add one encoded frame. timestamp in microseconds. */
-    addFrame(data, { key, timestamp }) { frames.push({ data, key: !!key, ms: timestamp / 1000 }); },
-
-    /** @returns {Uint8Array} the .webm file */
-    finish() {
-      if (!frames.length) throw new Error('No video frames were encoded');
-      // VP8/VP9/AV1 frames from WebCodecs arrive in decode order, which is the order they're stored in
-      const frameMs = fps ? 1000 / fps : (frames.length > 1 ? (frames[frames.length - 1].ms - frames[0].ms) / (frames.length - 1) : 33.333);
-      const duration = frames[frames.length - 1].ms + frameMs;
-
-      const info = master(ID.Info, [
-        uint(ID.TimestampScale, 1000000),            // 1 ms
-        float64(ID.Duration, duration),
-        str(ID.MuxingApp, 'image-to-pixel'), str(ID.WritingApp, 'image-to-pixel'),
-      ]);
-      const tracks = master(ID.Tracks, [master(ID.TrackEntry, [
-        uint(ID.TrackNumber, 1), uint(ID.TrackUID, 1), uint(ID.TrackType, 1), uint(ID.FlagLacing, 0),
-        str(ID.CodecID, CODEC_IDS[codec] || codec),
-        ...(codecPrivate ? [el(ID.CodecPrivate, codecPrivate)] : []),
-        uint(ID.DefaultDuration, Math.round(frameMs * 1e6)),
-        master(ID.Video, [uint(ID.PixelWidth, width), uint(ID.PixelHeight, height)]),
-      ])]);
-
-      // clusters: a new one at each keyframe, and before the 16-bit relative timestamp overflows
-      const clusters = [];
-      let cur = null;
-      for (const f of frames) {
-        const t = Math.round(f.ms);
-        if (!cur || f.key || t - cur.start > 30000) { cur = { start: t, key: f.key, blocks: [] }; clusters.push(cur); }
-        const head = new Uint8Array(4);
-        head[0] = 0x81;                                      // track 1
-        new DataView(head.buffer).setInt16(1, t - cur.start);
-        head[3] = f.key ? 0x80 : 0x00;
-        cur.blocks.push(el(ID.SimpleBlock, concat([head, f.data])));
-      }
-      const clusterBytes = clusters.map(c => master(ID.Cluster, [uint(ID.Timestamp, c.start), ...c.blocks]));
-
-      // SeekHead with fixed-width positions, so its size is known before the positions are
-      const seekHead = (posInfo, posTracks, posCues) => master(ID.SeekHead, [
-        [ID.Info, posInfo], [ID.Tracks, posTracks], [ID.Cues, posCues],
-      ].map(([id, pos]) => master(ID.Seek, [el(ID.SeekID, Uint8Array.from(idBytes(id))), uint(ID.SeekPosition, pos, 8)])));
-      const shSize = seekHead(0, 0, 0).length;
-      const posInfo = shSize, posTracks = posInfo + info.length;
-      let pos = posTracks + tracks.length;
-      const cuePoints = [];
-      clusters.forEach((c, i) => {
-        if (c.key) cuePoints.push(master(ID.CuePoint, [uint(ID.CueTime, c.start), master(ID.CueTrackPositions, [uint(ID.CueTrack, 1), uint(ID.CueClusterPosition, pos)])]));
-        pos += clusterBytes[i].length;
-      });
-      const cues = master(ID.Cues, cuePoints.length ? cuePoints : [master(ID.CuePoint, [uint(ID.CueTime, 0), master(ID.CueTrackPositions, [uint(ID.CueTrack, 1), uint(ID.CueClusterPosition, posTracks + tracks.length)])])]);
-      const posCues = pos;
-
-      const header = master(ID.EBML, [
-        uint(ID.EBMLVersion, 1), uint(ID.EBMLReadVersion, 1), uint(ID.EBMLMaxIDLength, 4), uint(ID.EBMLMaxSizeLength, 8),
-        str(ID.DocType, 'webm'), uint(ID.DocTypeVersion, 4), uint(ID.DocTypeReadVersion, 2),
-      ]);
-      const segment = master(ID.Segment, [seekHead(posInfo, posTracks, posCues), info, tracks, ...clusterBytes, cues]);
-      return concat([header, segment]);
-    },
-  };
-}
+// Minimal WebM (Matroska) muxer for one VP8/VP9/AV1 video track. Buffered in memory, written with
+// a SeekHead and Cues so players can seek. Input: encoded frames from WebCodecs' VideoEncoder.
+
+const ENC = new TextEncoder();
+
+/** EBML variable-length size, always 8 bytes (simple and valid for any size). */
+function size8(n) {
+  const b = new Uint8Array(8);
+  b[0] = 0x01;
+  let v = n;
+  for (let i = 7; i >= 1; i--) { b[i] = v % 256; v = Math.floor(v / 256); }
+  return b;
+}
+function idBytes(id) {
+  const out = [];
+  for (let v = id; v > 0; v = Math.floor(v / 256)) out.unshift(v % 256);
+  return out;
+}
+function concat(parts) {
+  let n = 0; for (const p of parts) n += p.length;
+  const out = new Uint8Array(n); let o = 0;
+  for (const p of parts) { out.set(p, o); o += p.length; }
+  return out;
+}
+/** An element: id, 8-byte size, data. */
+const el = (id, data) => concat([Uint8Array.from(idBytes(id)), size8(data.length), data]);
+const uint = (id, v, bytes = 0) => {
+  const b = [];
+  for (let x = v; x > 0 || b.length === 0; x = Math.floor(x / 256)) b.unshift(x % 256);
+  while (b.length < bytes) b.unshift(0);
+  return el(id, Uint8Array.from(b));
+};
+const str = (id, s) => el(id, ENC.encode(s));
+const float64 = (id, v) => { const b = new Uint8Array(8); new DataView(b.buffer).setFloat64(0, v); return el(id, b); };
+const master = (id, children) => el(id, concat(children));
+
+const ID = {
+  EBML: 0x1A45DFA3, EBMLVersion: 0x4286, EBMLReadVersion: 0x42F7, EBMLMaxIDLength: 0x42F2, EBMLMaxSizeLength: 0x42F3,
+  DocType: 0x4282, DocTypeVersion: 0x4287, DocTypeReadVersion: 0x4285,
+  Segment: 0x18538067, SeekHead: 0x114D9B74, Seek: 0x4DBB, SeekID: 0x53AB, SeekPosition: 0x53AC,
+  Info: 0x1549A966, TimestampScale: 0x2AD7B1, Duration: 0x4489, MuxingApp: 0x4D80, WritingApp: 0x5741,
+  Tracks: 0x1654AE6B, TrackEntry: 0xAE, TrackNumber: 0xD7, TrackUID: 0x73C5, TrackType: 0x83, FlagLacing: 0x9C,
+  CodecID: 0x86, CodecPrivate: 0x63A2, DefaultDuration: 0x23E383, Video: 0xE0, PixelWidth: 0xB0, PixelHeight: 0xBA,
+  Cluster: 0x1F43B675, Timestamp: 0xE7, SimpleBlock: 0xA3,
+  Cues: 0x1C53BB6B, CuePoint: 0xBB, CueTime: 0xB3, CueTrackPositions: 0xB7, CueTrack: 0xF7, CueClusterPosition: 0xF1,
+};
+
+const CODEC_IDS = { vp8: 'V_VP8', vp9: 'V_VP9', av1: 'V_AV1' };
+
+/**
+ * @param {{ width: number, height: number, codec: 'vp8' | 'vp9' | 'av1', fps?: number }} opts
+ */
+export function createWebmMuxer({ width, height, codec = 'vp9', fps = 0 }) {
+  const frames = [];   // { data, key, ms }
+  let codecPrivate = null;
+
+  return {
+    addChunk(chunk, meta) {
+      if (meta && meta.decoderConfig && meta.decoderConfig.description && !codecPrivate) {
+        const d = meta.decoderConfig.description;
+        codecPrivate = new Uint8Array(d instanceof ArrayBuffer ? d : d.buffer.slice(d.byteOffset, d.byteOffset + d.byteLength));
+      }
+      const data = new Uint8Array(chunk.byteLength);
+      chunk.copyTo(data);
+      frames.push({ data, key: chunk.type === 'key', ms: chunk.timestamp / 1000 });
+    },
+    /** Lower-level: add one encoded frame. timestamp in microseconds. */
+    addFrame(data, { key, timestamp }) { frames.push({ data, key: !!key, ms: timestamp / 1000 }); },
+
+    /** @returns {Uint8Array} the .webm file */
+    finish() {
+      if (!frames.length) throw new Error('No video frames were encoded');
+      // VP8/VP9/AV1 frames from WebCodecs arrive in decode order, which is the order they're stored in
+      const frameMs = fps ? 1000 / fps : (frames.length > 1 ? (frames[frames.length - 1].ms - frames[0].ms) / (frames.length - 1) : 33.333);
+      const duration = frames[frames.length - 1].ms + frameMs;
+
+      const info = master(ID.Info, [
+        uint(ID.TimestampScale, 1000000),            // 1 ms
+        float64(ID.Duration, duration),
+        str(ID.MuxingApp, 'image-to-pixel'), str(ID.WritingApp, 'image-to-pixel'),
+      ]);
+      const tracks = master(ID.Tracks, [master(ID.TrackEntry, [
+        uint(ID.TrackNumber, 1), uint(ID.TrackUID, 1), uint(ID.TrackType, 1), uint(ID.FlagLacing, 0),
+        str(ID.CodecID, CODEC_IDS[codec] || codec),
+        ...(codecPrivate ? [el(ID.CodecPrivate, codecPrivate)] : []),
+        uint(ID.DefaultDuration, Math.round(frameMs * 1e6)),
+        master(ID.Video, [uint(ID.PixelWidth, width), uint(ID.PixelHeight, height)]),
+      ])]);
+
+      // clusters: a new one at each keyframe, and before the 16-bit relative timestamp overflows
+      const clusters = [];
+      let cur = null;
+      for (const f of frames) {
+        const t = Math.round(f.ms);
+        if (!cur || f.key || t - cur.start > 30000) { cur = { start: t, key: f.key, blocks: [] }; clusters.push(cur); }
+        const head = new Uint8Array(4);
+        head[0] = 0x81;                                      // track 1
+        new DataView(head.buffer).setInt16(1, t - cur.start);
+        head[3] = f.key ? 0x80 : 0x00;
+        cur.blocks.push(el(ID.SimpleBlock, concat([head, f.data])));
+      }
+      const clusterBytes = clusters.map(c => master(ID.Cluster, [uint(ID.Timestamp, c.start), ...c.blocks]));
+
+      // SeekHead with fixed-width positions, so its size is known before the positions are
+      const seekHead = (posInfo, posTracks, posCues) => master(ID.SeekHead, [
+        [ID.Info, posInfo], [ID.Tracks, posTracks], [ID.Cues, posCues],
+      ].map(([id, pos]) => master(ID.Seek, [el(ID.SeekID, Uint8Array.from(idBytes(id))), uint(ID.SeekPosition, pos, 8)])));
+      const shSize = seekHead(0, 0, 0).length;
+      const posInfo = shSize, posTracks = posInfo + info.length;
+      let pos = posTracks + tracks.length;
+      const cuePoints = [];
+      clusters.forEach((c, i) => {
+        if (c.key) cuePoints.push(master(ID.CuePoint, [uint(ID.CueTime, c.start), master(ID.CueTrackPositions, [uint(ID.CueTrack, 1), uint(ID.CueClusterPosition, pos)])]));
+        pos += clusterBytes[i].length;
+      });
+      const cues = master(ID.Cues, cuePoints.length ? cuePoints : [master(ID.CuePoint, [uint(ID.CueTime, 0), master(ID.CueTrackPositions, [uint(ID.CueTrack, 1), uint(ID.CueClusterPosition, posTracks + tracks.length)])])]);
+      const posCues = pos;
+
+      const header = master(ID.EBML, [
+        uint(ID.EBMLVersion, 1), uint(ID.EBMLReadVersion, 1), uint(ID.EBMLMaxIDLength, 4), uint(ID.EBMLMaxSizeLength, 8),
+        str(ID.DocType, 'webm'), uint(ID.DocTypeVersion, 4), uint(ID.DocTypeReadVersion, 2),
+      ]);
+      const segment = master(ID.Segment, [seekHead(posInfo, posTracks, posCues), info, tracks, ...clusterBytes, cues]);
+      return concat([header, segment]);
+    },
+  };
+}