@twick/browser-render 0.15.9 → 0.15.11

package/dist/index.mjs

@@ -396,19 +396,36 @@ async function muxAudioVideo(options) {
     const ffmpegLogs = [];
     ffmpeg.on("log", ({ message }) => {
       ffmpegLogs.push(message);
-      console.log(`  [FFmpeg] ${message}`);
     });
     await ffmpeg.exec([
+      // Inputs
       "-i",
       "video.mp4",
       "-i",
       "audio.wav",
+      // Explicit stream mapping
+      "-map",
+      "0:v:0",
+      "-map",
+      "1:a:0",
+      // Re-encode video to a very standard H.264 stream.
+      // Copying the WebCodecs/mp4-wasm bitstream can sometimes
+      // lead to timing issues where only the first second renders.
       "-c:v",
-      "copy",
+      "libx264",
+      "-preset",
+      "veryfast",
+      "-crf",
+      "20",
+      // AAC audio
       "-c:a",
       "aac",
       "-b:a",
       "192k",
+      // Make MP4 more web‑friendly
+      "-movflags",
+      "+faststart",
+      // Stop at the shortest of the two streams
       "-shortest",
       "output.mp4"
     ]);
@@ -444,6 +461,12 @@ async function muxAudioVideo(options) {
 }
 
 // src/browser-renderer.ts
+function isWindows() {
+  if (typeof navigator === "undefined") return false;
+  const ua = navigator.userAgent;
+  const plat = navigator.platform ?? "";
+  return /Win(dows|32|64|CE)/i.test(ua) || /Win/i.test(plat);
+}
 var BrowserWasmExporter = class _BrowserWasmExporter {
   constructor(settings) {
     this.settings = settings;
@@ -456,52 +479,111 @@ var BrowserWasmExporter = class _BrowserWasmExporter {
   onProgressCallback;
   currentFrame = 0;
   fps = 30;
+  /** On Windows, copy each frame to this canvas before creating VideoFrame to avoid invalid encoder output. */
+  copyCanvas = null;
+  /** On Windows use native VideoEncoder + Mediabunny with prefer-software so frames are actually encoded. */
+  useNativeEncoder = false;
+  nativeVideoEncoder = null;
+  nativeOutput = null;
+  nativePacketSource = null;
+  nativeAddPromise = Promise.resolve();
+  nativeFirstChunk = true;
   static async create(settings) {
     return new _BrowserWasmExporter(settings);
   }
   async start() {
+    const w = this.settings.size.x;
+    const h = this.settings.size.y;
+    const fps = this.fps;
+    if (isWindows()) {
+      try {
+        const { Output, BufferTarget, Mp4OutputFormat, EncodedVideoPacketSource, EncodedPacket } = await import("mediabunny");
+        const output = new Output({
+          format: new Mp4OutputFormat(),
+          target: new BufferTarget()
+        });
+        const packetSource = new EncodedVideoPacketSource("avc");
+        output.addVideoTrack(packetSource);
+        await output.start();
+        this.nativeOutput = output;
+        this.nativePacketSource = packetSource;
+        this.nativeAddPromise = Promise.resolve();
+        this.nativeFirstChunk = true;
+        const videoEncoder = new VideoEncoder({
+          output: (chunk, meta) => {
+            const packet = EncodedPacket.fromEncodedChunk(chunk);
+            const isFirst = this.nativeFirstChunk;
+            const metaArg = isFirst ? meta : void 0;
+            this.nativeFirstChunk = false;
+            this.nativeAddPromise = this.nativeAddPromise.then(
+              () => this.nativePacketSource.add(packet, metaArg)
+            );
+          },
+          error: (e) => console.error("[BrowserRender] VideoEncoder error:", e)
+        });
+        const bitrate = Math.max(5e5, w * h * fps * 0.1 | 0);
+        const config = {
+          codec: "avc1.42001f",
+          width: w,
+          height: h,
+          bitrate,
+          framerate: fps,
+          hardwareAcceleration: "prefer-software"
+        };
+        const support = await VideoEncoder.isConfigSupported(config);
+        if (!support.supported) {
+          delete config.hardwareAcceleration;
+        }
+        videoEncoder.configure(config);
+        this.nativeVideoEncoder = videoEncoder;
+        this.useNativeEncoder = true;
+        this.copyCanvas = document.createElement("canvas");
+        this.copyCanvas.width = w;
+        this.copyCanvas.height = h;
+        return;
+      } catch {
+        this.useNativeEncoder = false;
+        this.nativeVideoEncoder = null;
+        this.nativeOutput = null;
+        this.nativePacketSource = null;
+      }
+    }
     try {
       const loadMp4Module = (await import("mp4-wasm")).default;
       const possiblePaths = [
-        // Vite dev server virtual path
         "/@mp4-wasm",
-        // Common bundled asset paths (Vite uses hashed names)
         "/assets/mp4-wasm.wasm",
         "/assets/mp4-YBRi_559.wasm",
-        // Known Vite hash
         "/mp4-wasm.wasm",
-        // Node modules path (for dev)
         "/node_modules/mp4-wasm/dist/mp4-wasm.wasm"
       ];
       let buffer = null;
-      let successPath = "";
       for (const path of possiblePaths) {
         try {
           const resp = await fetch(path);
           if (resp.ok) {
             const contentType = resp.headers.get("content-type");
-            if (contentType && contentType.includes("html")) {
-              continue;
-            }
+            if (contentType && contentType.includes("html")) continue;
             buffer = await resp.arrayBuffer();
-            successPath = path;
             break;
           }
-        } catch (e) {
+        } catch {
           continue;
         }
       }
       if (!buffer) {
+        console.error("[BrowserRender] Exporter start: no WASM buffer from any path");
         throw new Error(
           "Could not load WASM file from any location. Please copy mp4-wasm.wasm to your public directory or configure Vite to serve it."
         );
       }
       const mp4 = await loadMp4Module({ wasmBinary: buffer });
-      this.encoder = mp4.createWebCodecsEncoder({
-        width: this.settings.size.x,
-        height: this.settings.size.y,
-        fps: this.fps
-      });
+      this.encoder = mp4.createWebCodecsEncoder({ width: w, height: h, fps });
+      if (isWindows()) {
+        this.copyCanvas = document.createElement("canvas");
+        this.copyCanvas.width = w;
+        this.copyCanvas.height = h;
+      }
     } catch (error) {
       throw error;
     }
@@ -509,57 +591,92 @@ var BrowserWasmExporter = class _BrowserWasmExporter {
   async handleFrame(canvas, frameNumber) {
     const frameIndex = frameNumber !== void 0 ? frameNumber : this.currentFrame;
     const timestampMicroseconds = Math.round(frameIndex / this.fps * 1e6);
-    const frame = new VideoFrame(canvas, {
-      timestamp: timestampMicroseconds,
-      duration: Math.round(1 / this.fps * 1e6)
-    });
-    await this.encoder.addFrame(frame);
-    frame.close();
+    const durationMicroseconds = Math.round(1 / this.fps * 1e6);
+    let sourceCanvas = canvas;
+    if (this.copyCanvas) {
+      if (this.copyCanvas.width !== canvas.width || this.copyCanvas.height !== canvas.height) {
+        this.copyCanvas.width = canvas.width;
+        this.copyCanvas.height = canvas.height;
+      }
+      const ctx = this.copyCanvas.getContext("2d");
+      if (ctx) {
+        ctx.imageSmoothingEnabled = false;
+        ctx.drawImage(canvas, 0, 0);
+        sourceCanvas = this.copyCanvas;
+      }
+    }
+    if (this.useNativeEncoder && this.nativeVideoEncoder) {
+      const bitmap = await createImageBitmap(sourceCanvas);
+      const frame = new VideoFrame(bitmap, {
+        timestamp: timestampMicroseconds,
+        duration: durationMicroseconds
+      });
+      this.nativeVideoEncoder.encode(frame, { keyFrame: frameIndex === 0 });
+      frame.close();
+      bitmap.close();
+    } else {
+      let frame;
+      if (isWindows() && typeof createImageBitmap === "function") {
+        const bitmap = await createImageBitmap(sourceCanvas);
+        frame = new VideoFrame(bitmap, {
+          timestamp: timestampMicroseconds,
+          duration: durationMicroseconds
+        });
+        await this.encoder.addFrame(frame);
+        frame.close();
+        bitmap.close();
+      } else {
+        frame = new VideoFrame(sourceCanvas, {
+          timestamp: timestampMicroseconds,
+          duration: durationMicroseconds
+        });
+        await this.encoder.addFrame(frame);
+        frame.close();
+      }
+    }
     if (frameNumber === void 0) {
       this.currentFrame++;
     }
   }
   async stop() {
+    if (this.useNativeEncoder && this.nativeVideoEncoder && this.nativeOutput && this.nativePacketSource) {
+      await this.nativeVideoEncoder.flush();
+      this.nativeVideoEncoder.close();
+      this.nativeVideoEncoder = null;
+      await this.nativeAddPromise;
+      this.nativePacketSource.close();
+      await this.nativeOutput.finalize();
+      const buf2 = this.nativeOutput.target.buffer;
+      this.nativeOutput = null;
+      this.nativePacketSource = null;
+      this.videoBlob = new Blob([buf2], { type: "video/mp4" });
+      return;
+    }
     const buf = await this.encoder.end();
-    this.videoBlob = new Blob([buf], { type: "video/mp4" });
+    const copy = buf instanceof ArrayBuffer ? buf.slice(0) : new Uint8Array(buf).slice().buffer;
+    this.videoBlob = new Blob([copy], { type: "video/mp4" });
   }
-  async generateAudio(assets, startFrame, endFrame) {
+  async generateAudio(assets, startFrame, endFrame, onProgress) {
     try {
-      console.log(`Generating audio from ${assets.length} frames`);
       const processor = new BrowserAudioProcessor();
       const assetPlacements = getAssetPlacement(assets);
       if (assetPlacements.length === 0) {
-        console.log("No asset placements found");
         return null;
       }
-      console.log(`Processing ${assetPlacements.length} asset placements`);
+      const processableCount = assetPlacements.filter((a) => a.volume > 0 && a.playbackRate > 0).length;
+      let processedCount = 0;
       const processedBuffers = [];
       for (let i = 0; i < assetPlacements.length; i++) {
         const asset = assetPlacements[i];
-        console.log(`[${i + 1}/${assetPlacements.length}] Processing asset: ${asset.src} (type: ${asset.type}, volume: ${asset.volume}, playbackRate: ${asset.playbackRate})`);
         if (asset.volume > 0 && asset.playbackRate > 0) {
-          const startTime = Date.now();
           try {
             if (asset.type === "video") {
-              console.log(`  \u2192 Checking if asset has audio: ${asset.src.substring(0, 50)}...`);
               try {
                 const assetHasAudio = await hasAudio(asset.src);
-                if (!assetHasAudio) {
-                  console.log(`  \u23ED Skipping asset (no audio detected): ${asset.src.substring(0, 50)}...`);
-                  continue;
-                }
-                console.log(`  \u2713 Asset has audio, proceeding: ${asset.src.substring(0, 50)}...`);
-              } catch (audioCheckError) {
-                const errorMsg = audioCheckError instanceof Error ? audioCheckError.message : String(audioCheckError);
-                const errorStack = audioCheckError instanceof Error ? audioCheckError.stack : void 0;
-                console.warn(`  \u26A0 Audio check failed, proceeding anyway: ${asset.src.substring(0, 50)}...`);
-                console.warn(`    Error: ${errorMsg}`);
-                if (errorStack) {
-                  console.warn(`    Stack: ${errorStack}`);
-                }
+                if (!assetHasAudio) continue;
+              } catch {
               }
             }
-            console.log(`  \u2192 Starting processAudioAsset for: ${asset.src}`);
             const processPromise = processor.processAudioAsset(
               asset,
               this.settings.fps || 30,
@@ -571,53 +688,30 @@ var BrowserWasmExporter = class _BrowserWasmExporter {
               }, 2e4);
             });
             const buffer = await Promise.race([processPromise, timeoutPromise]);
-            const duration = Date.now() - startTime;
-            console.log(`  \u2713 Successfully processed audio asset in ${duration}ms: ${asset.src.substring(0, 50)}...`);
             processedBuffers.push(buffer);
-          } catch (error) {
-            const errorMsg = error instanceof Error ? error.message : String(error);
-            const errorStack = error instanceof Error ? error.stack : void 0;
-            const duration = Date.now() - startTime;
-            console.warn(`  \u2717 Failed to process audio asset after ${duration}ms: ${asset.src.substring(0, 50)}...`);
-            console.warn(`    Error: ${errorMsg}`);
-            if (errorStack) {
-              console.warn(`    Stack: ${errorStack}`);
+            processedCount++;
+            if (onProgress && processableCount > 0) {
+              onProgress(processedCount / processableCount);
             }
-            console.warn(`    Asset details: type=${asset.type}, volume=${asset.volume}, playbackRate=${asset.playbackRate}, startFrame=${asset.startInVideo}, endFrame=${asset.endInVideo}`);
+          } catch {
           }
-        } else {
-          console.log(`  \u23ED Skipping asset: volume=${asset.volume}, playbackRate=${asset.playbackRate}`);
         }
       }
       if (processedBuffers.length === 0) {
-        console.warn("No audio buffers were successfully processed");
-        console.warn(`  Total assets attempted: ${assetPlacements.length}`);
-        console.warn(`  Assets with volume>0 and playbackRate>0: ${assetPlacements.filter((a) => a.volume > 0 && a.playbackRate > 0).length}`);
         return null;
       }
-      console.log(`Mixing ${processedBuffers.length} audio buffers`);
-      const mixStartTime = Date.now();
+      if (onProgress) onProgress(0.85);
       const mixedBuffer = processor.mixAudioBuffers(processedBuffers);
-      const mixDuration = Date.now() - mixStartTime;
-      console.log(`Audio mixing completed in ${mixDuration}ms`);
-      const wavStartTime = Date.now();
+      if (onProgress) onProgress(0.92);
       const wavData = processor.audioBufferToWav(mixedBuffer);
-      const wavDuration = Date.now() - wavStartTime;
-      console.log(`WAV conversion completed in ${wavDuration}ms`);
-      console.log(`Audio generation complete: ${wavData.byteLength} bytes (${(wavData.byteLength / 1024 / 1024).toFixed(2)} MB)`);
+      if (onProgress) onProgress(1);
       await processor.close();
       return wavData;
     } catch (error) {
       const errorMsg = error instanceof Error ? error.message : String(error);
       const errorStack = error instanceof Error ? error.stack : void 0;
-      console.error("Audio generation error:", errorMsg);
-      if (errorStack) {
-        console.error("Error stack:", errorStack);
-      }
-      console.error("Error details:", {
-        errorType: error instanceof Error ? error.constructor.name : typeof error,
-        errorMessage: errorMsg
-      });
+      console.error("[BrowserRender] Audio generation error:", errorMsg);
+      if (errorStack) console.error("[BrowserRender] Stack:", errorStack);
       return null;
     }
   }
@@ -657,6 +751,7 @@ var renderTwickVideoInBrowser = async (config) => {
   try {
     const { projectFile, variables, settings = {} } = config;
     if (!variables || !variables.input) {
+      console.error("[BrowserRender] renderTwickVideoInBrowser: missing variables.input");
       throw new Error('Invalid configuration. "variables.input" is required.');
     }
     const width = settings.width || variables.input.properties?.width || 1920;
@@ -691,22 +786,27 @@ var renderTwickVideoInBrowser = async (config) => {
     renderer.playback.state = 1;
     const totalFrames = await renderer.getNumberOfFrames(renderSettings);
     if (totalFrames === 0 || !isFinite(totalFrames)) {
+      console.error("[BrowserRender] renderTwickVideoInBrowser: invalid totalFrames", totalFrames);
       throw new Error(
         "Cannot render: Video has zero duration. Please ensure your project has valid content with non-zero duration. Check that all video elements have valid sources and are properly loaded."
       );
     }
     const videoElements = [];
+    const audioElements = [];
     if (variables.input.tracks) {
       variables.input.tracks.forEach((track) => {
         if (track.elements) {
           track.elements.forEach((el) => {
             if (el.type === "video") videoElements.push(el);
+            if (el.type === "audio") audioElements.push(el);
           });
         }
       });
     }
     let hasAnyAudio = false;
-    console.log(`Found ${videoElements.length} video element(s) to check for audio`);
+    if (settings.includeAudio && audioElements.length > 0) {
+      hasAnyAudio = true;
+    }
     if (videoElements.length > 0) {
       for (const videoEl of videoElements) {
         const src = videoEl.props?.src;
@@ -732,19 +832,10 @@ var renderTwickVideoInBrowser = async (config) => {
         });
         if (settings.includeAudio) {
           try {
-            console.log(`Checking if video has audio: ${src.substring(0, 50)}...`);
             const videoHasAudio = await hasAudio(src);
-            console.log(`Audio check result for ${src.substring(0, 50)}...: ${videoHasAudio ? "HAS AUDIO" : "NO AUDIO"}`);
-            if (videoHasAudio) {
-              hasAnyAudio = true;
-              console.log(`\u2713 Video has audio: ${src.substring(0, 50)}...`);
-            } else {
-              console.log(`\u2717 Video has no audio: ${src.substring(0, 50)}...`);
-            }
-          } catch (error) {
-            console.warn(`Failed to check audio for ${src.substring(0, 50)}...:`, error);
+            if (videoHasAudio) hasAnyAudio = true;
+          } catch {
             hasAnyAudio = true;
-            console.log(`\u26A0 Assuming video might have audio due to check error`);
           }
         }
       }
@@ -765,58 +856,66 @@ var renderTwickVideoInBrowser = async (config) => {
       mediaAssets.push(currentAssets);
       const canvas = renderer.stage.finalBuffer;
       await exporter.handleFrame(canvas, frame);
-      if (settings.onProgress) settings.onProgress(frame / totalFrames);
+      if (settings.onProgress) settings.onProgress(frame / totalFrames * 0.9);
     }
     await exporter.stop();
+    if (audioElements.length > 0 && settings.includeAudio) {
+      for (let frame = 0; frame < mediaAssets.length; frame++) {
+        const timeInSec = frame / fps;
+        for (const el of audioElements) {
+          const s = typeof el.s === "number" ? el.s : 0;
+          const e = typeof el.e === "number" ? el.e : Number.MAX_VALUE;
+          if (timeInSec >= s && timeInSec < e && el.props?.src) {
+            const playbackRate = el.props.playbackRate ?? 1;
+            const volume = el.props.volume ?? 1;
+            const trimStart = el.props.time ?? 0;
+            const currentTime = (timeInSec - s) * playbackRate + trimStart;
+            mediaAssets[frame].push({
+              key: el.id,
+              src: el.props.src,
+              type: "audio",
+              currentTime,
+              playbackRate,
+              volume
+            });
+          }
+        }
+      }
+    }
     let audioData = null;
-    console.log(`Audio detection summary: hasAnyAudio=${hasAnyAudio}, includeAudio=${settings.includeAudio}, mediaAssets=${mediaAssets.length}`);
     if (settings.includeAudio && mediaAssets.length > 0 && hasAnyAudio) {
-      console.log("Starting audio processing (audio detected in videos)");
-      if (settings.onProgress) {
-        settings.onProgress(0.98);
-      }
+      const reportAudioProgress = (p) => {
+        if (settings.onProgress) settings.onProgress(0.9 + p * 0.07);
+      };
       try {
-        console.log("Calling generateAudio...");
-        audioData = await exporter.generateAudio(mediaAssets, 0, totalFrames);
-        console.log("generateAudio completed");
-        if (audioData) {
-          console.log(`\u2713 Audio generation successful: ${audioData.byteLength} bytes`);
-        } else {
-          console.log("\u2717 No audio data generated");
-        }
-        if (settings.onProgress) {
-          settings.onProgress(0.99);
-        }
+        audioData = await exporter.generateAudio(mediaAssets, 0, totalFrames, reportAudioProgress);
+        if (settings.onProgress) settings.onProgress(0.97);
       } catch (audioError) {
         const errorMsg = audioError instanceof Error ? audioError.message : String(audioError);
         const errorStack = audioError instanceof Error ? audioError.stack : void 0;
-        console.error("\u2717 Audio generation failed, continuing without audio");
-        console.error(`  Error: ${errorMsg}`);
-        if (errorStack) {
-          console.error(`  Stack: ${errorStack}`);
-        }
-        console.error("  Context:", {
-          hasAnyAudio,
-          includeAudio: settings.includeAudio,
-          mediaAssetsCount: mediaAssets.length,
-          totalFrames
-        });
+        console.error("[BrowserRender] Audio generation failed:", errorMsg);
+        if (errorStack) console.error("[BrowserRender] Stack:", errorStack);
         audioData = null;
       }
-    } else if (settings.includeAudio && mediaAssets.length > 0 && !hasAnyAudio) {
-      console.log("\u23ED Skipping audio processing: no audio detected in videos");
-    } else {
-      console.log(`\u23ED Skipping audio processing: includeAudio=${settings.includeAudio}, mediaAssets=${mediaAssets.length}, hasAnyAudio=${hasAnyAudio}`);
     }
     let finalBlob = exporter.getVideoBlob();
     if (!finalBlob) {
+      console.error("[BrowserRender] renderTwickVideoInBrowser: getVideoBlob returned null");
       throw new Error("Failed to create video blob");
     }
     if (finalBlob.size === 0) {
+      console.error("[BrowserRender] renderTwickVideoInBrowser: video blob size is 0");
       throw new Error("Video blob is empty. Rendering may have failed.");
     }
+    const MIN_VIDEO_BLOB_BYTES = 1024;
+    if (finalBlob.size < MIN_VIDEO_BLOB_BYTES) {
+      console.error("[BrowserRender] renderTwickVideoInBrowser: video blob too small", finalBlob.size, "bytes (expected >=", MIN_VIDEO_BLOB_BYTES, ")");
+      throw new Error(
+        `Video blob is too small (${finalBlob.size} bytes). No video frames were encoded. This often happens on Windows when the encoder does not accept the frame format from canvas. Try using a different browser or updating graphics drivers.`
+      );
+    }
     if (audioData && settings.includeAudio) {
-      console.log(`Attempting to mux audio (${audioData.byteLength} bytes) with video (${finalBlob.size} bytes)`);
+      if (settings.onProgress) settings.onProgress(0.98);
       try {
         const muxedBlob = await muxAudioVideo({
           videoBlob: finalBlob,
@@ -825,24 +924,12 @@ var renderTwickVideoInBrowser = async (config) => {
         if (!muxedBlob || muxedBlob.size === 0) {
           throw new Error("Muxed video blob is empty");
         }
-        if (muxedBlob.size === finalBlob.size) {
-          console.warn("Muxed blob size unchanged - muxing may have failed silently");
-        } else {
-          console.log(`Muxing successful: ${finalBlob.size} bytes -> ${muxedBlob.size} bytes`);
-        }
         finalBlob = muxedBlob;
       } catch (muxError) {
         const errorMsg = muxError instanceof Error ? muxError.message : String(muxError);
         const errorStack = muxError instanceof Error ? muxError.stack : void 0;
-        console.error("Audio muxing failed");
-        console.error(`  Error: ${errorMsg}`);
-        if (errorStack) {
-          console.error(`  Stack: ${errorStack}`);
-        }
-        console.error("  Context:", {
-          videoBlobSize: finalBlob.size,
-          audioDataSize: audioData?.byteLength || 0
-        });
+        console.error("[BrowserRender] Audio muxing failed:", errorMsg);
+        if (errorStack) console.error("[BrowserRender] Stack:", errorStack);
         if (settings.downloadAudioSeparately && audioData) {
           const audioBlob = new Blob([audioData], { type: "audio/wav" });
           const audioUrl = URL.createObjectURL(audioBlob);
@@ -852,16 +939,14 @@ var renderTwickVideoInBrowser = async (config) => {
           a.click();
           URL.revokeObjectURL(audioUrl);
         }
-        console.warn("Continuing with video without audio due to muxing failure");
         finalBlob = exporter.getVideoBlob();
         if (!finalBlob || finalBlob.size === 0) {
           throw new Error("Video blob is invalid after muxing failure");
         }
       }
-    } else if (settings.includeAudio && !audioData) {
-      console.warn("Audio processing was enabled but no audio data was generated");
     }
     if (!finalBlob || finalBlob.size === 0) {
+      console.error("[BrowserRender] renderTwickVideoInBrowser: final blob invalid", finalBlob?.size);
       throw new Error("Final video blob is empty or invalid");
     }
     if (settings.onProgress) {
@@ -891,9 +976,112 @@ var downloadVideoBlob = (videoBlob, filename = "video.mp4") => {
   document.body.appendChild(a);
   a.click();
   document.body.removeChild(a);
-  setTimeout(() => URL.revokeObjectURL(url), 1e3);
+  const revokeMs = isWindows() ? 5e3 : 1e3;
+  setTimeout(() => URL.revokeObjectURL(url), revokeMs);
 };
 
+// src/audio/video-normalizer.ts
+function getFFmpegBaseURL2() {
+  if (typeof window !== "undefined") {
+    return `${window.location.origin}/ffmpeg`;
+  }
+  return "/ffmpeg";
+}
+async function normalizeVideoBlob(input, options = {}) {
+  const startTime = Date.now();
+  const targetWidth = options.width ?? 720;
+  const targetFps = options.fps ?? 30;
+  try {
+    console.log("[VideoNormalizer] Starting normalization...");
+    console.log(`[VideoNormalizer] Input size: ${input.size} bytes (${(input.size / 1024 / 1024).toFixed(2)} MB)`);
+    const { FFmpeg } = await import("@ffmpeg/ffmpeg");
+    const { fetchFile } = await import("@ffmpeg/util");
+    const ffmpeg = new FFmpeg();
+    const base = getFFmpegBaseURL2();
+    const coreURL = `${base}/ffmpeg-core.js`;
+    const wasmURL = `${base}/ffmpeg-core.wasm`;
+    console.log(`[VideoNormalizer] Loading FFmpeg from ${base}`);
+    const loadStart = Date.now();
+    await ffmpeg.load({ coreURL, wasmURL });
+    const loadMs = Date.now() - loadStart;
+    console.log(`[VideoNormalizer] FFmpeg loaded in ${loadMs}ms`);
+    console.log("[VideoNormalizer] Writing input file...");
+    const writeStart = Date.now();
+    await ffmpeg.writeFile("in.mp4", await fetchFile(input));
+    const writeMs = Date.now() - writeStart;
+    console.log(`[VideoNormalizer] Input file written in ${writeMs}ms`);
+    console.log("[VideoNormalizer] Executing normalization command...");
+    const execStart = Date.now();
+    ffmpeg.on("log", ({ message }) => {
+      console.log(`[VideoNormalizer:FFmpeg] ${message}`);
+    });
+    await ffmpeg.exec([
+      "-i",
+      "in.mp4",
+      // Normalize geometry & frame rate
+      "-vf",
+      `scale=${targetWidth}:-2,fps=${targetFps},format=yuv420p`,
+      // Standard H.264 video
+      "-c:v",
+      "libx264",
+      "-preset",
+      "veryfast",
+      "-crf",
+      "20",
+      "-pix_fmt",
+      "yuv420p",
+      "-profile:v",
+      "main",
+      "-r",
+      String(targetFps),
+      // AAC audio, stereo, 48kHz
+      "-c:a",
+      "aac",
+      "-b:a",
+      "128k",
+      "-ar",
+      "48000",
+      "-ac",
+      "2",
+      // Web-friendly MP4
+      "-movflags",
+      "+faststart",
+      "out.mp4"
+    ]);
+    const execMs = Date.now() - execStart;
+    console.log(`[VideoNormalizer] Normalization completed in ${execMs}ms`);
+    const readStart = Date.now();
+    const data = await ffmpeg.readFile("out.mp4");
+    const readMs = Date.now() - readStart;
+    console.log(`[VideoNormalizer] Output file read in ${readMs}ms`);
+    const uint8 = typeof data === "string" ? new TextEncoder().encode(data) : new Uint8Array(data);
+    const blob = new Blob([uint8], { type: "video/mp4" });
+    const totalMs = Date.now() - startTime;
+    console.log(`[VideoNormalizer] Normalization successful: ${blob.size} bytes (${(blob.size / 1024 / 1024).toFixed(2)} MB) in ${totalMs}ms`);
+    return {
+      blob,
+      size: blob.size,
+      debug: {
+        loadMs,
+        writeMs,
+        execMs,
+        readMs,
+        totalMs
+      }
+    };
+  } catch (error) {
+    const totalMs = Date.now() - startTime;
+    const msg = error instanceof Error ? error.message : String(error);
+    const stack = error instanceof Error ? error.stack : void 0;
+    console.error("[VideoNormalizer] Normalization failed:", msg);
+    if (stack) {
+      console.error("[VideoNormalizer] Stack:", stack);
+    }
+    console.error("[VideoNormalizer] Duration:", `${totalMs}ms`);
+    throw error;
+  }
+}
+
 // src/hooks/use-browser-renderer.ts
 import { useState, useCallback } from "react";
 var useBrowserRenderer = (options = {}) => {
@@ -940,6 +1128,7 @@ var useBrowserRenderer = (options = {}) => {
             setProgress(p);
           },
           onComplete: (blob2) => {
+            console.log("[BrowserRender] useBrowserRenderer: onComplete received blob", blob2 ? `size=${blob2.size} type=${blob2.type}` : "null");
             setVideoBlob(blob2);
             if (autoDownload) {
               try {
@@ -950,6 +1139,7 @@ var useBrowserRenderer = (options = {}) => {
             }
           },
           onError: (err) => {
+            console.error("[BrowserRender] useBrowserRenderer: onError", err?.message);
             setError(err);
           }
         }
@@ -961,6 +1151,8 @@ var useBrowserRenderer = (options = {}) => {
       setProgress(1);
       return blob;
     } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err);
+      console.error("[BrowserRender] useBrowserRenderer: render failed", errorMsg);
       setError(err instanceof Error ? err : new Error(String(err)));
       return null;
     } finally {
@@ -980,6 +1172,7 @@ var useBrowserRenderer = (options = {}) => {
 export {
   renderTwickVideoInBrowser as default,
   downloadVideoBlob,
+  normalizeVideoBlob,
   renderTwickVideoInBrowser,
   useBrowserRenderer
 };