buninu-browser 0.2.3 → 0.3.0

package/lib/renderer/layout-observers.js

@@ -0,0 +1,236 @@
+/**
+ * Per-document layout observers. A layout/scroll notification schedules one
+ * measurement pass for all observers; page callbacks run only after every
+ * target has been measured, avoiding a layout flush for each lazy image.
+ * Geometry comes from the renderer, never from Happy DOM's zero-size boxes.
+ */
+export function createLayoutObservers({ nodeOf, boundsOf, computedStyle, viewport, schedule, cancel, call, now }) {
+  const intersections = new Set();
+  const resizes = new Set();
+  let pending = null;
+  let measuring = false;
+  let disposed = false;
+  let lastGeometry = null;
+
+  const queue = () => {
+    if (disposed || measuring || pending !== null || (!intersections.size && !resizes.size)) return;
+    pending = schedule(flush);
+  };
+  function flush() {
+    pending = null;
+    if (disposed) return;
+    measuring = true;
+    const deliveries = [];
+    // Multiple observers commonly watch the same ancestor or target.
+    const bounds = new Map();
+    const styles = new Map();
+    const rectOf = (node) => {
+      if (!bounds.has(node)) bounds.set(node, node?.isConnected ? boundsOf(node) : null);
+      return bounds.get(node);
+    };
+    const styleOf = (node) => {
+      if (!styles.has(node)) styles.set(node, computedStyle(node));
+      return styles.get(node);
+    };
+    try {
+      for (const observer of resizes) {
+        const state = resizeStates.get(observer);
+        const entries = [];
+        for (const [node, target] of state.targets) {
+          const rect = rectOf(node);
+          const style = rect ? styleOf(node) : null;
+          const border = style?.borderWidths ?? ZERO_EDGES;
+          const padding = style?.padding ?? ZERO_EDGES;
+          const width = Math.max(0, (rect?.width ?? 0) - sum(border, 1, 3) - sum(padding, 1, 3));
+          const height = Math.max(0, (rect?.height ?? 0) - sum(border, 0, 2) - sum(padding, 0, 2));
+          const scale = viewport().devicePixelRatio || 1;
+          const entry = {
+            target: target.wrapper,
+            contentRect: rectangle({ left: number(padding[3]), top: number(padding[0]), width, height }),
+            borderBoxSize: [size(rect?.width ?? 0, rect?.height ?? 0)],
+            contentBoxSize: [size(width, height)],
+            devicePixelContentBoxSize: [size(Math.round(width * scale), Math.round(height * scale))],
+          };
+          const selected = target.box === "border-box" ? entry.borderBoxSize[0]
+            : target.box === "device-pixel-content-box" ? entry.devicePixelContentBoxSize[0] : entry.contentBoxSize[0];
+          if (!target.last || selected.inlineSize !== target.last.inlineSize || selected.blockSize !== target.last.blockSize) {
+            target.last = selected;
+            entries.push(entry);
+          }
+        }
+        if (entries.length) deliveries.push([state.callback, observer, entries]);
+      }
+      for (const observer of intersections) {
+        const state = intersectionStates.get(observer);
+        const rootNode = nodeOf(state.root);
+        const screen = viewport();
+        const rootRect = rootNode?.nodeType === 1 ? rectOf(rootNode) : { left: 0, top: 0, width: screen.width, height: screen.height };
+        const rootBounds = rootRect ? marginRect(rectangle(rootRect), state.margin) : rectangle(ZERO_RECT);
+        for (const [node, target] of state.targets) {
+          const raw = rectOf(node);
+          const boundingClientRect = rectangle(raw ?? ZERO_RECT);
+          let intersection = raw && rootRect && (rootNode?.nodeType !== 1 || rootNode.contains(node))
+            ? boundingClientRect : null;
+          // Clip through scrolling/overflow ancestors before the root.
+          for (let ancestor = node.parentElement; intersection && ancestor && ancestor !== rootNode; ancestor = ancestor.parentElement) {
+            const style = styleOf(ancestor);
+            if (style?.overflowX === "clip" || style?.overflowY === "clip") {
+              const clip = rectOf(ancestor);
+              intersection = clip ? intersect(intersection, rectangle(clip), style.overflowX === "clip", style.overflowY === "clip") : null;
+            }
+          }
+          if (intersection) intersection = intersect(intersection, rootBounds);
+          const isIntersecting = intersection !== null;
+          const area = boundingClientRect.width * boundingClientRect.height;
+          const ratio = area ? (intersection ? intersection.width * intersection.height / area : 0) : (isIntersecting ? 1 : 0);
+          const thresholdIndex = state.thresholds.findIndex((threshold) => threshold > ratio);
+          const index = thresholdIndex === -1 ? state.thresholds.length : thresholdIndex;
+          if (target.index !== index || target.intersecting !== isIntersecting) {
+            target.index = index;
+            target.intersecting = isIntersecting;
+            state.records.push({ target: target.wrapper, time: now(), isIntersecting, intersectionRatio: ratio,
+              boundingClientRect, intersectionRect: intersection ?? rectangle(ZERO_RECT), rootBounds });
+          }
+        }
+        if (state.records.length) deliveries.push([state.callback, observer, state.records.splice(0)]);
+      }
+    } finally {
+      measuring = false;
+    }
+    for (const [callback, observer, entries] of deliveries) call(callback, observer, [entries, observer]);
+  }
+
+  const element = (target) => {
+    const node = nodeOf(target);
+    if (node?.nodeType !== 1) throw new TypeError("The target must be an Element.");
+    return node;
+  };
+  const intersectionStates = new WeakMap();
+  class IntersectionObserver {
+    constructor(callback, options = {}) {
+      if (typeof callback !== "function") throw new TypeError("IntersectionObserver callback must be a function.");
+      const root = options?.root ?? null;
+      const rootNode = root === null ? null : nodeOf(root);
+      if (root !== null && rootNode?.nodeType !== 1 && rootNode?.nodeType !== 9) {
+        throw new TypeError("IntersectionObserver root must be an Element or Document.");
+      }
+      const margin = parseMargin(options?.rootMargin ?? "0px");
+      const raw = options?.threshold ?? 0;
+      const thresholds = (typeof raw === "object" && raw !== null ? Array.from(raw, Number) : [Number(raw)]).sort((a, b) => a - b);
+      if (thresholds.some((value) => !Number.isFinite(value) || value < 0 || value > 1)) {
+        throw new RangeError("IntersectionObserver thresholds must be between 0 and 1.");
+      }
+      if (!thresholds.length) thresholds.push(0);
+      intersectionStates.set(this, { callback, root, margin, thresholds: Object.freeze(thresholds), targets: new Map(), records: [] });
+    }
+    get root() { return intersectionState(this).root; }
+    get rootMargin() { return intersectionState(this).margin.map(({ value, unit }) => `${value}${unit}`).join(" "); }
+    get thresholds() { return intersectionState(this).thresholds; }
+    observe(target) {
+      const state = intersectionState(this);
+      const node = element(target);
+      if (state.targets.has(node)) return;
+      state.targets.set(node, { wrapper: target, index: -1, intersecting: false });
+      intersections.add(this);
+      queue();
+    }
+    unobserve(target) {
+      const state = intersectionState(this);
+      state.targets.delete(element(target));
+      if (!state.targets.size) intersections.delete(this);
+    }
+    disconnect() {
+      intersectionState(this).targets.clear();
+      intersections.delete(this);
+    }
+    takeRecords() { return intersectionState(this).records.splice(0); }
+  }
+  const intersectionState = (observer) => {
+    const state = intersectionStates.get(observer);
+    if (!state) throw new TypeError("Illegal invocation");
+    return state;
+  };
+
+  const resizeStates = new WeakMap();
+  class ResizeObserver {
+    constructor(callback) {
+      if (typeof callback !== "function") throw new TypeError("ResizeObserver callback must be a function.");
+      resizeStates.set(this, { callback, targets: new Map() });
+    }
+    observe(target, options = {}) {
+      const state = resizeState(this);
+      const node = element(target);
+      const box = String(options?.box ?? "content-box");
+      if (!["content-box", "border-box", "device-pixel-content-box"].includes(box)) throw new TypeError("Invalid ResizeObserver box option.");
+      if (state.targets.get(node)?.box === box) return;
+      state.targets.set(node, { wrapper: target, box, last: size(0, 0) });
+      resizes.add(this);
+      queue();
+    }
+    unobserve(target) {
+      const state = resizeState(this);
+      state.targets.delete(element(target));
+      if (!state.targets.size) resizes.delete(this);
+    }
+    disconnect() {
+      resizeState(this).targets.clear();
+      resizes.delete(this);
+    }
+  }
+  const resizeState = (observer) => {
+    const state = resizeStates.get(observer);
+    if (!state) throw new TypeError("Illegal invocation");
+    return state;
+  };
+
+  return {
+    IntersectionObserver, ResizeObserver,
+    update(...geometry) {
+      // Video frames and screenshots can repaint without changing layout.
+      // They must not cause an O(targets × ancestors) observer pass each time.
+      if (geometry.length && lastGeometry && geometry.every((value, index) => value === lastGeometry[index])) return;
+      lastGeometry = geometry;
+      queue();
+    },
+    dispose() {
+      disposed = true;
+      if (pending !== null) cancel(pending);
+      pending = null;
+      intersections.clear();
+      resizes.clear();
+    },
+  };
+}
+
+const ZERO_RECT = Object.freeze({ left: 0, top: 0, width: 0, height: 0 });
+const ZERO_EDGES = Object.freeze([0, 0, 0, 0]);
+const number = (value) => typeof value === "number" && Number.isFinite(value) ? value : 0;
+const sum = (edges, a, b) => number(edges[a]) + number(edges[b]);
+const size = (inlineSize, blockSize) => ({ inlineSize, blockSize });
+function rectangle({ left, top, width, height }) {
+  return { x: left, y: top, left, top, width, height, right: left + width, bottom: top + height,
+    toJSON() { return { x: this.x, y: this.y, width: this.width, height: this.height,
+      top: this.top, right: this.right, bottom: this.bottom, left: this.left }; } };
+}
+function parseMargin(value) {
+  const tokens = String(value).trim().split(/\s+/);
+  if (!tokens.length || tokens.length > 4) throw new DOMException("Invalid rootMargin.", "SyntaxError");
+  const parts = tokens.map((token) => {
+    const match = /^([+-]?(?:\d+\.?\d*|\.\d+))(px|%)$/.exec(token);
+    if (!match) throw new DOMException("rootMargin values must be pixels or percent.", "SyntaxError");
+    return { value: Number(match[1]), unit: match[2] };
+  });
+  const [top, right = top, bottom = top, left = right] = parts;
+  return [top, right, bottom, left];
+}
+function marginRect(rect, margin) {
+  const [top, right, bottom, left] = margin.map(({ value, unit }) => unit === "%" ? value * rect.width / 100 : value);
+  return rectangle({ left: rect.left - left, top: rect.top - top, width: rect.width + left + right, height: rect.height + top + bottom });
+}
+function intersect(a, b, x = true, y = true) {
+  const left = x ? Math.max(a.left, b.left) : a.left;
+  const right = x ? Math.min(a.right, b.right) : a.right;
+  const top = y ? Math.max(a.top, b.top) : a.top;
+  const bottom = y ? Math.min(a.bottom, b.bottom) : a.bottom;
+  return left <= right && top <= bottom ? rectangle({ left, top, width: right - left, height: bottom - top }) : null;
+}

package/lib/renderer/main.js

@@ -28,7 +28,7 @@
  *                           closed with sentBytes: the PCM that reached the output before audio-close)
  *
  * With --compositor, a compositor Worker (compositor.js) answers screenshots
- * and scrolling on fd 3 while this thread is busy; frames go to it with
+ * and scrolling on a dedicated socket while this thread is busy; frames go to it with
  * postMessage.
  *
  * Startup order matters for the sandbox:
@@ -46,6 +46,7 @@ import { RENDERER_LOG_FLAG } from "../log.js";
 import wasmpeg from "../../vendor/wasmpeg/src/js/index.js";
 import { createBytePipe } from "../media/byte-pipe.js";
 import { notifyRejectionHandled, notifyUnhandledRejection } from "./rejections.js";
+import { SharedFramePool } from "../paint/shared-frame-pool.js";
 
 const DANGEROUSLY_ALLOW_HOST_JS = "--dangerously-allow-host-js";
 
@@ -90,6 +91,7 @@ function fetchResource(url, kind) {
 function pageFetch(request) {
   let fetchId;
   let streamController;
+  const completed = Promise.withResolvers();
   const body = new ReadableStream({
     start(controller) { streamController = controller; },
     cancel() { promise.abort(); },
@@ -97,11 +99,17 @@ function pageFetch(request) {
   const promise = new Promise((resolve, reject) => {
     const id = nextFetchId++;
     fetchId = id;
-    pendingFetches.set(id, { resolve, reject, page: true, body, streamController, head: false });
+    pendingFetches.set(id, { resolve, reject, page: true, body, streamController, head: false, finish: completed.resolve });
     process.send({ type: "page-fetch", id, request });
   });
-  promise.abort = () => {
-    if (!pendingFetches.delete(fetchId)) return;
+  promise.finished = completed.promise;
+  promise.abort = (reason = new DOMException("The operation was aborted.", "AbortError")) => {
+    const pending = pendingFetches.get(fetchId);
+    if (!pending) return;
+    pendingFetches.delete(fetchId);
+    if (pending.head) { try { streamController.error(reason); } catch {} }
+    else pending.reject(reason);
+    completed.resolve();
     process.send({ type: "page-fetch-abort", id: fetchId });
   };
   return promise;
@@ -145,6 +153,7 @@ const audio = {
 };
 
 // Workers load their module from disk, so this happens before seccomp.
+const frameBuffers = new SharedFramePool();
 const compositor = process.argv.includes(COMPOSITOR_FLAG) ? await startCompositor() : null;
 // Started before the sandbox closes: the worker loads its module from disk.
 const rewriteScript = await startScriptRewriter();
@@ -163,13 +172,23 @@ function compositorCaughtUp() {
 
 async function startCompositor() {
   const worker = new Worker(new URL("./compositor.js", import.meta.url).href);
+  const endpoint = JSON.parse(process.argv.find(arg=>arg.startsWith('--compositor-endpoint=')).slice('--compositor-endpoint='.length));
+  worker.postMessage({type:'connect',endpoint});
   await new Promise((resolve, reject) => {
     worker.addEventListener("message", resolve, { once: true });
     worker.addEventListener("error", reject, { once: true });
   });
+  worker.addEventListener("error", (event) => {
+    frameBuffers.clear();
+    report(`buninu-browser: compositor worker failed: ${String(event?.message ?? "unknown error").slice(0, 500)}`);
+    // Its dedicated controller channel and outstanding frame leases cannot
+    // recover in place. Normal renderer exit rejects pending controller calls.
+    process.exit(1);
+  });
   worker.addEventListener("message", ({ data }) => {
     if (data?.type === "scroll") renderer.applyCompositorScroll(data.x, data.y);
     else if (data?.type === "video-report") renderer.videoReport(data);
+    else if (data?.type === "frame-release" && Number.isInteger(data.serial)) frameBuffers.release(data.serial);
     else if (data?.type === "frame-ack" && Number.isInteger(data.serial)) {
       framesAcknowledged = Math.max(framesAcknowledged, data.serial);
       frameWaiters = frameWaiters.filter((waiter) => {
@@ -220,19 +239,36 @@ async function startScriptRewriter() {
   });
 }
 
+let nextClipboardId=1;
+const clipboardWrites=new Map();
+function clipboardWrite(text) {
+  const id=nextClipboardId++;
+  return new Promise((resolve,reject)=>{
+    const timer=setTimeout(()=>{clipboardWrites.delete(id);reject(Error('Clipboard timed out'));},5000);
+    clipboardWrites.set(id,{resolve,reject,timer});
+    process.send({type:'clipboard-write',id,text});
+  });
+}
+
 const renderer = await createPageRenderer({
   fetchResource,
   rewriteScript,
   requestNavigation: (url, download = null, fragmentFrom = null, post = null) => process.send({ type: "navigate", url, download, fragmentFrom, post }),
   requestDownload: ({ url, name, data }) => process.send({ type: "download-data", url, name, data }),
   pageFetch,
+  clipboardWrite,
   webSockets,
   audio,
   setCookie: (value) => process.send({ type: "cookie", value }),
   reportError: (message) => report(`buninu-browser: page error: ${logging ? message : String(message).split("\n")[0]}`),
   consoleMessage: logging ? (level, text) => report(`page console.${level}: ${text}`) : null,
   trace: logging ? (text) => report(`timing: ${text}`) : null,
-  onFrame: compositor ? (frame) => compositor.postMessage({ type: "frame", serial: ++framesSent, ...frame }) : null,
+  allocateFramePixels: compositor ? bytes => frameBuffers.acquire(bytes) : null,
+  onFrame: compositor ? (frame) => {
+    const serial = ++framesSent;
+    frameBuffers.publish(serial, frame.tile.pixels);
+    compositor.postMessage({ type: "frame", serial, ...frame });
+  } : null,
   onVideo: compositor ? (message) => compositor.postMessage(message) : null,
   // Whoever waits for load (a screenshot, say) sees the frame painted at load.
   onLifecycle: (name, generation) => {
@@ -301,6 +337,13 @@ async function warmUp() {
 }
 
 process.on("message", async (message) => {
+  if(message?.type==='clipboard-result') {
+    const pending=clipboardWrites.get(message.id);if(!pending)return;
+    clipboardWrites.delete(message.id);clearTimeout(pending.timer);
+    if(message.error)pending.reject(Error(String(message.error)));else pending.resolve();
+    return;
+  }
+
   if (message?.type === "page-fetch-head") {
     const pending = pendingFetches.get(message.id);
     if (!pending?.page || pending.head) return;
@@ -317,6 +360,7 @@ process.on("message", async (message) => {
     if (!pending?.page) return;
     pendingFetches.delete(message.id);
     pending.streamController.close();
+    pending.finish?.();
     return;
   }
   if (message?.type === "page-fetch-error") {
@@ -326,6 +370,7 @@ process.on("message", async (message) => {
     const error = new Error(message.error || "fetch failed");
     if (pending.head) pending.streamController.error(error);
     else pending.reject(error);
+    pending.finish?.();
     return;
   }
   if (message?.type === "fetch-chunk") {
@@ -357,6 +402,7 @@ process.on("message", async (message) => {
       const error = new Error(message.error);
       pending.pipe?.fail(error);
       if (!pending.head) pending.reject(error);
+      pending.finish?.();
       return;
     }
     const result = message.result ?? {};
@@ -374,6 +420,7 @@ process.on("message", async (message) => {
       return;
     }
     pending.resolve(result);
+    pending.finish?.();
     return;
   }
   if (message?.type === "audio-event") {

package/lib/renderer/media-source.js

@@ -5,14 +5,16 @@
  * The event order follows the Media Source spec: appendBuffer returns with
  * updating set, and a later task runs updatestart, the append, then update
  * and updateend. sourceopen fires when an element attaches, not at
- * construction. remove() and abort() do not cut bytes out of the
- * concatenation — splicing an fMP4 or WebM would break the container, and
- * the decoder reopens on the whole snapshot.
+ * construction. remove() and abort() retain original fragment history for
+ * decoder reopens and backward seeks. MP4 initialization changes have
+ * separate snapshots selected by media time, so configurations do not mix.
  *
  * Codec claims stay inside what this build can demux and decode. Types the
  * engine cannot play are rejected so a page picks another one.
  */
 import { createBytePipe } from "../media/byte-pipe.js";
+import { createSourceSnapshots } from "../media/source-snapshots.js";
+import { createWebMStream, ebmlHeader } from "../media/webm-stream.js";
 
 const BRAND = Symbol("MediaSource");
 const BUFFER_BRAND = Symbol("SourceBuffer");
@@ -140,53 +142,55 @@ function ebmlUint(bytes, offset, length) {
 }
 
 /** Actual buffered end of WebM clusters (nanosecond TimecodeScale, millisecond default). */
-function inspectWebMAppend(bytes, state) {
-  for (let offset = 0; offset + 4 < bytes.byteLength; offset++) {
-    if (bytes[offset] !== 0x2a || bytes[offset + 1] !== 0xd7 || bytes[offset + 2] !== 0xb1) continue;
-    const size = ebmlVint(bytes, offset + 3);
-    const value = size && ebmlUint(bytes, offset + 3 + size.length, size.value);
-    if (value) state.scale = value;
-  }
-  const scale = state.scale || 1_000_000;
+function inspectWebMAppend(bytes, state, clusterOrigin = null) {
   let latest = null;
   let first = null;
-  state.appendHasHeader = bytes.byteLength >= 4 && bytes[0] === 0x1a && bytes[1] === 0x45 && bytes[2] === 0xdf && bytes[3] === 0xa3;
-  for (let offset = 0; offset + 4 < bytes.byteLength;) {
-    if (!(bytes[offset] === 0x1f && bytes[offset + 1] === 0x43
-      && bytes[offset + 2] === 0xb6 && bytes[offset + 3] === 0x75)) {
-      offset++;
-      continue;
-    }
-    const size = ebmlVint(bytes, offset + 4);
-    if (!size) break;
-    let cursor = offset + 4 + size.length;
-    const limit = Math.min(bytes.byteLength, cursor + size.value);
-    let clusterTime = 0;
-    while (cursor < limit) {
-      const element = ebmlVint(bytes, cursor, true);
-      const length = element && ebmlVint(bytes, cursor + element.length);
-      if (!element || !length) break;
-      const data = cursor + element.length + length.length;
-      const end = Math.min(limit, data + length.value);
-      if (element.value === 0xe7) {
-        clusterTime = ebmlUint(bytes, data, length.value) ?? clusterTime;
-        first ??= clusterTime;
-        latest = Math.max(latest ?? 0, clusterTime);
-      } else if (element.value === 0xa3 || element.value === 0xa1) {
-        const track = ebmlVint(bytes, data);
-        const timeAt = track ? data + track.length : end;
-        if (timeAt + 2 <= end) {
-          let relative = (bytes[timeAt] << 8) | bytes[timeAt + 1];
-          if (relative & 0x8000) relative -= 0x10000;
-          // Opus packets are normally 20 ms; this small tail keeps buffered
-          // from ending at the start timestamp of its final packet.
-          latest = Math.max(latest ?? 0, clusterTime + relative + 20);
+  const tracks = new Map();
+  const inspectCluster = (from, limit, origin = 0) => {
+    let clusterTime = origin;
+    const visit = (start, stop) => {
+      for (let cursor = start; cursor < stop;) {
+        const element = ebmlHeader(bytes, cursor);
+        if (!element) break;
+        const data = cursor + element.length, end = Math.min(stop, data + element.size);
+        if (element.id === 0xe7) {
+          clusterTime = ebmlUint(bytes, data, element.size) ?? clusterTime;
+          latest = Math.max(latest ?? 0, clusterTime);
+        } else if (element.id === 0xa0) visit(data, end); // BlockGroup
+        else if (element.id === 0xa3 || element.id === 0xa1) {
+          const track = ebmlVint(bytes, data);
+          const timeAt = track ? data + track.length : end;
+          if (timeAt + 2 <= end) {
+            let relative = (bytes[timeAt] << 8) | bytes[timeAt + 1];
+            if (relative & 0x8000) relative -= 0x10000;
+            first = Math.min(first ?? clusterTime + relative, clusterTime + relative);
+            // Opus packets are normally 20 ms; include the final packet.
+            latest = Math.max(latest ?? 0, clusterTime + relative + 20);
+            const range = tracks.get(track.value);
+            tracks.set(track.value, [Math.min(range?.[0] ?? Infinity, clusterTime + relative),
+              Math.max(range?.[1] ?? 0, clusterTime + relative + 20)]);
+          }
         }
+        cursor = end;
       }
-      cursor = end;
+    };
+    visit(from, limit);
+  };
+  const visit = (from, limit) => {
+    for (let offset = from; offset < limit;) {
+      const element = ebmlHeader(bytes, offset);
+      if (!element) break;
+      const data = offset + element.length, end = Math.min(limit, data + element.size);
+      if (element.id === 0x18538067 || element.id === 0x1549a966) visit(data, end);
+      else if (element.id === 0x2ad7b1) state.scale = ebmlUint(bytes, data, element.size) || state.scale;
+      else if (element.id === 0x1f43b675) inspectCluster(data, end);
+      offset = end;
     }
-    offset = Math.max(offset + 4, limit);
-  }
+  };
+  if (clusterOrigin != null) inspectCluster(0, bytes.length, clusterOrigin);
+  else visit(0, bytes.length);
+  const scale = state.scale || 1_000_000;
+  state.appendTracks = new Map([...tracks].map(([track, [start, end]]) => [track, [start * scale / 1e9, end * scale / 1e9]]));
   state.appendStart = first == null ? null : first * scale / 1e9;
   return latest == null ? null : latest * scale / 1e9;
 }
@@ -422,7 +426,12 @@ export function createMediaSourceScope({ origin, schedule, DOMException, onAppen
       Object.defineProperty(this, BUFFER_BRAND, { value: true });
       this._source = source;
       this._mime = String(mime);
-      this._pipe = createBytePipe();
+      this._snapshots = /^(video|audio)\/mp4\b/i.test(this._mime) ? createSourceSnapshots(inspectMp4Append) : null;
+      this._pipe = createBytePipe({ retainBytes: !this._snapshots });
+      if (this._snapshots) {
+        this._pipe.snapshotAt = time => this._snapshots.at(time);
+        this._pipe.bytes = () => this._snapshots.at(0).bytes;
+      }
       this._updating = false;
       this._operation = 0;
       this._removed = false;
@@ -433,6 +442,8 @@ export function createMediaSourceScope({ origin, schedule, DOMException, onAppen
       this._accountedBytes = 0;
       this._mp4 = {};
       this._webm = {};
+      this._webmCovered = new Map();
+      this._webmStream = /^(video|audio)\/webm\b/i.test(this._mime) ? createWebMStream() : null;
       this._hasSegmentTimeline = false;
       this._hasMediaSegment = false;
       this._appendWindowStart = 0;
@@ -504,16 +515,12 @@ export function createMediaSourceScope({ origin, schedule, DOMException, onAppen
       const bytes = copyBytes(data);
       const inspected = /^video\/mp4|^audio\/mp4/i.test(this._mime) ? this._mp4
         : /^video\/webm|^audio\/webm/i.test(this._mime) ? this._webm : null;
-      const segmentEnd = inspected === this._mp4 ? inspectMp4Append(bytes, this._mp4)
-        : inspected === this._webm ? inspectWebMAppend(bytes, this._webm) : null;
+      let segmentEnd = inspected === this._mp4 ? inspectMp4Append(bytes, this._mp4) : null;
       // Media the buffer already holds, sent again (players retry a segment
       // on a slow network): the concatenation would play it twice, so it is
       // left out. Its events fire as for any append.
       const start = inspected && !inspected.appendHasHeader ? inspected.appendStart : null;
-      const duplicate = start != null && segmentEnd != null && covers(this._covered, start, segmentEnd);
-      const hasWebMCluster = /^video\/webm|^audio\/webm/i.test(this._mime)
-        && bytes.indexOf(0x1f) >= 0 && bytes.some((value, index) => value === 0x1f
-          && bytes[index + 1] === 0x43 && bytes[index + 2] === 0xb6 && bytes[index + 3] === 0x75);
+      const duplicate = !this._snapshots && start != null && segmentEnd != null && covers(this._covered, start, segmentEnd);
       if (appended + bytes.byteLength > appendQuota) {
         throw new DOMException("The SourceBuffer is full.", "QuotaExceededError");
       }
@@ -525,13 +532,15 @@ export function createMediaSourceScope({ origin, schedule, DOMException, onAppen
       schedule(() => {
         if (this._removed || operation !== this._operation) return;
         emitNow(this, "updatestart");
-        if (!duplicate) {
+        if (this._webmStream) {
+          segmentEnd = this._appendWebM(this._webmStream.append(bytes), bytes.length);
+        } else if (!duplicate && (!this._snapshots || this._snapshots.append(bytes))) {
           this._pipe.append(bytes);
           appended += bytes.byteLength;
           this._accountedBytes += bytes.byteLength;
           if (start != null && segmentEnd != null) addCovered(this._covered, start, segmentEnd);
         }
-        if (this._mp4.hasMediaSegment || hasWebMCluster) this._hasMediaSegment = true;
+        if (this._mp4.hasMediaSegment) this._hasMediaSegment = true;
         if (segmentEnd != null) {
           if (!this._hasSegmentTimeline) this._end = segmentEnd;
           else this._end = Math.max(this._end, segmentEnd);
@@ -548,10 +557,66 @@ export function createMediaSourceScope({ origin, schedule, DOMException, onAppen
       });
     }
 
+    /** Complete finite Clusters, or complete Blocks from an unknown-size
+     * live Cluster, enter the decoder and contribute buffered ranges.
+     * Retries may be split differently or share an append with new media;
+     * comparing complete elements handles both cases.
+     */
+    _appendWebM(elements, incoming = 0) {
+      let retained = incoming, latest = null;
+      for (const { id, bytes, cluster, closedCluster } of elements) {
+        if (closedCluster) {
+          if (!closedCluster.accepted) retained -= closedCluster.prefix.reduce((sum, part) => sum + part.length, 0);
+          continue;
+        }
+        const end = inspectWebMAppend(bytes, this._webm, cluster?.time);
+        const start = this._webm.appendStart;
+        if (id === 0x1f43b675) {
+          this._hasMediaSegment = true;
+          if (end != null) latest = Math.max(latest ?? end, end);
+          if (start != null && end != null) {
+            // Different tracks can carry samples at the same timestamp.
+            // In particular, incremental unknown-size Clusters expose one
+            // Block at a time; an audio Block must not discard a video Block.
+            const tracks = this._webm.appendTracks;
+            if (tracks.size && [...tracks].every(([track, range]) => covers(this._webmCovered.get(track) ?? [], ...range))) {
+              retained -= bytes.length; continue;
+            }
+            for (const [track, range] of tracks) {
+              if (!this._webmCovered.has(track)) this._webmCovered.set(track, []);
+              addCovered(this._webmCovered.get(track), ...range);
+            }
+            addCovered(this._covered, start, end);
+          }
+        }
+        if (cluster && this._webmCluster !== cluster.token) {
+          for (const prefix of cluster.prefix) this._pipe.append(prefix);
+          this._webmCluster = cluster.token;
+          cluster.token.accepted = true;
+        }
+        this._pipe.append(bytes);
+      }
+      // A retry can span remove(), which may already have released the
+      // quota charged for its first pieces. Refund only this buffer's
+      // remaining charge, never another SourceBuffer's bytes.
+      retained = Math.max(-this._accountedBytes, retained);
+      appended += retained;
+      this._accountedBytes += retained;
+      return latest;
+    }
+
     abort() {
       if (this._source.readyState !== "open") {
         throw new DOMException("MediaSource is not open.", "InvalidStateError");
       }
+      // Reset parser input even between append operations: the next append
+      // may start a new initialization instead of completing this element.
+      if (this._webmStream) {
+        const released = Math.min(this._accountedBytes, this._webmStream.pendingSize);
+        this._webmStream.reset();
+        this._accountedBytes -= released;
+        appended -= released;
+      }
       if (!this._updating) return;
       this._operation += 1;
       this._updating = false;
@@ -683,7 +748,13 @@ export function createMediaSourceScope({ origin, schedule, DOMException, onAppen
       }
       for (const buffer of this._buffers) {
         if (error) buffer._pipe.fail(new Error(error));
-        else buffer._pipe.finish();
+        else {
+          if (buffer._webmStream) {
+            const end = buffer._appendWebM(buffer._webmStream.finish());
+            if (end != null) { buffer._end = Math.max(buffer._end, end); buffer._hasSegmentTimeline = true; }
+          }
+          buffer._pipe.finish();
+        }
       }
       if (!Number.isFinite(this._duration)) {
         const end = Math.max(0, ...this._buffers.map((buffer) => buffer._end));