@twick/browser-render 0.15.8 → 0.15.10

package/dist/index.mjs

@@ -1,6 +1,7 @@
 // src/browser-renderer.ts
 import { Renderer, Vector2 } from "@twick/core";
 import defaultProject from "@twick/visualizer/dist/project.js";
+import { hasAudio } from "@twick/media-utils";
 
 // src/audio/video-audio-extractor.ts
 var VideoElementAudioExtractor = class {
@@ -28,40 +29,113 @@ var VideoElementAudioExtractor = class {
    * Extract audio by playing the video and capturing audio output
    */
   async extractAudio(startTime, duration, playbackRate = 1) {
-    const source = this.audioContext.createMediaElementSource(this.video);
-    this.destination = this.audioContext.createMediaStreamDestination();
-    source.connect(this.destination);
+    try {
+      const source = this.audioContext.createMediaElementSource(this.video);
+      this.destination = this.audioContext.createMediaStreamDestination();
+      source.connect(this.destination);
+    } catch (err) {
+      throw new Error("Video has no audio track");
+    }
     this.audioChunks = [];
-    this.mediaRecorder = new MediaRecorder(this.destination.stream, {
-      mimeType: "audio/webm"
-    });
+    let mimeType = "audio/webm";
+    if (!MediaRecorder.isTypeSupported(mimeType)) {
+      mimeType = "";
+    }
+    try {
+      this.mediaRecorder = new MediaRecorder(this.destination.stream, {
+        mimeType: mimeType || void 0
+      });
+    } catch (err) {
+      throw new Error(`Failed to create MediaRecorder: ${err}. Video may have no audio track.`);
+    }
     this.mediaRecorder.ondataavailable = (event) => {
-      if (event.data.size > 0) {
+      if (event.data && event.data.size > 0) {
         this.audioChunks.push(event.data);
       }
     };
     this.video.currentTime = startTime;
     this.video.playbackRate = playbackRate;
-    await new Promise((resolve) => {
-      this.video.addEventListener("seeked", () => resolve(), { once: true });
+    await new Promise((resolve, reject) => {
+      const seekTimeout = setTimeout(() => {
+        reject(new Error("Video seek timeout"));
+      }, 5e3);
+      this.video.addEventListener("seeked", () => {
+        clearTimeout(seekTimeout);
+        resolve();
+      }, { once: true });
+      this.video.addEventListener("error", () => {
+        clearTimeout(seekTimeout);
+        reject(new Error("Video seek error"));
+      }, { once: true });
     });
     return new Promise((resolve, reject) => {
       const recordingTimeout = setTimeout(() => {
-        reject(new Error("Audio extraction timeout"));
-      }, (duration / playbackRate + 5) * 1e3);
-      this.mediaRecorder.start();
-      this.video.play();
+        this.video.pause();
+        if (this.mediaRecorder && this.mediaRecorder.state !== "inactive") {
+          this.mediaRecorder.stop();
+        }
+        reject(new Error("Audio extraction timeout - video may have no audio track"));
+      }, (duration / playbackRate + 10) * 1e3);
+      let hasData = false;
+      const dataCheckInterval = setInterval(() => {
+        if (this.audioChunks.length > 0 && this.audioChunks.some((chunk) => chunk.size > 0)) {
+          hasData = true;
+        }
+      }, 1e3);
+      this.mediaRecorder.onerror = (event) => {
+        clearInterval(dataCheckInterval);
+        clearTimeout(recordingTimeout);
+        this.video.pause();
+        reject(new Error(`MediaRecorder error: ${event}. Video may have no audio track.`));
+      };
+      try {
+        this.mediaRecorder.start(100);
+        this.video.play().catch((playErr) => {
+          clearInterval(dataCheckInterval);
+          clearTimeout(recordingTimeout);
+          reject(new Error(`Failed to play video: ${playErr}`));
+        });
+      } catch (startErr) {
+        clearInterval(dataCheckInterval);
+        clearTimeout(recordingTimeout);
+        reject(new Error(`Failed to start recording: ${startErr}`));
+      }
       setTimeout(async () => {
+        clearInterval(dataCheckInterval);
         clearTimeout(recordingTimeout);
         this.video.pause();
-        this.mediaRecorder.stop();
+        if (this.mediaRecorder && this.mediaRecorder.state !== "inactive") {
+          this.mediaRecorder.stop();
+        }
+        const stopTimeout = setTimeout(() => {
+          if (this.audioChunks.length === 0 || !hasData) {
+            reject(new Error("No audio data captured - video has no audio track"));
+          }
+        }, 2e3);
         await new Promise((res) => {
-          this.mediaRecorder.addEventListener("stop", () => res(), { once: true });
+          if (this.mediaRecorder) {
+            this.mediaRecorder.addEventListener("stop", () => {
+              clearTimeout(stopTimeout);
+              res();
+            }, { once: true });
+          } else {
+            clearTimeout(stopTimeout);
+            res();
+          }
         });
         try {
+          if (this.audioChunks.length === 0 || !this.audioChunks.some((chunk) => chunk.size > 0)) {
+            throw new Error("No audio data captured - video has no audio track");
+          }
           const audioBlob = new Blob(this.audioChunks, { type: "audio/webm" });
+          if (audioBlob.size === 0) {
+            throw new Error("Audio blob is empty - video has no audio track");
+          }
           const arrayBuffer = await audioBlob.arrayBuffer();
           const audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer);
+          if (audioBuffer.length === 0 || audioBuffer.duration === 0) {
+            throw new Error("Audio buffer is empty - video has no audio track");
+          }
           resolve(audioBuffer);
         } catch (err) {
           reject(new Error(`Failed to decode recorded audio: ${err}`));
@@ -284,48 +358,115 @@ function getFFmpegBaseURL() {
   return "/ffmpeg";
 }
 async function muxAudioVideo(options) {
+  const muxStartTime = Date.now();
   try {
+    console.log("Starting FFmpeg muxing...");
+    console.log(`  Video blob size: ${options.videoBlob.size} bytes (${(options.videoBlob.size / 1024 / 1024).toFixed(2)} MB)`);
+    console.log(`  Audio buffer size: ${options.audioBuffer.byteLength} bytes (${(options.audioBuffer.byteLength / 1024 / 1024).toFixed(2)} MB)`);
     const { FFmpeg } = await import("@ffmpeg/ffmpeg");
     const { fetchFile } = await import("@ffmpeg/util");
     const ffmpeg = new FFmpeg();
     const base = getFFmpegBaseURL();
     const coreURL = `${base}/ffmpeg-core.js`;
     const wasmURL = `${base}/ffmpeg-core.wasm`;
+    console.log(`Loading FFmpeg from ${base}`);
+    const loadStartTime = Date.now();
     await ffmpeg.load({
       coreURL,
       wasmURL
     });
+    const loadDuration = Date.now() - loadStartTime;
+    console.log(`FFmpeg loaded successfully in ${loadDuration}ms`);
+    console.log("Writing video and audio files...");
+    const writeStartTime = Date.now();
     await ffmpeg.writeFile(
       "video.mp4",
       await fetchFile(options.videoBlob)
     );
+    console.log(`  Video file written: ${options.videoBlob.size} bytes`);
     await ffmpeg.writeFile(
       "audio.wav",
       new Uint8Array(options.audioBuffer)
     );
+    const writeDuration = Date.now() - writeStartTime;
+    console.log(`  Audio file written: ${options.audioBuffer.byteLength} bytes`);
+    console.log(`Files written successfully in ${writeDuration}ms`);
+    console.log("Executing FFmpeg muxing command...");
+    const execStartTime = Date.now();
+    const ffmpegLogs = [];
+    ffmpeg.on("log", ({ message }) => {
+      ffmpegLogs.push(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"
     ]);
+    const execDuration = Date.now() - execStartTime;
+    console.log(`FFmpeg muxing completed in ${execDuration}ms`);
+    const readStartTime = Date.now();
     const data = await ffmpeg.readFile("output.mp4");
+    const readDuration = Date.now() - readStartTime;
+    console.log(`Output file read successfully in ${readDuration}ms`);
     const uint8 = typeof data === "string" ? new TextEncoder().encode(data) : new Uint8Array(data);
-    return new Blob([uint8], { type: "video/mp4" });
-  } catch {
-    return options.videoBlob;
+    const result = new Blob([uint8], { type: "video/mp4" });
+    const totalDuration = Date.now() - muxStartTime;
+    console.log(`Muxing successful: ${result.size} bytes (${(result.size / 1024 / 1024).toFixed(2)} MB) in ${totalDuration}ms`);
+    console.log(`  Breakdown: load=${loadDuration}ms, write=${writeDuration}ms, exec=${execDuration}ms, read=${readDuration}ms`);
+    return result;
+  } catch (error) {
+    const totalDuration = Date.now() - muxStartTime;
+    const errorMsg = error instanceof Error ? error.message : String(error);
+    const errorStack = error instanceof Error ? error.stack : void 0;
+    console.error("FFmpeg muxing failed:", errorMsg);
+    if (errorStack) {
+      console.error("Error stack:", errorStack);
+    }
+    console.error("Error details:", {
+      errorType: error instanceof Error ? error.constructor.name : typeof error,
+      errorMessage: errorMsg,
+      duration: `${totalDuration}ms`,
+      videoBlobSize: options.videoBlob.size,
+      audioBufferSize: options.audioBuffer.byteLength
+    });
+    throw error;
   }
 }
 
 // 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;
@@ -338,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;
     }
@@ -391,37 +591,108 @@ 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 {
       const processor = new BrowserAudioProcessor();
       const assetPlacements = getAssetPlacement(assets);
       if (assetPlacements.length === 0) {
         return null;
       }
+      const processableCount = assetPlacements.filter((a) => a.volume > 0 && a.playbackRate > 0).length;
+      let processedCount = 0;
       const processedBuffers = [];
-      for (const asset of assetPlacements) {
+      for (let i = 0; i < assetPlacements.length; i++) {
+        const asset = assetPlacements[i];
         if (asset.volume > 0 && asset.playbackRate > 0) {
           try {
-            const buffer = await processor.processAudioAsset(
+            if (asset.type === "video") {
+              try {
+                const assetHasAudio = await hasAudio(asset.src);
+                if (!assetHasAudio) continue;
+              } catch {
+              }
+            }
+            const processPromise = processor.processAudioAsset(
               asset,
               this.settings.fps || 30,
               endFrame - startFrame
             );
+            const timeoutPromise = new Promise((_, reject) => {
+              setTimeout(() => {
+                reject(new Error(`Timeout processing audio asset after 20s - video may have no audio track`));
+              }, 2e4);
+            });
+            const buffer = await Promise.race([processPromise, timeoutPromise]);
             processedBuffers.push(buffer);
+            processedCount++;
+            if (onProgress && processableCount > 0) {
+              onProgress(processedCount / processableCount);
+            }
           } catch {
           }
         }
@@ -429,11 +700,18 @@ var BrowserWasmExporter = class _BrowserWasmExporter {
       if (processedBuffers.length === 0) {
         return null;
       }
+      if (onProgress) onProgress(0.85);
       const mixedBuffer = processor.mixAudioBuffers(processedBuffers);
+      if (onProgress) onProgress(0.92);
       const wavData = processor.audioBufferToWav(mixedBuffer);
+      if (onProgress) onProgress(1);
       await processor.close();
       return wavData;
-    } catch {
+    } catch (error) {
+      const errorMsg = error instanceof Error ? error.message : String(error);
+      const errorStack = error instanceof Error ? error.stack : void 0;
+      console.error("[BrowserRender] Audio generation error:", errorMsg);
+      if (errorStack) console.error("[BrowserRender] Stack:", errorStack);
       return null;
     }
   }
@@ -473,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;
@@ -507,20 +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;
+    if (settings.includeAudio && audioElements.length > 0) {
+      hasAnyAudio = true;
+    }
     if (videoElements.length > 0) {
       for (const videoEl of videoElements) {
         const src = videoEl.props?.src;
@@ -544,6 +830,14 @@ var renderTwickVideoInBrowser = async (config) => {
             reject(new Error(`Failed to load video: ${err?.message || "Unknown error"}`));
           }, { once: true });
         });
+        if (settings.includeAudio) {
+          try {
+            const videoHasAudio = await hasAudio(src);
+            if (videoHasAudio) hasAnyAudio = true;
+          } catch {
+            hasAnyAudio = true;
+          }
+        }
       }
     }
     await renderer.playback.recalculate();
@@ -562,33 +856,102 @@ 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;
-    if (settings.includeAudio && mediaAssets.length > 0) {
-      audioData = await exporter.generateAudio(mediaAssets, 0, totalFrames);
+    if (settings.includeAudio && mediaAssets.length > 0 && hasAnyAudio) {
+      const reportAudioProgress = (p) => {
+        if (settings.onProgress) settings.onProgress(0.9 + p * 0.07);
+      };
+      try {
+        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("[BrowserRender] Audio generation failed:", errorMsg);
+        if (errorStack) console.error("[BrowserRender] Stack:", errorStack);
+        audioData = null;
+      }
     }
     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) {
+      if (settings.onProgress) settings.onProgress(0.98);
       try {
-        finalBlob = await muxAudioVideo({
+        const muxedBlob = await muxAudioVideo({
           videoBlob: finalBlob,
           audioBuffer: audioData
         });
-      } catch {
-        const audioBlob = new Blob([audioData], { type: "audio/wav" });
-        const audioUrl = URL.createObjectURL(audioBlob);
-        const a = document.createElement("a");
-        a.href = audioUrl;
-        a.download = "audio.wav";
-        a.click();
-        URL.revokeObjectURL(audioUrl);
+        if (!muxedBlob || muxedBlob.size === 0) {
+          throw new Error("Muxed video blob is empty");
+        }
+        finalBlob = muxedBlob;
+      } catch (muxError) {
+        const errorMsg = muxError instanceof Error ? muxError.message : String(muxError);
+        const errorStack = muxError instanceof Error ? muxError.stack : void 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);
+          const a = document.createElement("a");
+          a.href = audioUrl;
+          a.download = "audio.wav";
+          a.click();
+          URL.revokeObjectURL(audioUrl);
+        }
+        finalBlob = exporter.getVideoBlob();
+        if (!finalBlob || finalBlob.size === 0) {
+          throw new Error("Video blob is invalid after muxing failure");
+        }
       }
     }
+    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) {
+      settings.onProgress(1);
+    }
     if (settings.onComplete) {
       settings.onComplete(finalBlob);
     }
@@ -613,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 = {}) => {
@@ -662,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 {
@@ -672,6 +1139,7 @@ var useBrowserRenderer = (options = {}) => {
             }
           },
           onError: (err) => {
+            console.error("[BrowserRender] useBrowserRenderer: onError", err?.message);
             setError(err);
           }
         }
@@ -683,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 {
@@ -702,6 +1172,7 @@ var useBrowserRenderer = (options = {}) => {
 export {
   renderTwickVideoInBrowser as default,
   downloadVideoBlob,
+  normalizeVideoBlob,
   renderTwickVideoInBrowser,
   useBrowserRenderer
 };