@remotion/promo-pages 4.0.446 → 4.0.448

package/dist/Homepage.js

@@ -1568,7 +1568,8 @@ var useResolvedVideoConfig = (preferredCompositionId) => {
           defaultOutName: null,
           defaultVideoImageFormat: null,
           defaultPixelFormat: null,
-          defaultProResProfile: null
+          defaultProResProfile: null,
+          defaultSampleRate: null
         }
       };
     }
@@ -2042,7 +2043,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.446";
+var VERSION = "4.0.448";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -2281,7 +2282,8 @@ var useUnsafeVideoConfig = () => {
       defaultOutName,
       defaultVideoImageFormat,
       defaultPixelFormat,
-      defaultProResProfile
+      defaultProResProfile,
+      defaultSampleRate
     } = video;
     return {
       id,
@@ -2295,7 +2297,8 @@ var useUnsafeVideoConfig = () => {
       defaultOutName,
       defaultVideoImageFormat,
       defaultPixelFormat,
-      defaultProResProfile
+      defaultProResProfile,
+      defaultSampleRate
     };
   }, [ctxDuration, ctxHeight, ctxWidth, video]);
 };
@@ -6629,6 +6632,7 @@ var validateCalculated = ({
   const defaultVideoImageFormat = calculated?.defaultVideoImageFormat;
   const defaultPixelFormat = calculated?.defaultPixelFormat;
   const defaultProResProfile = calculated?.defaultProResProfile;
+  const defaultSampleRate = calculated?.defaultSampleRate;
   return {
     width,
     height,
@@ -6638,7 +6642,8 @@ var validateCalculated = ({
     defaultOutName,
     defaultVideoImageFormat,
     defaultPixelFormat,
-    defaultProResProfile
+    defaultProResProfile,
+    defaultSampleRate
   };
 };
 var resolveVideoConfig = ({
@@ -6670,7 +6675,8 @@ var resolveVideoConfig = ({
         defaultOutName,
         defaultVideoImageFormat,
         defaultPixelFormat,
-        defaultProResProfile
+        defaultProResProfile,
+        defaultSampleRate
       } = validateCalculated({
         calculated: c2,
         compositionDurationInFrames,
@@ -6691,7 +6697,8 @@ var resolveVideoConfig = ({
         defaultOutName: defaultOutName ?? null,
         defaultVideoImageFormat: defaultVideoImageFormat ?? null,
         defaultPixelFormat: defaultPixelFormat ?? null,
-        defaultProResProfile: defaultProResProfile ?? null
+        defaultProResProfile: defaultProResProfile ?? null,
+        defaultSampleRate: defaultSampleRate ?? null
       };
     });
   }
@@ -6713,7 +6720,8 @@ var resolveVideoConfig = ({
       defaultOutName: null,
       defaultVideoImageFormat: null,
       defaultPixelFormat: null,
-      defaultProResProfile: null
+      defaultProResProfile: null,
+      defaultSampleRate: null
     };
   }
   return {
@@ -6725,7 +6733,8 @@ var resolveVideoConfig = ({
     defaultOutName: calculatedProm.defaultOutName ?? null,
     defaultVideoImageFormat: calculatedProm.defaultVideoImageFormat ?? null,
     defaultPixelFormat: calculatedProm.defaultPixelFormat ?? null,
-    defaultProResProfile: calculatedProm.defaultProResProfile ?? null
+    defaultProResProfile: calculatedProm.defaultProResProfile ?? null,
+    defaultSampleRate: calculatedProm.defaultSampleRate ?? null
   };
 };
 var resolveVideoConfigOrCatch = (params) => {
@@ -23412,7 +23421,7 @@ var GitHubStars = () => {
             width: "45px"
           }),
           /* @__PURE__ */ jsx50(StatItemContent, {
-            content: "41k",
+            content: "42k",
             width: "80px",
             fontSize: "2.5rem",
             fontWeight: "bold"
@@ -27223,6 +27232,7 @@ var SharedPlayerContexts = ({
         defaultOutName: null,
         defaultPixelFormat: null,
         defaultProResProfile: null,
+        defaultSampleRate: null,
         defaultVideoImageFormat: null,
         durationInFrames,
         fps,
@@ -29037,7 +29047,7 @@ var isAlreadyQueued = (time, queuedPeriod) => {
   return time >= queuedPeriod.from && time < queuedPeriod.until;
 };
 var AUDIO_PRIMING_SECONDS = 0.5;
-var PREDECODE_AHEAD_SECONDS = 8;
+var PREDECODE_AHEAD_SECONDS = 2;
 function makePredecodingIterator(inner2) {
   const buffer = [];
   let consumerEndTime = 0;
@@ -29216,7 +29226,7 @@ var makePrewarmedAudioIteratorCache = (audioSink) => {
     destroy
   };
 };
-var MAX_BUFFER_AHEAD_SECONDS = 8;
+var MAX_BUFFER_AHEAD_SECONDS = 2;
 var audioIteratorManager = ({
   audioTrack,
   delayPlaybackHandleIfNotPremounting,
@@ -29731,8 +29741,10 @@ var videoIteratorManager = ({
   let framesRendered = 0;
   let currentDelayHandle = null;
   if (canvas) {
-    canvas.width = videoTrack.displayWidth;
-    canvas.height = videoTrack.displayHeight;
+    if (canvas.width !== videoTrack.displayWidth || canvas.height !== videoTrack.displayHeight) {
+      canvas.width = videoTrack.displayWidth;
+      canvas.height = videoTrack.displayHeight;
+    }
   }
   const canvasSink = new CanvasSink(videoTrack, {
     poolSize: 2,
@@ -31831,7 +31843,12 @@ var applyVolume = (array, volume) => {
   }
 };
 var TARGET_NUMBER_OF_CHANNELS = 2;
-var TARGET_SAMPLE_RATE = 48000;
+var getTargetSampleRate = () => {
+  if (typeof window !== "undefined" && window.remotion_sampleRate) {
+    return window.remotion_sampleRate;
+  }
+  return 48000;
+};
 var fixFloatingPoint = (value) => {
   if (value % 1 < 0.0000001) {
     return Math.floor(value);
@@ -31960,7 +31977,7 @@ var convertAudioData = ({
     sampleRate: currentSampleRate,
     numberOfFrames
   } = audioData;
-  const ratio = currentSampleRate / TARGET_SAMPLE_RATE;
+  const ratio = currentSampleRate / getTargetSampleRate();
   const frameOffset = Math.floor(fixFloatingPoint2(trimStartInSeconds * audioData.sampleRate));
   const unroundedFrameCount = numberOfFrames - trimEndInSeconds * audioData.sampleRate - frameOffset;
   const frameCount = isLast ? ceilButNotIfFloatingPointIssue(unroundedFrameCount) : Math.round(unroundedFrameCount);
@@ -32007,7 +32024,7 @@ var convertAudioData = ({
       data: srcChannels,
       numberOfFrames: newNumberOfFrames,
       timestamp: audioDataTimestamp * 1e6 + fixFloatingPoint2(timestampOffsetMicroseconds),
-      durationInMicroSeconds: fixFloatingPoint2(newNumberOfFrames / TARGET_SAMPLE_RATE * 1e6)
+      durationInMicroSeconds: fixFloatingPoint2(newNumberOfFrames / getTargetSampleRate() * 1e6)
     };
   }
   resampleAudioData({
@@ -32021,7 +32038,7 @@ var convertAudioData = ({
     data,
     numberOfFrames: newNumberOfFrames,
     timestamp: audioDataTimestamp * 1e6 + fixFloatingPoint2(timestampOffsetMicroseconds),
-    durationInMicroSeconds: fixFloatingPoint2(newNumberOfFrames / TARGET_SAMPLE_RATE * 1e6)
+    durationInMicroSeconds: fixFloatingPoint2(newNumberOfFrames / getTargetSampleRate() * 1e6)
   };
   return newAudioData;
 };
@@ -32266,12 +32283,12 @@ var extractAudioInternal = async ({
       if (isFirstSample) {
         trimStartInSeconds = fixFloatingPoint2(timeInSeconds - sample.timestamp);
         if (trimStartInSeconds < 0) {
-          const silenceFrames = Math.ceil(fixFloatingPoint2(-trimStartInSeconds * TARGET_SAMPLE_RATE));
+          const silenceFrames = Math.ceil(fixFloatingPoint2(-trimStartInSeconds * getTargetSampleRate()));
           leadingSilence = {
             data: new Int16Array(silenceFrames * TARGET_NUMBER_OF_CHANNELS),
             numberOfFrames: silenceFrames,
             timestamp: timeInSeconds * 1e6,
-            durationInMicroSeconds: silenceFrames / TARGET_SAMPLE_RATE * 1e6
+            durationInMicroSeconds: silenceFrames / getTargetSampleRate() * 1e6
           };
           trimStartInSeconds = 0;
         }
@@ -32908,7 +32925,7 @@ var AudioForRendering2 = ({
           audio: environment.isClientSideRendering ? audio.data : Array.from(audio.data),
           frame: absoluteFrame,
           timestamp: audio.timestamp,
-          duration: audio.numberOfFrames / TARGET_SAMPLE_RATE * 1e6,
+          duration: audio.numberOfFrames / getTargetSampleRate() * 1e6,
           toneFrequency: toneFrequency ?? 1
         });
       }
@@ -33024,6 +33041,27 @@ var AudioInner = (props) => {
 };
 var Audio2 = Internals.wrapInSchema(AudioInner, audioSchema);
 Internals.addSequenceStackTraces(Audio2);
+var cache2 = new Map;
+var cacheVideoFrame = (src, sourceCanvas) => {
+  const { width, height } = sourceCanvas;
+  if (width === 0 || height === 0) {
+    return;
+  }
+  let cached = cache2.get(src);
+  if (!cached || cached.width !== width || cached.height !== height) {
+    cached = new OffscreenCanvas(width, height);
+    cache2.set(src, cached);
+  }
+  const ctx = cached.getContext("2d");
+  if (!ctx) {
+    return;
+  }
+  ctx.clearRect(0, 0, width, height);
+  ctx.drawImage(sourceCanvas, 0, 0);
+};
+var getCachedVideoFrame = (src) => {
+  return cache2.get(src) ?? null;
+};
 var OBJECT_FIT_CLASS_PATTERN = /\bobject-(contain|cover|fill|none|scale-down)\b/;
 var warnedStyle = false;
 var warnedClassName = false;
@@ -33079,7 +33117,8 @@ var VideoForPreviewAssertedShowing = ({
   onError,
   credentials,
   controls,
-  objectFit: objectFitProp
+  objectFit: objectFitProp,
+  _experimentalInitiallyDrawCachedFrame
 }) => {
   const src = usePreload22(unpreloadedSrc);
   const canvasRef = useRef212(null);
@@ -33156,6 +33195,44 @@ var VideoForPreviewAssertedShowing = ({
   const initialMuted = useRef212(effectiveMuted);
   const initialDurationInFrames = useRef212(videoConfig.durationInFrames);
   const initialSequenceOffset = useRef212(sequenceOffset);
+  const hasDrawnRealFrameRef = useRef212(false);
+  const isPremountingRef = useRef212(isPremounting);
+  isPremountingRef.current = isPremounting;
+  useLayoutEffect34(() => {
+    if (!_experimentalInitiallyDrawCachedFrame) {
+      return;
+    }
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    const cached = getCachedVideoFrame(src);
+    if (!cached) {
+      return;
+    }
+    canvas.width = cached.width;
+    canvas.height = cached.height;
+    const ctx = canvas.getContext("2d", {
+      alpha: true,
+      desynchronized: true
+    });
+    if (!ctx) {
+      return;
+    }
+    ctx.drawImage(cached, 0, 0);
+  }, [_experimentalInitiallyDrawCachedFrame, src]);
+  useLayoutEffect34(() => {
+    if (!_experimentalInitiallyDrawCachedFrame) {
+      return;
+    }
+    const canvas = canvasRef.current;
+    return () => {
+      if (!canvas || !hasDrawnRealFrameRef.current || isPremountingRef.current) {
+        return;
+      }
+      cacheVideoFrame(src, canvas);
+    };
+  }, [_experimentalInitiallyDrawCachedFrame, src]);
   useEffect312(() => {
     if (!sharedAudioContext)
       return;
@@ -33224,6 +33301,7 @@ var VideoForPreviewAssertedShowing = ({
         if (result.type === "success") {
           setMediaPlayerReady(true);
           setMediaDurationInSeconds(result.durationInSeconds);
+          hasDrawnRealFrameRef.current = true;
         }
       }).catch((error2) => {
         const [action, errorToUse] = callOnErrorAndResolve({
@@ -33261,6 +33339,7 @@ var VideoForPreviewAssertedShowing = ({
       }
       setMediaPlayerReady(false);
       setShouldFallbackToNativeVideo(false);
+      hasDrawnRealFrameRef.current = false;
     };
   }, [
     audioStreamIndex,
@@ -33566,7 +33645,7 @@ var VideoForRendering2 = ({
           audio: environment.isClientSideRendering ? audio.data : Array.from(audio.data),
           frame: absoluteFrame,
           timestamp: audio.timestamp,
-          duration: audio.numberOfFrames / TARGET_SAMPLE_RATE * 1e6,
+          duration: audio.numberOfFrames / getTargetSampleRate() * 1e6,
           toneFrequency
         });
       }
@@ -33759,7 +33838,8 @@ var InnerVideo = ({
   onError,
   credentials,
   controls,
-  objectFit
+  objectFit,
+  _experimentalInitiallyDrawCachedFrame
 }) => {
   const environment = useRemotionEnvironment();
   if (typeof src !== "string") {
@@ -33831,7 +33911,8 @@ var InnerVideo = ({
     onError,
     credentials,
     controls,
-    objectFit
+    objectFit,
+    _experimentalInitiallyDrawCachedFrame
   });
 };
 var VideoInner = ({
@@ -33863,6 +33944,7 @@ var VideoInner = ({
   credentials,
   controls,
   objectFit,
+  _experimentalInitiallyDrawCachedFrame,
   from,
   durationInFrames
 }) => {
@@ -33900,7 +33982,8 @@ var VideoInner = ({
       onError,
       credentials,
       controls,
-      objectFit: objectFit ?? "contain"
+      objectFit: objectFit ?? "contain",
+      _experimentalInitiallyDrawCachedFrame: _experimentalInitiallyDrawCachedFrame ?? false
     })
   });
 };
@@ -35208,7 +35291,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.446";
+var VERSION2 = "4.0.448";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -35624,7 +35707,6 @@ var handleArtifacts = () => {
   return { handle };
 };
 var TARGET_NUMBER_OF_CHANNELS2 = 2;
-var TARGET_SAMPLE_RATE2 = 48000;
 function mixAudio(waves, length2) {
   if (waves.length === 1 && waves[0].length === length2) {
     return waves[0];
@@ -35645,13 +35727,14 @@ function mixAudio(waves, length2) {
 var onlyInlineAudio = ({
   assets,
   fps,
-  timestamp
+  timestamp,
+  sampleRate
 }) => {
   const inlineAudio = assets.filter((asset) => asset.type === "inline-audio");
   if (inlineAudio.length === 0) {
     return null;
   }
-  const expectedLength = Math.round(TARGET_NUMBER_OF_CHANNELS2 * TARGET_SAMPLE_RATE2 / fps);
+  const expectedLength = Math.round(TARGET_NUMBER_OF_CHANNELS2 * sampleRate / fps);
   for (const asset of inlineAudio) {
     if (asset.toneFrequency !== 1) {
       throw new Error("Setting the toneFrequency is not supported yet in web rendering.");
@@ -35663,7 +35746,7 @@ var onlyInlineAudio = ({
     format: "s16",
     numberOfChannels: TARGET_NUMBER_OF_CHANNELS2,
     numberOfFrames: expectedLength / TARGET_NUMBER_OF_CHANNELS2,
-    sampleRate: TARGET_SAMPLE_RATE2,
+    sampleRate,
     timestamp
   });
 };
@@ -35764,6 +35847,80 @@ var createAudioSampleSource = ({
   });
   return { audioSampleSource, [Symbol.dispose]: () => audioSampleSource.close() };
 };
+var supportsNativeHtmlInCanvas = () => {
+  if (typeof document === "undefined") {
+    return false;
+  }
+  const ctx = document.createElement("canvas").getContext("2d");
+  return typeof ctx?.drawElementImage === "function";
+};
+var setupHtmlInCanvas = ({
+  wrapper,
+  div,
+  width: width2,
+  height: height2
+}) => {
+  if (!supportsNativeHtmlInCanvas()) {
+    return null;
+  }
+  const layoutCanvas = document.createElement("canvas");
+  layoutCanvas.layoutSubtree = true;
+  layoutCanvas.width = width2;
+  layoutCanvas.height = height2;
+  layoutCanvas.style.position = "absolute";
+  layoutCanvas.style.top = "0";
+  layoutCanvas.style.left = "0";
+  layoutCanvas.style.width = `${width2}px`;
+  layoutCanvas.style.height = `${height2}px`;
+  layoutCanvas.style.visibility = "visible";
+  const maybeCtx = layoutCanvas.getContext("2d");
+  if (!maybeCtx || typeof maybeCtx.drawElementImage !== "function") {
+    return null;
+  }
+  if (typeof layoutCanvas.requestPaint !== "function") {
+    return null;
+  }
+  wrapper.removeChild(div);
+  layoutCanvas.appendChild(div);
+  wrapper.appendChild(layoutCanvas);
+  return { layoutCanvas, ctx: maybeCtx };
+};
+var waitForPaint = (layoutCanvas) => {
+  return new Promise((resolve) => {
+    layoutCanvas.addEventListener("paint", () => resolve(), { once: true });
+    layoutCanvas.requestPaint();
+  });
+};
+var drawWithHtmlInCanvas = async ({
+  htmlInCanvasContext,
+  element,
+  scaledWidth,
+  scaledHeight
+}) => {
+  const { ctx, layoutCanvas } = htmlInCanvasContext;
+  await waitForPaint(layoutCanvas);
+  layoutCanvas.width = scaledWidth;
+  layoutCanvas.height = scaledHeight;
+  ctx.reset();
+  ctx.drawElementImage(element, 0, 0, scaledWidth, scaledHeight);
+  const offscreen = new OffscreenCanvas(scaledWidth, scaledHeight);
+  const offCtx = offscreen.getContext("2d");
+  if (!offCtx) {
+    throw new Error("Could not get offscreen context");
+  }
+  offCtx.drawImage(layoutCanvas, 0, 0);
+  return offCtx;
+};
+var teardownHtmlInCanvas = ({
+  htmlInCanvasContext,
+  wrapper,
+  div
+}) => {
+  const { layoutCanvas } = htmlInCanvasContext;
+  layoutCanvas.removeChild(div);
+  wrapper.removeChild(layoutCanvas);
+  wrapper.appendChild(div);
+};
 var UpdateTime = ({
   children,
   audioEnabled,
@@ -35876,7 +36033,8 @@ function createScaffold({
   audioEnabled,
   videoEnabled,
   defaultCodec,
-  defaultOutName
+  defaultOutName,
+  allowHtmlInCanvas
 }) {
   if (!ReactDOM6.createRoot) {
     throw new Error("@remotion/web-renderer requires React 18 or higher");
@@ -35902,6 +36060,7 @@ function createScaffold({
   const cleanupCSS = Internals.CSSUtils.injectCSS(Internals.CSSUtils.makeDefaultPreviewCSS(`.${scaffoldClassName}`, "white"));
   wrapper.appendChild(div);
   document.body.appendChild(wrapper);
+  const htmlInCanvasContext = allowHtmlInCanvas ? setupHtmlInCanvas({ wrapper, div, width: width2, height: height2 }) : null;
   const errorHolder = { error: null };
   const root = ReactDOM6.createRoot(div, {
     onUncaughtError: (err, errorInfo) => {
@@ -35962,7 +36121,8 @@ function createScaffold({
                 defaultOutName: defaultOutName ?? null,
                 defaultVideoImageFormat: null,
                 defaultPixelFormat: null,
-                defaultProResProfile: null
+                defaultProResProfile: null,
+                defaultSampleRate: null
               },
               folders: []
             },
@@ -35992,8 +36152,12 @@ function createScaffold({
     delayRenderScope,
     div,
     errorHolder,
+    htmlInCanvasContext,
     [Symbol.dispose]: () => {
       root.unmount();
+      if (htmlInCanvasContext) {
+        teardownHtmlInCanvas({ htmlInCanvasContext, wrapper, div });
+      }
       div.remove();
       wrapper.remove();
       cleanupCSS();
@@ -36867,6 +37031,7 @@ var calculateTransforms = ({
   let opacity = 1;
   let elementComputedStyle = null;
   let maskImageInfo = null;
+  let filterValue = null;
   while (parent) {
     const computedStyle = getComputedStyle(parent);
     if (parent === element) {
@@ -36874,6 +37039,16 @@ var calculateTransforms = ({
       opacity = parseFloat(computedStyle.opacity);
       const maskImageValue = getMaskImageValue(computedStyle);
       maskImageInfo = maskImageValue ? parseMaskImage(maskImageValue) : null;
+      const computedFilter = computedStyle.filter;
+      if (computedFilter && computedFilter !== "none") {
+        filterValue = computedFilter;
+        const originalFilter = parent.style.filter;
+        parent.style.filter = "none";
+        const parentRefFilter = parent;
+        toReset.push(() => {
+          parentRefFilter.style.filter = originalFilter;
+        });
+      }
       const originalMaskImage = parent.style.maskImage;
       const originalWebkitMaskImage = parent.style.webkitMaskImage;
       parent.style.maskImage = "none";
@@ -36937,6 +37112,7 @@ var calculateTransforms = ({
   }
   const needs3DTransformViaWebGL = !totalMatrix.is2D;
   const needsMaskImage = maskImageInfo !== null;
+  const needsFilter = filterValue !== null;
   return {
     dimensions,
     totalMatrix,
@@ -36952,7 +37128,8 @@ var calculateTransforms = ({
     precompositing: {
       needs3DTransformViaWebGL,
       needsMaskImage: maskImageInfo,
-      needsPrecompositing: Boolean(needs3DTransformViaWebGL || needsMaskImage)
+      needsFilter: filterValue,
+      needsPrecompositing: Boolean(needs3DTransformViaWebGL || needsMaskImage || needsFilter)
     }
   };
 };
@@ -38271,6 +38448,9 @@ var handle3dTransform = ({
   });
   return transformed;
 };
+var getPrecomposeRectForFilter = (element) => {
+  return getBiggestBoundingClientRect(element);
+};
 var getPrecomposeRectForMask = (element) => {
   const boundingRect = getBiggestBoundingClientRect(element);
   return boundingRect;
@@ -38351,6 +38531,12 @@ var processNode = async ({
       if (precompositing.needsMaskImage) {
         precomposeRect = roundToExpandRect(getPrecomposeRectForMask(element));
       }
+      if (precompositing.needsFilter) {
+        precomposeRect = roundToExpandRect(getWiderRectAndExpand({
+          firstRect: precomposeRect,
+          secondRect: getPrecomposeRectForFilter(element)
+        }));
+      }
       if (precompositing.needs3DTransformViaWebGL) {
         const tentativePrecomposeRect = getPrecomposeRectFor3DTransform({
           element,
@@ -38413,8 +38599,13 @@ var processNode = async ({
         }
       }
       const previousTransform = context.getTransform();
+      const previousFilter = context.filter;
       context.setTransform(new DOMMatrix);
+      if (precompositing.needsFilter) {
+        context.filter = precompositing.needsFilter;
+      }
       context.drawImage(drawable, 0, drawable.height - rectAfterTransforms.height, rectAfterTransforms.width, rectAfterTransforms.height, rectAfterTransforms.left - parentRect.x, rectAfterTransforms.top - parentRect.y, rectAfterTransforms.width, rectAfterTransforms.height);
+      context.filter = previousFilter;
       context.setTransform(previousTransform);
       Internals.Log.trace({
         logLevel,
@@ -38737,10 +38928,32 @@ var createLayer = async ({
   logLevel,
   internalState,
   onlyBackgroundClipText,
-  cutout
+  cutout,
+  htmlInCanvasContext,
+  onHtmlInCanvasLayerOutcome
 }) => {
   const scaledWidth = Math.ceil(cutout.width * scale);
   const scaledHeight = Math.ceil(cutout.height * scale);
+  if (!onlyBackgroundClipText && element instanceof HTMLElement && htmlInCanvasContext && onHtmlInCanvasLayerOutcome) {
+    try {
+      const offCtx = await drawWithHtmlInCanvas({
+        htmlInCanvasContext,
+        element,
+        scaledWidth,
+        scaledHeight
+      });
+      onHtmlInCanvasLayerOutcome({ native: true });
+      return offCtx;
+    } catch (err) {
+      const detail = err instanceof Error ? err.message : JSON.stringify(err);
+      onHtmlInCanvasLayerOutcome({
+        native: false,
+        reason: `drawElementImage failed (${detail}); falling back to the built-in DOM composer.`,
+        shouldWarn: true
+      });
+      Internals.Log.verbose({ logLevel, tag: "@remotion/web-renderer" }, "HTML-in-canvas capture failed, falling back to software compose", err);
+    }
+  }
   const canvas = new OffscreenCanvas(scaledWidth, scaledHeight);
   const context = canvas.getContext("2d");
   if (!context) {
@@ -38971,11 +39184,25 @@ var internalRenderMediaOnWeb = async ({
   licenseKey,
   muted,
   scale,
-  isProduction
+  isProduction,
+  allowHtmlInCanvas,
+  sampleRate
 }) => {
   let __stack2 = [];
   try {
     validateScale(scale);
+    let htmlInCanvasLayerOutcomeReported = false;
+    const onHtmlInCanvasLayerOutcome = (outcome) => {
+      if (htmlInCanvasLayerOutcomeReported) {
+        return;
+      }
+      htmlInCanvasLayerOutcomeReported = true;
+      if (outcome.native) {
+        Internals.Log.warn({ logLevel, tag: "@remotion/web-renderer" }, "Using Chromium experimental HTML-in-canvas (drawElementImage) for video frames. See https://github.com/WICG/html-in-canvas");
+      } else if (outcome.shouldWarn) {
+        Internals.Log.warn({ logLevel, tag: "@remotion/web-renderer" }, `Not using HTML-in-canvas: ${outcome.reason}`);
+      }
+    };
     const outputTarget = userDesiredOutputTarget === null ? await canUseWebFsWriter() ? "web-fs" : "arraybuffer" : userDesiredOutputTarget;
     if (outputTarget === "web-fs") {
       await cleanupStaleOpfsFiles();
@@ -39041,9 +39268,38 @@ var internalRenderMediaOnWeb = async ({
       videoEnabled,
       initialFrame: 0,
       defaultCodec: resolved.defaultCodec,
-      defaultOutName: resolved.defaultOutName
+      defaultOutName: resolved.defaultOutName,
+      allowHtmlInCanvas
     }), 0);
-    const { delayRenderScope, div, timeUpdater, collectAssets, errorHolder } = scaffold;
+    const {
+      delayRenderScope,
+      div,
+      timeUpdater,
+      collectAssets,
+      errorHolder,
+      htmlInCanvasContext
+    } = scaffold;
+    if (allowHtmlInCanvas && !htmlInCanvasContext) {
+      if (!supportsNativeHtmlInCanvas()) {
+        onHtmlInCanvasLayerOutcome({
+          native: false,
+          reason: "This browser does not expose CanvasRenderingContext2D.prototype.drawElementImage. In Chromium, enable chrome://flags/#canvas-draw-element and use a version that ships the API.",
+          shouldWarn: false
+        });
+      } else {
+        onHtmlInCanvasLayerOutcome({
+          native: false,
+          reason: "drawElementImage is available but canvas.requestPaint() is missing. Use a Chromium version that ships requestPaint.",
+          shouldWarn: true
+        });
+      }
+    } else if (!allowHtmlInCanvas) {
+      onHtmlInCanvasLayerOutcome({
+        native: false,
+        reason: "allowHtmlInCanvas is false; using the built-in DOM composer.",
+        shouldWarn: false
+      });
+    }
     const internalState = __using2(__stack2, makeInternalState(), 0);
     const keepalive = __using2(__stack2, createBackgroundKeepalive({
       fps: resolved.fps,
@@ -39156,7 +39412,9 @@ var internalRenderMediaOnWeb = async ({
               logLevel,
               internalState,
               onlyBackgroundClipText: false,
-              cutout: new DOMRect(0, 0, resolved.width, resolved.height)
+              cutout: new DOMRect(0, 0, resolved.width, resolved.height),
+              htmlInCanvasContext,
+              onHtmlInCanvasLayerOutcome: htmlInCanvasContext ? onHtmlInCanvasLayerOutcome : undefined
             });
             internalState.addCreateFrameTime(performance.now() - createFrameStart);
             layerCanvas = layer.canvas;
@@ -39207,7 +39465,7 @@ var internalRenderMediaOnWeb = async ({
           if (signal?.aborted) {
             throw new Error("renderMediaOnWeb() was cancelled");
           }
-          const audio = muted ? null : onlyInlineAudio({ assets, fps: resolved.fps, timestamp });
+          const audio = muted ? null : onlyInlineAudio({ assets, fps: resolved.fps, timestamp, sampleRate });
           internalState.addAudioMixingTime(performance.now() - audioCombineStart);
           const addSampleStart = performance.now();
           const encodingPromises = [];
@@ -39320,7 +39578,9 @@ var renderMediaOnWeb = (options2) => {
     licenseKey: options2.licenseKey ?? null,
     muted: options2.muted ?? false,
     scale: options2.scale ?? 1,
-    isProduction: options2.isProduction ?? true
+    isProduction: options2.isProduction ?? true,
+    allowHtmlInCanvas: options2.allowHtmlInCanvas ?? false,
+    sampleRate: options2.sampleRate ?? 48000
   }));
   return onlyOneRenderAtATimeQueue.ref;
 };
@@ -41624,6 +41884,7 @@ var listOfRemotionPackages = [
   "@remotion/bundler",
   "@remotion/cli",
   "@remotion/cloudrun",
+  "@remotion/codex-plugin",
   "@remotion/compositor-darwin-arm64",
   "@remotion/compositor-darwin-x64",
   "@remotion/compositor-linux-arm64-gnu",
@@ -42957,7 +43218,7 @@ var GithubButton = () => {
       " ",
       /* @__PURE__ */ jsx164("div", {
         className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center",
-        children: "41k"
+        children: "42k"
       })
     ]
   });