@bendyline/squisq-video-react 2.4.11 → 2.4.13

package/dist/{chunk-4NI2QIFE.js → chunk-2C4BEAWT.js}

@@ -1,10 +1,256 @@
+import {
+  BlobSource,
+  Input,
+  MATROSKA,
+  MP4,
+  QTFF,
+  VideoSampleSink,
+  WEBM
+} from "./chunk-4GFZ3GUE.js";
+
 // src/hooks/useFrameCapture.ts
 import { createElement } from "react";
 import { createRoot } from "react-dom/client";
 import { useRef, useCallback, useMemo } from "react";
+import { parseMediaCrop } from "@bendyline/squisq/mediaEdit";
 import { resolveDashboardStyleId } from "@bendyline/squisq/doc";
 import { DocPlayer, MediaContext } from "@bendyline/squisq-react";
 import html2canvas from "html2canvas";
+
+// src/hooks/captureVideoFrames.ts
+var FRAME_TIME_EPSILON_SECONDS = 1e-4;
+var MAX_SEQUENTIAL_DECODE_GAP_SECONDS = 3;
+var DECODABLE_SOURCE_URL = /^(?:blob|data):/i;
+var INPUT_FORMATS = [MP4, QTFF, WEBM, MATROSKA];
+var decodedFrames = /* @__PURE__ */ new WeakMap();
+function getDecodedCaptureFrame(video) {
+  const frame = decodedFrames.get(video);
+  if (!frame || frame.timestamp === null) return null;
+  return {
+    canvas: frame.canvas,
+    width: frame.width,
+    height: frame.height,
+    timestamp: frame.timestamp
+  };
+}
+function resolveCaptureVideoImage(video) {
+  const decoded = getDecodedCaptureFrame(video);
+  if (decoded) return { source: decoded.canvas, width: decoded.width, height: decoded.height };
+  return { source: video, width: video.videoWidth, height: video.videoHeight };
+}
+function captureVideoSource(video) {
+  return video.currentSrc || video.src;
+}
+var DecodedVideoCursor = class _DecodedVideoCursor {
+  /**
+   * @param source Sequential sample iterator factory for one video track.
+   * @param releaseSource Frees the demuxer behind `source`.
+   */
+  constructor(source, releaseSource, canvas, width, height) {
+    this.source = source;
+    this.releaseSource = releaseSource;
+    this.iterator = null;
+    this.lookahead = null;
+    /** True while showing a track's first frame for a target before it. */
+    this.showingLeadingFrame = false;
+    this.queue = Promise.resolve();
+    this.disposed = false;
+    canvas.width = width;
+    canvas.height = height;
+    this.frame = { canvas, width, height, timestamp: null };
+  }
+  /** Open a local source, or null when it has no decodable video track. */
+  static async open(blob, ownerDocument) {
+    const input = new Input({ source: new BlobSource(blob), formats: INPUT_FORMATS });
+    try {
+      const track = await input.getPrimaryVideoTrack();
+      if (!track || !await track.canDecode()) {
+        input.dispose();
+        return null;
+      }
+      const width = track.displayWidth;
+      const height = track.displayHeight;
+      if (width <= 0 || height <= 0) {
+        input.dispose();
+        return null;
+      }
+      return new _DecodedVideoCursor(
+        new VideoSampleSink(track),
+        () => input.dispose(),
+        ownerDocument.createElement("canvas"),
+        width,
+        height
+      );
+    } catch {
+      input.dispose();
+      return null;
+    }
+  }
+  /** Draw the frame displayed at `targetTime` (seconds). Calls run in order. */
+  selectFrame(targetTime) {
+    const selection = this.queue.then(() => this.advanceTo(targetTime));
+    this.queue = selection.catch(() => void 0);
+    return selection;
+  }
+  dispose() {
+    if (this.disposed) return;
+    this.disposed = true;
+    this.lookahead?.close();
+    this.lookahead = null;
+    void this.iterator?.return();
+    this.iterator = null;
+    this.releaseSource();
+    this.frame.canvas.width = 0;
+    this.frame.canvas.height = 0;
+    this.frame.timestamp = null;
+  }
+  async advanceTo(targetTime) {
+    if (this.disposed) throw new Error("Decoded capture video was released.");
+    const target = targetTime + FRAME_TIME_EPSILON_SECONDS;
+    const shown = this.frame.timestamp;
+    const continues = this.iterator !== null && shown !== null && target - shown <= MAX_SEQUENTIAL_DECODE_GAP_SECONDS && (target >= shown || this.showingLeadingFrame);
+    if (continues && target < shown) return;
+    let candidate = null;
+    try {
+      if (!continues) {
+        await this.restartAt(target);
+        candidate = await this.pull();
+        if (!candidate) return;
+      }
+      for (; ; ) {
+        const next = this.lookahead ?? await this.pull();
+        this.lookahead = null;
+        if (!next) break;
+        if (next.timestamp > target) {
+          this.lookahead = next;
+          break;
+        }
+        candidate?.close();
+        candidate = next;
+      }
+      if (candidate && !this.disposed) {
+        this.present(candidate);
+        this.showingLeadingFrame = candidate.timestamp > target;
+      }
+    } finally {
+      candidate?.close();
+    }
+  }
+  async restartAt(target) {
+    this.lookahead?.close();
+    this.lookahead = null;
+    await this.iterator?.return();
+    this.iterator = this.source.samples(target);
+  }
+  async pull() {
+    const result = await this.iterator?.next();
+    return result && !result.done ? result.value : null;
+  }
+  present(sample) {
+    const { frame } = this;
+    if (sample.displayWidth !== frame.width || sample.displayHeight !== frame.height) {
+      frame.width = sample.displayWidth;
+      frame.height = sample.displayHeight;
+      frame.canvas.width = frame.width;
+      frame.canvas.height = frame.height;
+    }
+    const context = frame.canvas.getContext("2d");
+    if (!context) throw new Error("Could not create the decoded video frame canvas context");
+    sample.draw(context, 0, 0, frame.width, frame.height);
+    frame.timestamp = sample.timestamp;
+  }
+};
+var CaptureVideoFrameRegistry = class {
+  constructor() {
+    this.bindings = /* @__PURE__ */ new Map();
+    this.blobs = /* @__PURE__ */ new Map();
+    /** Sources that failed to open or decode; they keep the element path. */
+    this.undecodableSources = /* @__PURE__ */ new Set();
+    this.opening = /* @__PURE__ */ new Map();
+    this.disposed = false;
+    this.selectFrame = async (video, targetTime) => {
+      const binding = this.bindings.get(video);
+      if (!binding || binding.src !== captureVideoSource(video)) return false;
+      try {
+        await binding.cursor.selectFrame(targetTime);
+        return true;
+      } catch {
+        this.undecodableSources.add(binding.src);
+        this.release(video);
+        return false;
+      }
+    };
+  }
+  /**
+   * Bind decoders to every video under `root` that lacks one for its current
+   * source, and release bindings whose element left the DOM or changed
+   * source. Returns how many elements were newly bound: their pixels now
+   * come from the decoder, so a caller must re-run its seek barrier.
+   */
+  async attach(root) {
+    for (const [video, binding] of this.bindings) {
+      if (!video.isConnected || captureVideoSource(video) !== binding.src) this.release(video);
+    }
+    const results = await Promise.all(
+      Array.from(root.querySelectorAll("video")).filter((video) => !this.bindings.has(video)).map((video) => this.bind(video))
+    );
+    return results.filter(Boolean).length;
+  }
+  /** Whether capture draws this element from decoded frames. */
+  isDecoded(video) {
+    return this.bindings.has(video);
+  }
+  dispose() {
+    this.disposed = true;
+    for (const video of [...this.bindings.keys()]) this.release(video);
+    this.blobs.clear();
+    this.opening.clear();
+  }
+  bind(video) {
+    const pending = this.opening.get(video);
+    if (pending) return pending;
+    const opening = this.open(video).finally(() => this.opening.delete(video));
+    this.opening.set(video, opening);
+    return opening;
+  }
+  async open(video) {
+    const src = captureVideoSource(video);
+    if (!src || !DECODABLE_SOURCE_URL.test(src) || this.undecodableSources.has(src)) return false;
+    const blob = await this.loadBlob(src);
+    const cursor = blob ? await DecodedVideoCursor.open(blob, video.ownerDocument) : null;
+    if (!cursor) {
+      this.undecodableSources.add(src);
+      return false;
+    }
+    if (this.disposed || !video.isConnected || captureVideoSource(video) !== src) {
+      cursor.dispose();
+      return false;
+    }
+    this.bindings.set(video, { src, cursor });
+    decodedFrames.set(video, cursor.frame);
+    video.pause();
+    video.dataset.captureDecoded = "true";
+    return true;
+  }
+  loadBlob(src) {
+    let blob = this.blobs.get(src);
+    if (!blob) {
+      blob = fetch(src).then((response) => response.ok ? response.blob() : null).catch(() => null);
+      this.blobs.set(src, blob);
+    }
+    return blob;
+  }
+  release(video) {
+    const binding = this.bindings.get(video);
+    if (!binding) return;
+    this.bindings.delete(video);
+    if (decodedFrames.get(video) === binding.cursor.frame) decodedFrames.delete(video);
+    delete video.dataset.captureDecoded;
+    binding.cursor.dispose();
+  }
+};
+
+// src/hooks/useFrameCapture.ts
 var MIME_MAP = {
   jpg: "image/jpeg",
   jpeg: "image/jpeg",
@@ -21,7 +267,10 @@ var MIME_MAP = {
   webm: "video/webm"
 };
 var VISUAL_UPDATE_FALLBACK_MS = 100;
+var CAPTURE_URL_COMMIT_MAX_WAITS = 10;
 var CAPTURE_ASSET_TIMEOUT_MS = 15e3;
+var RENDER_API_TIMEOUT_MS = 15e3;
+var CAPTURE_SETUP_TIMEOUT_MS = 6e4;
 var RENDER_TIME_EPSILON_SECONDS = 1e-6;
 var POTENTIALLY_ANIMATED_IMAGE_URL = /(?:^data:image\/(?:gif|webp|avif)[;,]|\.(?:gif|webp|avif)(?:[?#]|$))/i;
 var CAPTURE_SVG_SELECTOR = "svg.block-svg";
@@ -147,6 +396,7 @@ function waitForCaptureVideoState(video, description, isReady, update) {
   });
 }
 function captureVideoNeedsPriming(video, primedVideos) {
+  if (video.dataset.captureDecoded === "true") return false;
   if (video.readyState >= HTMLMediaElement.HAVE_METADATA && video.videoWidth <= 0 && video.videoHeight <= 0) {
     return false;
   }
@@ -172,8 +422,8 @@ async function primeIndeterminateCaptureVideos(captureRoot, primedVideos = /* @_
         primedVideos.add(video);
         return;
       }
+      video.dataset.captureSequential = "true";
       if (Number.isFinite(video.duration)) {
-        video.dataset.captureSequential = "true";
         primedVideos.add(video);
         return;
       }
@@ -196,7 +446,6 @@ async function primeIndeterminateCaptureVideos(captureRoot, primedVideos = /* @_
           video.currentTime = reachableRestoreTime;
         }
       );
-      video.dataset.captureSequential = "true";
       primedVideos.add(video);
       primedCount += 1;
     })
@@ -240,6 +489,7 @@ function createInlineProvider(images) {
 }
 function createCaptureMediaResolutionTracker(provider) {
   const pending = /* @__PURE__ */ new Set();
+  const resolvedUrls = /* @__PURE__ */ new Map();
   let resolutionGeneration = 0;
   let observedGeneration = 0;
   const trackedProvider = {
@@ -247,7 +497,8 @@ function createCaptureMediaResolutionTracker(provider) {
       resolutionGeneration += 1;
       const resolution = provider.resolveUrl(relativePath);
       const completion = resolution.then(
-        () => {
+        (url) => {
+          resolvedUrls.set(relativePath, url);
           pending.delete(completion);
         },
         () => {
@@ -274,13 +525,37 @@ function createCaptureMediaResolutionTracker(provider) {
       const changed = resolutionGeneration !== observedGeneration;
       observedGeneration = resolutionGeneration;
       return changed;
-    }
+    },
+    resolvedUrls: () => resolvedUrls
   };
 }
-async function waitForCaptureMediaResolutions(tracker) {
-  while (await tracker?.waitForSettled()) {
+function stripRelativePrefix(path) {
+  return path.replace(/^(?:\.\/)+/, "");
+}
+function showsUncommittedMediaUrl(root, resolved) {
+  const mapped = /* @__PURE__ */ new Set();
+  for (const [path, url] of resolved) {
+    if (url !== path) mapped.add(stripRelativePrefix(path));
+  }
+  if (mapped.size === 0) return false;
+  return Array.from(root.querySelectorAll("img[src], video[src], audio[src], source[src]")).some(
+    (element) => mapped.has(stripRelativePrefix(element.getAttribute("src") ?? ""))
+  );
+}
+async function waitForCaptureMediaResolutions(tracker, captureRoot) {
+  if (!tracker) return;
+  let changed = false;
+  while (await tracker.waitForSettled()) {
+    changed = true;
     await waitForVisualUpdate();
   }
+  if (!changed || !captureRoot) return;
+  for (let attempt = 0; attempt < CAPTURE_URL_COMMIT_MAX_WAITS && showsUncommittedMediaUrl(captureRoot, tracker.resolvedUrls()); attempt++) {
+    await waitForVisualUpdate();
+    while (await tracker.waitForSettled()) {
+      await waitForVisualUpdate();
+    }
+  }
 }
 function shouldIgnoreCaptureSibling(element, captureRoot) {
   const { head } = captureRoot.ownerDocument;
@@ -350,6 +625,30 @@ function videoFrameRect(sourceWidth, sourceHeight, destinationWidth, destination
     dh: destinationHeight
   };
 }
+function croppedVideoFrameRect(sourceWidth, sourceHeight, crop, destinationWidth, destinationHeight, objectFit) {
+  if (!crop) {
+    return videoFrameRect(
+      sourceWidth,
+      sourceHeight,
+      destinationWidth,
+      destinationHeight,
+      objectFit
+    );
+  }
+  const cx = crop.x * sourceWidth;
+  const cy = crop.y * sourceHeight;
+  const rect = videoFrameRect(
+    crop.w * sourceWidth,
+    crop.h * sourceHeight,
+    destinationWidth,
+    destinationHeight,
+    objectFit
+  );
+  return { ...rect, sx: rect.sx + cx, sy: rect.sy + cy };
+}
+function videoCrop(video) {
+  return parseMediaCrop(video.getAttribute("data-crop") ?? void 0);
+}
 function prepareScheduledVideoClones(originalRoot, clonedRoot) {
   const captureFamilies = [
     {
@@ -381,15 +680,17 @@ function prepareScheduledVideoClones(originalRoot, clonedRoot) {
     canvas.dataset.videoCaptureClone = "true";
     const destinationWidth = Math.round(video.clientWidth || video.offsetWidth);
     const destinationHeight = Math.round(video.clientHeight || video.offsetHeight);
-    if (video.videoWidth <= 0 || video.videoHeight <= 0 || destinationWidth <= 0 || destinationHeight <= 0) {
+    const image = resolveCaptureVideoImage(video);
+    if (image.width <= 0 || image.height <= 0 || destinationWidth <= 0 || destinationHeight <= 0) {
       return;
     }
     try {
       const view = video.ownerDocument.defaultView;
       const objectFit = video.style.objectFit || view?.getComputedStyle(video).objectFit || "fill";
-      const frame = videoFrameRect(
-        video.videoWidth,
-        video.videoHeight,
+      const frame = croppedVideoFrameRect(
+        image.width,
+        image.height,
+        videoCrop(video),
         destinationWidth,
         destinationHeight,
         objectFit
@@ -399,7 +700,7 @@ function prepareScheduledVideoClones(originalRoot, clonedRoot) {
       canvas.width = destinationWidth;
       canvas.height = destinationHeight;
       context.drawImage(
-        video,
+        image.source,
         frame.sx,
         frame.sy,
         frame.sw,
@@ -650,7 +951,8 @@ function releaseCaptureCloneCanvases(canvases) {
   });
 }
 function scheduledVideoIsVisual(video) {
-  return video.videoWidth > 0 && video.videoHeight > 0 && video.dataset.active === "true";
+  const { width, height } = resolveCaptureVideoImage(video);
+  return width > 0 && height > 0 && video.dataset.active === "true";
 }
 function scheduledVideoPresentation(video) {
   return video.closest(SCHEDULED_MEDIA_SELECTOR)?.dataset.presentation;
@@ -786,9 +1088,11 @@ function drawScheduledVideosOnto(destination, captureRoot, videos) {
       0,
       outerRadius - Math.max(borderLeft * scaleX, borderTop * scaleY)
     );
-    const source = videoFrameRect(
-      video.videoWidth,
-      video.videoHeight,
+    const image = resolveCaptureVideoImage(video);
+    const source = croppedVideoFrameRect(
+      image.width,
+      image.height,
+      videoCrop(video),
       contentWidth,
       contentHeight,
       style.objectFit || "fill"
@@ -806,7 +1110,7 @@ function drawScheduledVideosOnto(destination, captureRoot, videos) {
     addRoundedRect(context, innerX, innerY, innerWidth, innerHeight, innerRadius);
     context.clip();
     context.drawImage(
-      video,
+      image.source,
       source.sx,
       source.sy,
       source.sw,
@@ -852,10 +1156,20 @@ function getFrameVisualStateKey(captureRoot, timelineTime, options = {}) {
   });
   if (POTENTIALLY_ANIMATED_IMAGE_URL.test(markup)) needsTimelineKey = true;
   const videoStates = Array.from(captureRoot.querySelectorAll("video")).filter(
-    (video) => video.videoWidth > 0 && video.videoHeight > 0 && (!options.ignoreScheduledVideoFrames || !video.closest(SCHEDULED_MEDIA_SELECTOR))
-  ).map(
-    (video) => `${video.currentSrc || video.src}:${finiteMediaTime(video.currentTime)}:${video.readyState}:${video.videoWidth}x${video.videoHeight}`
-  );
+    (video) => !options.ignoreScheduledVideoFrames || !video.closest(SCHEDULED_MEDIA_SELECTOR)
+  ).flatMap((video) => {
+    const src = video.currentSrc || video.src;
+    const decoded = getDecodedCaptureFrame(video);
+    if (decoded) {
+      return [
+        `${src}:decoded:${finiteMediaTime(decoded.timestamp)}:${decoded.width}x${decoded.height}`
+      ];
+    }
+    if (video.videoWidth <= 0 || video.videoHeight <= 0) return [];
+    return [
+      `${src}:${finiteMediaTime(video.currentTime)}:${video.readyState}:${video.videoWidth}x${video.videoHeight}`
+    ];
+  });
   if (captureRoot.querySelector(
     "canvas, iframe, object, embed, animate, animateMotion, animateTransform, set"
   )) {
@@ -886,13 +1200,16 @@ function useFrameCapture() {
   const captureImageDataUrlsRef = useRef(/* @__PURE__ */ new Map());
   const captureSvgRasterCacheRef = useRef(createCaptureSvgRasterCache());
   const primedCaptureVideosRef = useRef(/* @__PURE__ */ new WeakSet());
+  const videoFramesRef = useRef(null);
   const dimensionsRef = useRef({ width: 1920, height: 1080 });
   const captionLayerCanvasRef = useRef(null);
   const captionLayerKeyRef = useRef(null);
   const captionLayerHasContentRef = useRef(false);
   const init = useCallback(
     async (doc, renderOptions, captionMode) => {
-      if (rootRef.current || containerRef.current || mediaProviderRef.current || captureCanvasRef.current || captureBaseCanvasRef.current) {
+      if (rootRef.current || containerRef.current || mediaProviderRef.current || captureCanvasRef.current || captureBaseCanvasRef.current || videoFramesRef.current) {
+        const oldVideoFrames = videoFramesRef.current;
+        videoFramesRef.current = null;
         const oldRoot = rootRef.current;
         const oldContainer = containerRef.current;
         const oldMediaProvider = mediaProviderRef.current;
@@ -922,6 +1239,7 @@ function useFrameCapture() {
           setTimeout(() => {
             if (oldRoot) oldRoot.unmount();
             if (oldContainer) oldContainer.remove();
+            oldVideoFrames?.dispose();
             if (oldOwnsMediaProvider) oldMediaProvider?.dispose();
             if (oldCaptureCanvas) {
               oldCaptureCanvas.width = 0;
@@ -979,6 +1297,8 @@ function useFrameCapture() {
       ownsMediaProviderRef.current = !!renderOptions.images;
       const root = createRoot(renderRoot);
       rootRef.current = root;
+      const videoFrames = new CaptureVideoFrameRegistry();
+      videoFramesRef.current = videoFrames;
       const captionsEnabled = captionMode !== void 0 && captionMode !== "off";
       const captionStyle = captionMode === "social" ? "social" : "standard";
       let resolveRenderAPI;
@@ -1013,6 +1333,7 @@ function useFrameCapture() {
         coverSlideTemplate: renderOptions.coverSlideTemplate,
         captionsEnabled,
         captionStyle,
+        renderVideoFrameSelector: videoFrames.selectFrame,
         onRenderAPIReady: (api) => {
           if (containerRef.current !== container) return;
           renderAPIRef.current = api;
@@ -1032,7 +1353,7 @@ function useFrameCapture() {
         root.render(playerElement);
       }
       return new Promise((resolve, reject) => {
-        const timeout = setTimeout(() => {
+        const apiTimeout = setTimeout(() => {
           const api = renderAPIRef.current;
           const hasSeek = typeof api?.seekTo === "function";
           const hasDur = typeof api?.getDuration === "function";
@@ -1040,23 +1361,36 @@ function useFrameCapture() {
           const hasPlayer = rootEl ? rootEl.querySelector(".doc-player") !== null : false;
           reject(
             new Error(
-              `Render API did not initialize within 15s. seekTo=${hasSeek}, getDuration=${hasDur}, player=${hasPlayer}, root=${!!rootEl}`
+              `Render API did not initialize within ${RENDER_API_TIMEOUT_MS / 1e3}s. seekTo=${hasSeek}, getDuration=${hasDur}, player=${hasPlayer}, root=${!!rootEl}`
             )
           );
-        }, 15e3);
+        }, RENDER_API_TIMEOUT_MS);
         void renderAPIReady.then(async (api) => {
+          clearTimeout(apiTimeout);
+          let stage = "resolving media URLs";
+          const setupTimeout = setTimeout(() => {
+            reject(
+              new Error(
+                `Frame capture setup did not finish within ${CAPTURE_SETUP_TIMEOUT_MS / 1e3}s while ${stage}.`
+              )
+            );
+          }, CAPTURE_SETUP_TIMEOUT_MS);
           try {
             const captureRoot = container.querySelector("#squisq-capture-root");
             if (!(captureRoot instanceof HTMLElement)) {
               throw new Error("Capture root element not found after player initialization.");
             }
-            await waitForCaptureMediaResolutions(mediaResolutionTrackerRef.current);
+            await waitForCaptureMediaResolutions(mediaResolutionTrackerRef.current, captureRoot);
+            stage = "loading fonts and images";
             await waitForCaptureAssets(captureRoot, decodedImagesRef.current);
+            stage = "opening video decoders";
+            await videoFrames.attach(captureRoot);
+            stage = "indexing video sources";
             await primeIndeterminateCaptureVideos(captureRoot, primedCaptureVideosRef.current);
-            clearTimeout(timeout);
+            clearTimeout(setupTimeout);
             resolve(api.getDuration());
           } catch (assetError) {
-            clearTimeout(timeout);
+            clearTimeout(setupTimeout);
             reject(assetError);
           }
         });
@@ -1085,16 +1419,18 @@ function useFrameCapture() {
       if (!root) {
         throw new Error("Capture root element not found");
       }
-      await primeIndeterminateCaptureVideos(root, primedCaptureVideosRef.current);
+      const videoFrames = videoFramesRef.current;
+      const prepareCaptureVideos = async () => (await videoFrames?.attach(root) ?? 0) + await primeIndeterminateCaptureVideos(root, primedCaptureVideosRef.current);
+      await prepareCaptureVideos();
       try {
         await api.seekTo(time);
       } catch (seekError) {
-        if (!await primeIndeterminateCaptureVideos(root, primedCaptureVideosRef.current)) {
+        if (!await prepareCaptureVideos()) {
           throw seekError;
         }
         await api.seekTo(time);
       }
-      if (await primeIndeterminateCaptureVideos(root, primedCaptureVideosRef.current)) {
+      if (await prepareCaptureVideos()) {
         await api.seekTo(time);
       }
       const renderedTime = api.getRenderedTime();
@@ -1103,7 +1439,7 @@ function useFrameCapture() {
           `Player committed ${renderedTime.toFixed(6)}s while capture requested ${time.toFixed(6)}s.`
         );
       }
-      await waitForCaptureMediaResolutions(mediaResolutionTrackerRef.current);
+      await waitForCaptureMediaResolutions(mediaResolutionTrackerRef.current, root);
       await waitForCaptureAssets(root, decodedImagesRef.current);
       const compositePlan = resolveScheduledVideoCompositePlan(root, {
         includeFullFrameOverlays: true
@@ -1280,6 +1616,8 @@ function useFrameCapture() {
     releaseCaptureSvgRasterCache(captureSvgRasterCacheRef.current);
     captureSvgRasterCacheRef.current = createCaptureSvgRasterCache();
     primedCaptureVideosRef.current = /* @__PURE__ */ new WeakSet();
+    videoFramesRef.current?.dispose();
+    videoFramesRef.current = null;
     renderAPIRef.current = null;
   }, []);
   return useMemo(