@twick/browser-render 0.15.6 → 0.15.8

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/browser-renderer.ts","../src/audio/video-audio-extractor.ts","../src/audio/audio-processor.ts","../src/audio/audio-video-muxer.ts","../src/hooks/use-browser-renderer.ts"],"sourcesContent":["import { Renderer, Vector2 } from \"@twick/core\";\nimport type { Project, RendererSettings } from \"@twick/core\";\nimport defaultProject from \"@twick/visualizer/dist/project.js\";\nimport { BrowserAudioProcessor, getAssetPlacement, type AssetInfo } from './audio/audio-processor';\nimport { muxAudioVideo } from './audio/audio-video-muxer';\n\n/**\n * Browser-native video exporter using WebCodecs API\n * This exporter downloads the video directly in the browser without any server interaction\n */\nclass BrowserWasmExporter {\n  public static readonly id = '@twick/core/wasm';\n  public static readonly displayName = 'Browser Video (Wasm)';\n\n  private encoder: any;\n  private videoBlob: Blob | null = null;\n  private onProgressCallback?: (progress: number) => void;\n  private currentFrame: number = 0;\n  private fps: number = 30;\n\n  public static async create(settings: RendererSettings) {\n    return new BrowserWasmExporter(settings);\n  }\n\n  public constructor(\n    private readonly settings: RendererSettings,\n  ) {\n    this.fps = settings.fps || 30;\n  }\n\n  public async start(): Promise<void> {\n    try {\n      // Import mp4-wasm\n      const loadMp4Module = (await import('mp4-wasm')).default;\n      \n      // Try multiple locations to fetch the WASM file\n      const possiblePaths = [\n        // Vite dev server virtual path\n        '/@mp4-wasm',\n        // Common bundled asset paths (Vite uses hashed names)\n        '/assets/mp4-wasm.wasm',\n        '/assets/mp4-YBRi_559.wasm', // Known Vite hash\n        '/mp4-wasm.wasm',\n        // Node modules path (for dev)\n        '/node_modules/mp4-wasm/dist/mp4-wasm.wasm',\n      ];\n      \n      let buffer: ArrayBuffer | null = null;\n      let successPath = '';\n      \n      for (const path of possiblePaths) {\n        try {\n          const resp = await fetch(path);\n          if (resp.ok) {\n            const contentType = resp.headers.get('content-type');\n            // Make sure we got a WASM file, not HTML\n            if (contentType && contentType.includes('html')) {\n              continue;\n            }\n            buffer = await resp.arrayBuffer();\n            successPath = path;\n            break;\n          }\n        } catch (e) {\n          continue;\n        }\n      }\n      \n      if (!buffer) {\n        throw new Error(\n          'Could not load WASM file from any location. ' +\n          'Please copy mp4-wasm.wasm to your public directory or configure Vite to serve it.'\n        );\n      }\n      \n      const mp4 = await loadMp4Module({ wasmBinary: buffer });\n\n      this.encoder = mp4.createWebCodecsEncoder({\n        width: this.settings.size.x,\n        height: this.settings.size.y,\n        fps: this.fps,\n      });\n    } catch (error) {\n      throw error;\n    }\n  }\n\n  public async handleFrame(canvas: HTMLCanvasElement, frameNumber?: number): Promise<void> {\n    const frameIndex = frameNumber !== undefined ? frameNumber : this.currentFrame;\n    const timestampMicroseconds = Math.round((frameIndex / this.fps) * 1_000_000);\n    \n    const frame = new VideoFrame(canvas, { \n      timestamp: timestampMicroseconds,\n      duration: Math.round((1 / this.fps) * 1_000_000)\n    });\n    \n    await this.encoder.addFrame(frame);\n    frame.close();\n    \n    if (frameNumber === undefined) {\n      this.currentFrame++;\n    }\n  }\n\n  public async stop(): Promise<void> {\n    const buf = await this.encoder.end();\n    this.videoBlob = new Blob([buf], { type: 'video/mp4' });\n  }\n\n  public async generateAudio(\n    assets: AssetInfo[][],\n    startFrame: number,\n    endFrame: number,\n  ): Promise<ArrayBuffer | null> {\n    try {\n      const processor = new BrowserAudioProcessor();\n      const assetPlacements = getAssetPlacement(assets);\n\n      if (assetPlacements.length === 0) {\n        return null;\n      }\n\n      const processedBuffers: AudioBuffer[] = [];\n      for (const asset of assetPlacements) {\n        if (asset.volume > 0 && asset.playbackRate > 0) {\n          try {\n            const buffer = await processor.processAudioAsset(\n              asset,\n              this.settings.fps || 30,\n              endFrame - startFrame\n            );\n            processedBuffers.push(buffer);\n          } catch {\n            // Continue with other audio assets\n          }\n        }\n      }\n\n      if (processedBuffers.length === 0) {\n        return null;\n      }\n\n      const mixedBuffer = processor.mixAudioBuffers(processedBuffers);\n      const wavData = processor.audioBufferToWav(mixedBuffer);\n\n      await processor.close();\n      return wavData;\n    } catch {\n      return null;\n    }\n  }\n\n  public async mergeMedia(): Promise<void> {\n    // In browser, we don't need to merge separately\n    // The video is already created with audio in the encoder\n  }\n\n  public async downloadVideos(assets: any[][]): Promise<void> {\n    // Browser doesn't need to download source videos\n    // They're already accessible via URLs\n  }\n\n  public getVideoBlob(): Blob | null {\n    return this.videoBlob;\n  }\n\n  public setProgressCallback(callback: (progress: number) => void): void {\n    this.onProgressCallback = callback;\n  }\n}\n\n/**\n * Browser rendering configuration\n */\nexport interface BrowserRenderConfig {\n  /** \n   * Custom Project object\n   * If not provided, defaults to @twick/visualizer project\n   * \n   * Note: Must be an imported Project object, not a string path.\n   * String paths only work in Node.js environments (server renderer).\n   * \n   * Example:\n   * ```typescript\n   * import myProject from './my-custom-project';\n   * \n   * await renderTwickVideoInBrowser({\n   *   projectFile: myProject,\n   *   variables: { input: {...} }\n   * });\n   * ```\n   */\n  projectFile?: Project;\n  /** Input variables containing project configuration */\n  variables: {\n    input: any;\n    playerId?: string;\n    [key: string]: any;\n  };\n  /** Render settings */\n  settings?: {\n    width?: number;\n    height?: number;\n    fps?: number;\n    quality?: 'low' | 'medium' | 'high';\n    range?: [number, number]; // [start, end] in seconds\n    includeAudio?: boolean; // Enable audio processing\n    downloadAudioSeparately?: boolean; // Download audio.wav separately\n    onAudioReady?: (audioBlob: Blob) => void; // Callback when audio is ready\n    onProgress?: (progress: number) => void;\n    onComplete?: (videoBlob: Blob) => void;\n    onError?: (error: Error) => void;\n  };\n}\n\n/**\n * Renders a Twick video directly in the browser without requiring a server.\n * Uses WebCodecs API for encoding video frames into MP4 format.\n * \n * This function uses the same signature as the server renderer for consistency.\n *\n * @param config - Configuration object containing variables and settings\n * @param config.projectFile - Optional project file path or Project object (defaults to visualizer project)\n * @param config.variables - Variables containing input configuration (tracks, elements, etc.)\n * @param config.settings - Optional render settings (width, height, fps, etc.)\n * @returns Promise resolving to a Blob containing the rendered video\n * \n * @example\n * ```js\n * import { renderTwickVideoInBrowser } from '@twick/browser-render';\n * \n * // Using default visualizer project\n * const videoBlob = await renderTwickVideoInBrowser({\n *   variables: {\n *     input: {\n *       properties: { width: 1920, height: 1080, fps: 30 },\n *       tracks: [\n *         // Your tracks configuration\n *       ]\n *     }\n *   },\n *   settings: {\n *     width: 1920,\n *     height: 1080,\n *     fps: 30,\n *     quality: 'high',\n *     onProgress: (progress) => console.log(`Rendering: ${progress * 100}%`),\n *   }\n * });\n * \n * // Using custom project\n * import myProject from './my-custom-project';\n * const videoBlob = await renderTwickVideoInBrowser({\n *   projectFile: myProject, // Must be an imported Project object\n *   variables: { input: {...} },\n *   settings: {...}\n * });\n * \n * // Download the video\n * const url = URL.createObjectURL(videoBlob);\n * const a = document.createElement('a');\n * a.href = url;\n * a.download = 'video.mp4';\n * a.click();\n * URL.revokeObjectURL(url);\n * ```\n */\nexport const renderTwickVideoInBrowser = async (\n  config: BrowserRenderConfig\n): Promise<Blob> => {\n  // Save original methods to restore later\n  const originalVideoPlay = HTMLVideoElement.prototype.play;\n  const originalAudioPlay = HTMLAudioElement.prototype.play;\n  const originalCreateElement = document.createElement.bind(document);\n  \n  // Override play methods to force muting\n  HTMLVideoElement.prototype.play = function() {\n    this.muted = true;\n    this.volume = 0;\n    return originalVideoPlay.call(this);\n  };\n  \n  HTMLAudioElement.prototype.play = function() {\n    this.muted = true;\n    this.volume = 0;\n    return originalAudioPlay.call(this);\n  };\n  \n  // Override createElement to mute video/audio on creation\n  document.createElement = function(tagName: string, options?: any) {\n    const element = originalCreateElement(tagName, options);\n    if (tagName.toLowerCase() === 'video' || tagName.toLowerCase() === 'audio') {\n      (element as any).muted = true;\n      (element as any).volume = 0;\n    }\n    return element;\n  } as any;\n\n  try {\n    const { projectFile, variables, settings = {} } = config;\n\n    if (!variables || !variables.input) {\n      throw new Error('Invalid configuration. \"variables.input\" is required.');\n    }\n\n    const width = settings.width || variables.input.properties?.width || 1920;\n    const height = settings.height || variables.input.properties?.height || 1080;\n    const fps = settings.fps || variables.input.properties?.fps || 30;\n\n    const project: Project = !projectFile ? defaultProject : (projectFile as Project);\n    project.variables = variables as any;\n\n    // Create renderer settings\n    const renderSettings: RendererSettings = {\n      name: 'browser-render',\n      exporter: {\n        name: '@twick/core/wasm',\n      },\n      size: new Vector2(width, height),\n      resolutionScale: 1,\n      colorSpace: 'srgb',\n      fps: fps,\n      range: settings.range || [0, Infinity],\n      background: variables.input.backgroundColor || '#000000',\n      ...(settings.quality && {\n        quality: settings.quality,\n      }),\n    };\n\n    const renderer = new Renderer(project);\n    const exporter = await BrowserWasmExporter.create(renderSettings);\n    await exporter.start();\n    \n    if (settings.onProgress) {\n      exporter.setProgressCallback(settings.onProgress);\n    }\n\n    await renderer['reloadScenes'](renderSettings);\n    (renderer as any).stage.configure(renderSettings);\n    (renderer as any).playback.fps = renderSettings.fps;\n    \n    // Set playback state to Rendering (critical for video elements)\n    // PlaybackState: Playing = 0, Rendering = 1, Paused = 2, Presenting = 3\n    (renderer as any).playback.state = 1;\n    \n    const totalFrames = await renderer.getNumberOfFrames(renderSettings);\n\n    if (totalFrames === 0 || !isFinite(totalFrames)) {\n      throw new Error(\n        'Cannot render: Video has zero duration. ' +\n        'Please ensure your project has valid content with non-zero duration. ' +\n        'Check that all video elements have valid sources and are properly loaded.'\n      );\n    }\n    \n    const videoElements: any[] = [];\n    if (variables.input.tracks) {\n      variables.input.tracks.forEach((track: any) => {\n        if (track.elements) {\n          track.elements.forEach((el: any) => {\n            if (el.type === 'video') videoElements.push(el);\n          });\n        }\n      });\n    }\n\n    if (videoElements.length > 0) {\n      for (const videoEl of videoElements) {\n        const src = videoEl.props?.src;\n        if (!src || src === 'undefined') continue;\n        const preloadVideo = document.createElement('video');\n        preloadVideo.crossOrigin = 'anonymous';\n        preloadVideo.preload = 'metadata';\n        preloadVideo.src = src;\n        await new Promise<void>((resolve, reject) => {\n          const timeout = setTimeout(\n            () => reject(new Error(`Timeout loading video metadata: ${src.substring(0, 80)}`)),\n            30000\n          );\n          preloadVideo.addEventListener('loadedmetadata', () => {\n            clearTimeout(timeout);\n            resolve();\n          }, { once: true });\n          preloadVideo.addEventListener('error', () => {\n            clearTimeout(timeout);\n            const err = preloadVideo.error;\n            reject(new Error(`Failed to load video: ${err?.message || 'Unknown error'}`));\n          }, { once: true });\n        });\n      }\n    }\n\n    await (renderer as any).playback.recalculate();\n    await (renderer as any).playback.reset();\n    await (renderer as any).playback.seek(0);\n\n    const mediaAssets: AssetInfo[][] = [];\n    \n    for (let frame = 0; frame < totalFrames; frame++) {\n      if (frame > 0) {\n        await (renderer as any).playback.progress();\n      }\n      await (renderer as any).stage.render(\n        (renderer as any).playback.currentScene,\n        (renderer as any).playback.previousScene,\n      );\n      const currentAssets = (renderer as any).playback.currentScene.getMediaAssets?.() || [];\n      mediaAssets.push(currentAssets);\n      const canvas = (renderer as any).stage.finalBuffer;\n      await exporter.handleFrame(canvas, frame);\n      if (settings.onProgress) settings.onProgress(frame / totalFrames);\n    }\n\n    await exporter.stop();\n    \n    let audioData: ArrayBuffer | null = null;\n    if (settings.includeAudio && mediaAssets.length > 0) {\n      audioData = await exporter.generateAudio(mediaAssets, 0, totalFrames);\n    }\n\n    let finalBlob = exporter.getVideoBlob();\n    if (!finalBlob) {\n      throw new Error('Failed to create video blob');\n    }\n\n    if (audioData && settings.includeAudio) {\n      try {\n        finalBlob = await muxAudioVideo({\n          videoBlob: finalBlob,\n          audioBuffer: audioData,\n        });\n      } catch {\n        const audioBlob = new Blob([audioData], { type: 'audio/wav' });\n        const audioUrl = URL.createObjectURL(audioBlob);\n        const a = document.createElement('a');\n        a.href = audioUrl;\n        a.download = 'audio.wav';\n        a.click();\n        URL.revokeObjectURL(audioUrl);\n      }\n    }\n\n    if (settings.onComplete) {\n      settings.onComplete(finalBlob);\n    }\n\n    return finalBlob;\n  } catch (error) {\n    if (config.settings?.onError) {\n      config.settings.onError(error as Error);\n    }\n    throw error;\n  } finally {\n    // Restore original methods\n    HTMLVideoElement.prototype.play = originalVideoPlay;\n    HTMLAudioElement.prototype.play = originalAudioPlay;\n    document.createElement = originalCreateElement as any;\n  }\n};\n\n/**\n * Helper function to download a video blob as a file\n * \n * @param videoBlob - The video blob to download\n * @param filename - The desired filename (default: 'video.mp4')\n * \n * @example\n * ```js\n * const blob = await renderTwickVideoInBrowser(projectData);\n * downloadVideoBlob(blob, 'my-video.mp4');\n * ```\n */\nexport const downloadVideoBlob = (videoBlob: Blob, filename: string = 'video.mp4'): void => {\n  const url = URL.createObjectURL(videoBlob);\n  const a = document.createElement('a');\n  a.href = url;\n  a.download = filename;\n  a.style.display = 'none';\n  document.body.appendChild(a);\n  a.click();\n  document.body.removeChild(a);\n  \n  // Clean up the object URL after a delay\n  setTimeout(() => URL.revokeObjectURL(url), 1000);\n};\n\nexport default renderTwickVideoInBrowser;\n","/**\n * Alternative audio extraction using MediaElementAudioSourceNode\n * This captures audio directly from a playing video element without decoding\n * Works with ANY audio codec the browser can play!\n */\n\nexport class VideoElementAudioExtractor {\n  private audioContext: AudioContext;\n  private video: HTMLVideoElement;\n  private destination: MediaStreamAudioDestinationNode | null = null;\n  private mediaRecorder: MediaRecorder | null = null;\n  private audioChunks: Blob[] = [];\n  \n  constructor(videoSrc: string, sampleRate: number = 48000) {\n    this.audioContext = new AudioContext({ sampleRate });\n    this.video = document.createElement('video');\n    this.video.crossOrigin = 'anonymous';\n    this.video.src = videoSrc;\n    this.video.muted = true; // Mute playback but audio will still be captured\n  }\n  \n  async initialize(): Promise<void> {\n    return new Promise((resolve, reject) => {\n      this.video.addEventListener('loadedmetadata', () => resolve(), { once: true });\n      \n      this.video.addEventListener('error', (e) => {\n        reject(new Error(`Failed to load video for audio extraction: ${e}`));\n      }, { once: true });\n    });\n  }\n  \n  /**\n   * Extract audio by playing the video and capturing audio output\n   */\n  async extractAudio(\n    startTime: number,\n    duration: number,\n    playbackRate: number = 1.0\n  ): Promise<AudioBuffer> {\n    // Create audio source from video element\n    const source = this.audioContext.createMediaElementSource(this.video);\n    \n    // Create destination for recording\n    this.destination = this.audioContext.createMediaStreamDestination();\n    source.connect(this.destination);\n    \n    // Create MediaRecorder to capture audio\n    this.audioChunks = [];\n    this.mediaRecorder = new MediaRecorder(this.destination.stream, {\n      mimeType: 'audio/webm',\n    });\n    \n    this.mediaRecorder.ondataavailable = (event) => {\n      if (event.data.size > 0) {\n        this.audioChunks.push(event.data);\n      }\n    };\n    \n    // Set up video playback\n    this.video.currentTime = startTime;\n    this.video.playbackRate = playbackRate;\n    \n    // Wait for seek to complete\n    await new Promise<void>((resolve) => {\n      this.video.addEventListener('seeked', () => resolve(), { once: true });\n    });\n    \n    // Start recording and playing\n    return new Promise((resolve, reject) => {\n      const recordingTimeout = setTimeout(() => {\n        reject(new Error('Audio extraction timeout'));\n      }, (duration / playbackRate + 5) * 1000); // Add 5s buffer\n      \n      this.mediaRecorder!.start();\n      this.video.play();\n      \n      // Stop recording after duration\n      setTimeout(async () => {\n        clearTimeout(recordingTimeout);\n        this.video.pause();\n        this.mediaRecorder!.stop();\n        \n        // Wait for final data\n        await new Promise<void>((res) => {\n          this.mediaRecorder!.addEventListener('stop', () => res(), { once: true });\n        });\n        \n        // Convert recorded audio to AudioBuffer\n        try {\n          const audioBlob = new Blob(this.audioChunks, { type: 'audio/webm' });\n          const arrayBuffer = await audioBlob.arrayBuffer();\n          const audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer);\n          resolve(audioBuffer);\n        } catch (err) {\n          reject(new Error(`Failed to decode recorded audio: ${err}`));\n        }\n      }, (duration / playbackRate) * 1000);\n    });\n  }\n  \n  async close(): Promise<void> {\n    if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {\n      this.mediaRecorder.stop();\n    }\n    this.video.pause();\n    this.video.src = '';\n    if (this.audioContext.state !== 'closed') {\n      await this.audioContext.close();\n    }\n  }\n}\n\n/**\n * Extract audio from video using MediaElementAudioSourceNode\n * This method works with any audio codec the browser can play\n */\nexport async function extractAudioFromVideo(\n  videoSrc: string,\n  startTime: number,\n  duration: number,\n  playbackRate: number = 1.0,\n  sampleRate: number = 48000\n): Promise<AudioBuffer> {\n  const extractor = new VideoElementAudioExtractor(videoSrc, sampleRate);\n  \n  try {\n    await extractor.initialize();\n    const audioBuffer = await extractor.extractAudio(startTime, duration, playbackRate);\n    return audioBuffer;\n  } finally {\n    await extractor.close();\n  }\n}\n","/**\n * Browser-based audio processing using Web Audio API\n * Mirrors the server's FFmpeg audio generation logic\n */\n\nimport { extractAudioFromVideo } from './video-audio-extractor';\n\nexport interface MediaAsset {\n  key: string;\n  src: string;\n  type: 'video' | 'audio';\n  startInVideo: number;\n  endInVideo: number;\n  duration: number;\n  playbackRate: number;\n  volume: number;\n  trimLeftInSeconds: number;\n  durationInSeconds: number;\n}\n\nexport interface AssetInfo {\n  key: string;\n  src: string;\n  type: 'video' | 'audio';\n  currentTime: number;\n  playbackRate: number;\n  volume: number;\n}\n\n/**\n * Get asset placement from frames (similar to server's getAssetPlacement)\n */\nexport function getAssetPlacement(frames: AssetInfo[][]): MediaAsset[] {\n  const assets: MediaAsset[] = [];\n  const assetTimeMap = new Map<string, { start: number; end: number }>();\n\n  for (let frame = 0; frame < frames.length; frame++) {\n    for (const asset of frames[frame]) {\n      if (!assetTimeMap.has(asset.key)) {\n        assetTimeMap.set(asset.key, {\n          start: asset.currentTime,\n          end: asset.currentTime,\n        });\n        assets.push({\n          key: asset.key,\n          src: asset.src,\n          type: asset.type,\n          startInVideo: frame,\n          endInVideo: frame,\n          duration: 0,\n          durationInSeconds: 0,\n          playbackRate: asset.playbackRate,\n          volume: asset.volume,\n          trimLeftInSeconds: asset.currentTime,\n        });\n      } else {\n        const timeInfo = assetTimeMap.get(asset.key);\n        if (timeInfo) {\n          timeInfo.end = asset.currentTime;\n        }\n        const existingAsset = assets.find(a => a.key === asset.key);\n        if (existingAsset) {\n          existingAsset.endInVideo = frame;\n        }\n      }\n    }\n  }\n\n  // Calculate durations\n  assets.forEach(asset => {\n    const timeInfo = assetTimeMap.get(asset.key);\n    if (timeInfo) {\n      asset.durationInSeconds = (timeInfo.end - timeInfo.start) / asset.playbackRate;\n    }\n    asset.duration = asset.endInVideo - asset.startInVideo + 1;\n  });\n\n  return assets;\n}\n\n/**\n * Audio processor using Web Audio API\n */\nexport class BrowserAudioProcessor {\n  private audioContext: AudioContext;\n\n  constructor(private sampleRate: number = 48000) {\n    this.audioContext = new AudioContext({ sampleRate });\n  }\n\n  /**\n   * Fetch and decode audio from a media source\n   * Falls back to video element extraction if decodeAudioData fails\n   */\n  async fetchAndDecodeAudio(src: string): Promise<AudioBuffer> {\n    try {\n      const response = await fetch(src);\n      const arrayBuffer = await response.arrayBuffer();\n      return await this.audioContext.decodeAudioData(arrayBuffer);\n    } catch (err) {\n      try {\n        return await extractAudioFromVideo(\n          src,\n          0,\n          999999,\n          1.0,\n          this.sampleRate\n        );\n      } catch (fallbackErr) {\n        throw new Error(`Failed to extract audio: ${err}. Fallback also failed: ${fallbackErr}`);\n      }\n    }\n  }\n\n  /**\n   * Process audio asset with playback rate, volume, and timing\n   */\n  async processAudioAsset(\n    asset: MediaAsset,\n    fps: number,\n    totalFrames: number\n  ): Promise<AudioBuffer> {\n    const audioBuffer = await this.fetchAndDecodeAudio(asset.src);\n    \n    const duration = totalFrames / fps;\n    const outputLength = Math.ceil(duration * this.sampleRate);\n    const outputBuffer = this.audioContext.createBuffer(\n      2, // stereo\n      outputLength,\n      this.sampleRate\n    );\n\n    // Calculate timing\n    const startTime = asset.startInVideo / fps;\n    const trimLeft = asset.trimLeftInSeconds / asset.playbackRate;\n    const trimRight = trimLeft + asset.durationInSeconds;\n\n    // Process each channel\n    for (let channel = 0; channel < 2; channel++) {\n      const inputData = audioBuffer.getChannelData(Math.min(channel, audioBuffer.numberOfChannels - 1));\n      const outputData = outputBuffer.getChannelData(channel);\n\n      // Calculate sample positions\n      const startSample = Math.floor(startTime * this.sampleRate);\n      const trimLeftSample = Math.floor(trimLeft * this.sampleRate);\n      const trimRightSample = Math.floor(trimRight * this.sampleRate);\n\n      // Copy and process samples\n      for (let i = 0; i < outputData.length; i++) {\n        const outputTime = i / this.sampleRate;\n        const assetTime = outputTime - startTime;\n        \n        if (assetTime < 0 || assetTime >= asset.durationInSeconds) {\n          outputData[i] = 0; // Silence\n        } else {\n          // Apply playback rate\n          const inputSample = Math.floor((trimLeftSample + assetTime * asset.playbackRate * this.sampleRate));\n          if (inputSample >= 0 && inputSample < inputData.length) {\n            outputData[i] = inputData[inputSample] * asset.volume;\n          } else {\n            outputData[i] = 0;\n          }\n        }\n      }\n    }\n\n    return outputBuffer;\n  }\n\n  /**\n   * Mix multiple audio buffers\n   */\n  mixAudioBuffers(buffers: AudioBuffer[]): AudioBuffer {\n    if (buffers.length === 0) {\n      return this.audioContext.createBuffer(2, 1, this.sampleRate);\n    }\n\n    const maxLength = Math.max(...buffers.map(b => b.length));\n    const mixedBuffer = this.audioContext.createBuffer(2, maxLength, this.sampleRate);\n\n    for (let channel = 0; channel < 2; channel++) {\n      const mixedData = mixedBuffer.getChannelData(channel);\n      \n      buffers.forEach(buffer => {\n        const channelData = buffer.getChannelData(Math.min(channel, buffer.numberOfChannels - 1));\n        for (let i = 0; i < channelData.length; i++) {\n          mixedData[i] = (mixedData[i] || 0) + channelData[i] / buffers.length;\n        }\n      });\n    }\n\n    return mixedBuffer;\n  }\n\n  /**\n   * Convert AudioBuffer to WAV format\n   */\n  audioBufferToWav(buffer: AudioBuffer): ArrayBuffer {\n    const numberOfChannels = buffer.numberOfChannels;\n    const sampleRate = buffer.sampleRate;\n    const format = 1; // PCM\n    const bitDepth = 16;\n\n    const bytesPerSample = bitDepth / 8;\n    const blockAlign = numberOfChannels * bytesPerSample;\n\n    const data = new Float32Array(buffer.length * numberOfChannels);\n    for (let channel = 0; channel < numberOfChannels; channel++) {\n      const channelData = buffer.getChannelData(channel);\n      for (let i = 0; i < buffer.length; i++) {\n        data[i * numberOfChannels + channel] = channelData[i];\n      }\n    }\n\n    const dataLength = data.length * bytesPerSample;\n    const headerLength = 44;\n    const wav = new ArrayBuffer(headerLength + dataLength);\n    const view = new DataView(wav);\n\n    // Write WAV header\n    const writeString = (offset: number, string: string) => {\n      for (let i = 0; i < string.length; i++) {\n        view.setUint8(offset + i, string.charCodeAt(i));\n      }\n    };\n\n    writeString(0, 'RIFF');\n    view.setUint32(4, 36 + dataLength, true);\n    writeString(8, 'WAVE');\n    writeString(12, 'fmt ');\n    view.setUint32(16, 16, true); // fmt chunk size\n    view.setUint16(20, format, true);\n    view.setUint16(22, numberOfChannels, true);\n    view.setUint32(24, sampleRate, true);\n    view.setUint32(28, sampleRate * blockAlign, true);\n    view.setUint16(32, blockAlign, true);\n    view.setUint16(34, bitDepth, true);\n    writeString(36, 'data');\n    view.setUint32(40, dataLength, true);\n\n    // Write audio data\n    const volume = 0.8;\n    let offset = 44;\n    for (let i = 0; i < data.length; i++) {\n      const sample = Math.max(-1, Math.min(1, data[i]));\n      view.setInt16(offset, sample < 0 ? sample * 0x8000 : sample * 0x7FFF, true);\n      offset += 2;\n    }\n\n    return wav;\n  }\n\n  async close() {\n    await this.audioContext.close();\n  }\n}\n","'use client';\n\n/**\n * Browser-based audio/video muxing using FFmpeg.wasm (main thread)\n * Compatible with Next.js 15\n *\n * FFmpeg core files must be served from the app's public folder, e.g.:\n * twick-web/public/ffmpeg/ffmpeg-core.js, ffmpeg-core.wasm\n */\n\nexport interface MuxerOptions {\n  videoBlob: Blob;\n  audioBuffer: ArrayBuffer;\n}\n\n/** Base URL for FFmpeg assets (twick-web public/ffmpeg). Use same-origin URLs directly; toBlobURL causes \"Cannot find module 'blob:...'\" in some environments. */\nfunction getFFmpegBaseURL(): string {\n  if (typeof window !== 'undefined') {\n    return `${window.location.origin}/ffmpeg`;\n  }\n  return '/ffmpeg';\n}\n\nexport async function muxAudioVideo(\n  options: MuxerOptions\n): Promise<Blob> {\n  try {\n    const { FFmpeg } = await import('@ffmpeg/ffmpeg');\n    const { fetchFile } = await import('@ffmpeg/util');\n\n    const ffmpeg = new FFmpeg();\n\n    const base = getFFmpegBaseURL();\n    const coreURL = `${base}/ffmpeg-core.js`;\n    const wasmURL = `${base}/ffmpeg-core.wasm`;\n\n    // Load from same-origin public folder (twick-web/public/ffmpeg). Do NOT use toBlobURL —\n    // it produces blob: URLs that can trigger \"Cannot find module 'blob:...'\".\n    await ffmpeg.load({\n      coreURL,\n      wasmURL,\n    });\n\n    // Write inputs\n    await ffmpeg.writeFile(\n      'video.mp4',\n      await fetchFile(options.videoBlob)\n    );\n\n    await ffmpeg.writeFile(\n      'audio.wav',\n      new Uint8Array(options.audioBuffer)\n    );\n\n    await ffmpeg.exec([\n      '-i', 'video.mp4',\n      '-i', 'audio.wav',\n      '-c:v', 'copy',\n      '-c:a', 'aac',\n      '-b:a', '192k',\n      '-shortest',\n      'output.mp4',\n    ]);\n\n    const data = await ffmpeg.readFile('output.mp4');\n\n    const uint8 =\n      typeof data === 'string'\n        ? new TextEncoder().encode(data)\n        : new Uint8Array(data);\n\n    return new Blob([uint8], { type: 'video/mp4' });\n\n  } catch {\n    return options.videoBlob;\n  }\n}\n","import { useState, useCallback } from 'react';\nimport { renderTwickVideoInBrowser, downloadVideoBlob } from '../browser-renderer';\nimport type { BrowserRenderConfig } from '../browser-renderer';\n\nexport interface UseBrowserRendererOptions {\n  /** \n   * Custom Project object\n   * If not provided, defaults to @twick/visualizer project\n   * \n   * Note: Must be an imported Project object, not a string path.\n   * String paths only work in Node.js (server renderer).\n   * \n   * Example:\n   * ```typescript\n   * import myProject from './my-custom-project';\n   * useBrowserRenderer({ projectFile: myProject })\n   * ```\n   */\n  projectFile?: any;\n  /** Video width in pixels */\n  width?: number;\n  /** Video height in pixels */\n  height?: number;\n  /** Frames per second */\n  fps?: number;\n  /** Render quality */\n  quality?: 'low' | 'medium' | 'high';\n  /** Time range to render [start, end] in seconds */\n  range?: [number, number];\n  /** Include audio in rendered video (experimental) */\n  includeAudio?: boolean;\n  /** Download audio separately as WAV file */\n  downloadAudioSeparately?: boolean;\n  /** Callback when audio is ready */\n  onAudioReady?: (audioBlob: Blob) => void;\n  /** Automatically download the video when rendering completes */\n  autoDownload?: boolean;\n  /** Default filename for downloads */\n  downloadFilename?: string;\n}\n\nexport interface UseBrowserRendererReturn {\n  /** Start rendering the video */\n  render: (variables: BrowserRenderConfig['variables']) => Promise<Blob | null>;\n  /** Current rendering progress (0-1) */\n  progress: number;\n  /** Whether rendering is in progress */\n  isRendering: boolean;\n  /** Error if rendering failed */\n  error: Error | null;\n  /** The rendered video blob (available after rendering completes) */\n  videoBlob: Blob | null;\n  /** Download the rendered video */\n  download: (filename?: string) => void;\n  /** Reset the renderer state */\n  reset: () => void;\n}\n\n/**\n * React hook for rendering Twick videos in the browser\n * \n * Uses the same pattern as the server renderer for consistency.\n * \n * @param options - Rendering options\n * @returns Renderer state and control functions\n * \n * @example\n * ```tsx\n * import { useBrowserRenderer } from '@twick/browser-render';\n * \n * // Using default visualizer project\n * function MyComponent() {\n *   const { render, progress, isRendering, videoBlob, download } = useBrowserRenderer({\n *     width: 1920,\n *     height: 1080,\n *     fps: 30,\n *     autoDownload: true,\n *   });\n * \n *   const handleRender = async () => {\n *     await render({\n *       input: {\n *         properties: { width: 1920, height: 1080, fps: 30 },\n *         tracks: [\n *           // Your tracks configuration\n *         ]\n *       }\n *     });\n *   };\n * \n *   return (\n *     <div>\n *       <button onClick={handleRender} disabled={isRendering}>\n *         {isRendering ? `Rendering... ${(progress * 100).toFixed(0)}%` : 'Render Video'}\n *       </button>\n *       {videoBlob && !autoDownload && (\n *         <button onClick={() => download('my-video.mp4')}>Download</button>\n *       )}\n *     </div>\n *   );\n * }\n * \n * // Using custom project (must import it first)\n * import myProject from './my-project';\n * \n * function CustomProjectComponent() {\n *   const { render } = useBrowserRenderer({\n *     projectFile: myProject, // Pass the imported project object\n *     width: 1920,\n *     height: 1080,\n *   });\n *   \n *   // ... rest of component\n * }\n * ```\n */\nexport const useBrowserRenderer = (options: UseBrowserRendererOptions = {}): UseBrowserRendererReturn => {\n  const [progress, setProgress] = useState(0);\n  const [isRendering, setIsRendering] = useState(false);\n  const [error, setError] = useState<Error | null>(null);\n  const [videoBlob, setVideoBlob] = useState<Blob | null>(null);\n\n  const reset = useCallback(() => {\n    setProgress(0);\n    setIsRendering(false);\n    setError(null);\n    setVideoBlob(null);\n  }, []);\n\n  const download = useCallback((filename?: string) => {\n    if (!videoBlob) {\n      setError(new Error('No video available to download. Please render the video first.'));\n      return;\n    }\n    try {\n      downloadVideoBlob(videoBlob, filename || options.downloadFilename || 'video.mp4');\n    } catch (err) {\n      setError(err instanceof Error ? err : new Error('Failed to download video'));\n    }\n  }, [videoBlob, options.downloadFilename]);\n\n  const render = useCallback(async (variables: BrowserRenderConfig['variables']): Promise<Blob | null> => {\n    reset();\n    setIsRendering(true);\n\n    try {\n      const { projectFile, width, height, fps, quality, range, includeAudio, downloadAudioSeparately, onAudioReady, autoDownload, downloadFilename, ...restOptions } = options;\n      \n      const blob = await renderTwickVideoInBrowser({\n        projectFile,\n        variables,\n        settings: {\n          width,\n          height,\n          includeAudio,\n          downloadAudioSeparately,\n          onAudioReady,\n          fps,\n          quality,\n          range,\n          ...restOptions,\n          onProgress: (p) => {\n            setProgress(p);\n          },\n          onComplete: (blob) => {\n            setVideoBlob(blob);\n            if (autoDownload) {\n              try {\n                downloadVideoBlob(blob, downloadFilename || 'video.mp4');\n              } catch (downloadErr) {\n                setError(downloadErr instanceof Error ? downloadErr : new Error('Failed to auto-download video'));\n              }\n            }\n          },\n          onError: (err) => {\n            setError(err);\n          },\n        },\n      });\n\n      if (!blob) {\n        throw new Error('Rendering failed: No video blob was generated');\n      }\n\n      setVideoBlob(blob);\n      setProgress(1);\n      return blob;\n    } catch (err) {\n      setError(err instanceof Error ? err : new Error(String(err)));\n      return null;\n    } finally {\n      setIsRendering(false);\n    }\n  }, [options, reset]);\n\n  return {\n    render,\n    progress,\n    isRendering,\n    error,\n    videoBlob,\n    download,\n    reset,\n  };\n};\n\nexport default useBrowserRenderer;\n"],"mappings":"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","names":["offset","blob"]}

package/package.json

@@ -1,30 +1,35 @@
 {
   "name": "@twick/browser-render",
-  "version": "0.15.6",
+  "version": "0.15.8",
   "license": "https://github.com/ncounterspecialist/twick/blob/main/LICENSE.md",
   "description": "Browser-native video rendering for Twick using WebCodecs API",
-  "main": "./dist/index.cjs",
+  "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
+      "require": "./dist/index.js"
     }
   },
+  "files": [
+    "dist",
+    "public"
+  ],
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && node scripts/copy-wasm.js",
     "dev": "tsup --watch",
     "test:browser": "tsx src/test-browser-render.ts",
-    "clean": "rimraf dist"
+    "clean": "rimraf dist",
+    "docs": "typedoc"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@twick/core": "^0.15.6",
-    "@twick/visualizer": "0.15.6",
+    "@twick/core": "^0.15.8",
+    "@twick/visualizer": "0.15.8",
     "mp4-wasm": "^1.0.6",
     "mp4box": "^0.5.2",
     "@ffmpeg/ffmpeg": "^0.12.10",
@@ -45,7 +50,9 @@
     "rimraf": "^5.0.5",
     "tsup": "^8.0.0",
     "tsx": "^4.7.0",
-    "typescript": "5.4.2"
+    "typescript": "5.4.2",
+    "typedoc": "^0.25.8",
+    "typedoc-plugin-markdown": "^3.17.1"
   },
   "engines": {
     "node": ">=20.0.0"

package/public/audio-worker.js

@@ -6,13 +6,11 @@
 const CACHE_NAME = 'twick-audio-cache-v1';
 const AUDIO_CACHE = 'audio-assets';
 
-self.addEventListener('install', (event) => {
-  console.log('Audio Service Worker installed');
+self.addEventListener('install', () => {
   self.skipWaiting();
 });
 
 self.addEventListener('activate', (event) => {
-  console.log('Audio Service Worker activated');
   event.waitUntil(self.clients.claim());
 });
 
@@ -80,7 +78,6 @@ async function extractAudio(url) {
       size: blob.size
     };
   } catch (error) {
-    console.error('Failed to extract audio:', error);
     throw error;
   }
 }

package/AUDIO_IMPLEMENTATION.md

@@ -1,217 +0,0 @@
-# Audio Implementation Guide
-
-## Overview
-
-Browser-based audio processing for Twick video rendering, matching the server's FFmpeg implementation.
-
-## Architecture
-
-### 1. **Audio Processor** (`src/audio/audio-processor.ts`)
-- Mirrors server's `generate-audio.ts` logic
-- Uses Web Audio API instead of FFmpeg
-- Handles:
-  - Asset tracking across frames
-  - Audio extraction from video/audio elements
-  - Playback rate adjustment
-  - Volume control
-  - Audio trimming
-  - Multi-track mixing
-
-### 2. **Service Worker** (`public/audio-worker.js`)
-- Caches media assets for offline processing
-- Handles background audio extraction
-- Reduces network requests during rendering
-
-### 3. **Audio/Video Muxer** (`src/audio/audio-video-muxer.ts`)
-- Combines video and audio tracks
-- Two approaches:
-  - **mp4box.js**: Lightweight, browser-native
-  - **FFmpeg.wasm**: More robust, ~30MB bundle
-
-## Implementation Steps
-
-### Step 1: Install Dependencies
-
-```bash
-# For mp4box.js approach (recommended)
-npm install mp4box
-
-# OR for FFmpeg.wasm approach (more features, larger)
-npm install @ffmpeg/ffmpeg @ffmpeg/util
-```
-
-### Step 2: Register Service Worker
-
-```typescript
-// In your app's initialization
-if ('serviceWorker' in navigator) {
-  navigator.serviceWorker.register('/audio-worker.js')
-    .then(reg => console.log('Audio worker registered'))
-    .catch(err => console.error('Audio worker failed:', err));
-}
-```
-
-### Step 3: Enable Audio in Browser Renderer
-
-Update `browser-renderer.ts`:
-
-```typescript
-import { BrowserAudioProcessor, getAssetPlacement } from './audio/audio-processor';
-import { muxAudioVideo } from './audio/audio-video-muxer';
-
-// In BrowserWasmExporter.generateAudio():
-public async generateAudio(
-  assets: any[][],
-  startFrame: number,
-  endFrame: number,
-): Promise<ArrayBuffer | null> {
-  const processor = new BrowserAudioProcessor();
-  const assetPlacements = getAssetPlacement(assets);
-  
-  const processedBuffers: AudioBuffer[] = [];
-  for (const asset of assetPlacements) {
-    if (asset.volume > 0 && asset.playbackRate > 0) {
-      const buffer = await processor.processAudioAsset(
-        asset,
-        this.settings.fps || 30,
-        endFrame - startFrame
-      );
-      processedBuffers.push(buffer);
-    }
-  }
-  
-  const mixedBuffer = processor.mixAudioBuffers(processedBuffers);
-  const wavData = processor.audioBufferToWav(mixedBuffer);
-  
-  await processor.close();
-  return wavData;
-}
-```
-
-### Step 4: Collect Audio Assets During Rendering
-
-In `renderTwickVideoInBrowser()`:
-
-```typescript
-// Track media assets for each frame
-const mediaAssets: AssetInfo[][] = [];
-
-for (let frame = 0; frame < totalFrames; frame++) {
-  // ... existing rendering code ...
-  
-  // Collect media assets from current scene
-  const currentAssets = (renderer as any).playback.currentScene.getMediaAssets?.() || [];
-  mediaAssets.push(currentAssets);
-}
-
-// Generate audio after video rendering
-const audioData = await exporter.generateAudio(mediaAssets, 0, totalFrames);
-
-// Mux audio and video
-if (audioData) {
-  const finalBlob = await muxAudioVideo({
-    videoBlob,
-    audioBuffer: audioData,
-    fps,
-    width,
-    height
-  });
-  return finalBlob;
-}
-```
-
-## API Parity with Server
-
-| Feature | Server (FFmpeg) | Browser (Web Audio) | Status |
-|---------|-----------------|---------------------|--------|
-| Asset Tracking | `getAssetPlacement()` | `getAssetPlacement()` | ✅ Ready |
-| Audio Extraction | FFmpeg decode | `decodeAudioData()` | ✅ Ready |
-| Playback Rate | `atempo` filter | Sample interpolation | ✅ Ready |
-| Volume | `volume` filter | Gain multiplication | ✅ Ready |
-| Trimming | `atrim` filter | Sample slicing | ✅ Ready |
-| Mixing | `amix` filter | Buffer mixing | ✅ Ready |
-| WAV Encoding | FFmpeg encode | Manual WAV encoding | ✅ Ready |
-| Muxing | FFmpeg merge | mp4box.js / FFmpeg.wasm | ⚠️ Needs library |
-
-## Performance Considerations
-
-### Memory Usage
-- Web Audio API decodes entire audio files into memory
-- Large video files can cause memory issues
-- Consider chunked processing for long videos
-
-### Processing Time
-- Audio processing adds 20-50% to render time
-- Service worker caching helps with repeated renders
-- Consider showing separate progress for video/audio
-
-### Browser Limits
-- Chrome: ~2GB audio buffer limit
-- Safari: Stricter memory limits
-- Firefox: Better memory management but slower
-
-## Example Usage
-
-```typescript
-import { useBrowserRenderer } from '@twick/browser-render';
-
-function VideoRenderer() {
-  const { render, progress } = useBrowserRenderer({
-    width: 1920,
-    height: 1080,
-    fps: 30,
-    includeAudio: true, // Enable audio processing
-  });
-
-  const handleRender = async () => {
-    const videoBlob = await render({
-      input: {
-        properties: { width: 1920, height: 1080, fps: 30 },
-        tracks: [
-          {
-            type: 'element',
-            elements: [
-              {
-                type: 'video',
-                src: 'https://example.com/video.mp4',
-                // Audio will be automatically extracted and included
-              }
-            ]
-          }
-        ]
-      }
-    });
-  };
-
-  return <button onClick={handleRender}>Render with Audio</button>;
-}
-```
-
-## Troubleshooting
-
-### No Audio in Output
-1. Check if `includeAudio: true` is set
-2. Verify service worker is registered
-3. Check browser console for Web Audio API errors
-4. Ensure video sources have audio tracks
-
-### Memory Errors
-1. Reduce video quality/resolution
-2. Process shorter segments
-3. Clear service worker cache
-4. Use FFmpeg.wasm with streaming
-
-### Performance Issues
-1. Use service worker caching
-2. Reduce number of audio tracks
-3. Lower audio sample rate (default: 48kHz)
-4. Consider server-side rendering for production
-
-## Future Enhancements
-
-- [ ] Streaming audio processing (chunks)
-- [ ] Web Workers for parallel processing
-- [ ] Real-time audio preview
-- [ ] Audio effects (reverb, EQ, etc.)
-- [ ] WASM-based audio processing for better performance
-- [ ] Support for more audio formats

package/package.json.bak

@@ -1,53 +0,0 @@
-{
-  "name": "@twick/browser-render",
-  "version": "0.15.6",
-  "license": "https://github.com/ncounterspecialist/twick/blob/main/LICENSE.md",
-  "description": "Browser-native video rendering for Twick using WebCodecs API",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
-    }
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "test:browser": "tsx src/test-browser-render.ts",
-    "clean": "rimraf dist"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@twick/core": "^0.15.6",
-    "@twick/visualizer": "0.15.6",
-    "mp4-wasm": "^1.0.6",
-    "mp4box": "^0.5.2",
-    "@ffmpeg/ffmpeg": "^0.12.10",
-    "@ffmpeg/util": "^0.12.1",
-    "@ffmpeg/core": "^0.12.6"
-  },
-  "peerDependencies": {
-    "react": ">=17.0.0"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "@types/node": "^20.10.0",
-    "@types/react": "^18.2.0",
-    "rimraf": "^5.0.5",
-    "tsup": "^8.0.0",
-    "tsx": "^4.7.0",
-    "typescript": "5.4.2"
-  },
-  "engines": {
-    "node": ">=20.0.0"
-  }
-}