framewebworker 0.1.0 → 0.1.1

package/dist/index.d.cts

@@ -114,15 +114,29 @@ interface FrameWorkerConfig {
     /** Default output height */
     height?: number;
 }
+type ClipStatus = 'pending' | 'rendering' | 'encoding' | 'done' | 'error';
+interface ClipProgress {
+    index: number;
+    status: ClipStatus;
+    progress: number;
+}
+interface RichProgress {
+    overall: number;
+    clips: ClipProgress[];
+}
+/** Extends RenderOptions with rich per-clip progress reporting */
+interface StitchOptions extends Omit<RenderOptions, 'onProgress'> {
+    onProgress?: (progress: RichProgress) => void;
+}
 interface FrameWorker {
     /** Render a single clip to a Blob */
     render(clip: ClipInput, options?: RenderOptions): Promise<Blob>;
     /** Render a single clip and return an object URL */
     renderToUrl(clip: ClipInput, options?: RenderOptions): Promise<string>;
     /** Stitch multiple clips into one Blob */
-    stitch(clips: ClipInput[], options?: RenderOptions): Promise<Blob>;
+    stitch(clips: ClipInput[], options?: StitchOptions): Promise<Blob>;
     /** Stitch multiple clips and return an object URL */
-    stitchToUrl(clips: ClipInput[], options?: RenderOptions): Promise<string>;
+    stitchToUrl(clips: ClipInput[], options?: StitchOptions): Promise<string>;
 }
 
 declare const STYLE_PRESETS: Record<CaptionStylePreset, CaptionStyle>;
@@ -141,4 +155,4 @@ declare function createFFmpegBackend(): FFmpegBackend;
 
 declare function createFrameWorker(config?: FrameWorkerConfig): FrameWorker;
 
-export { type AspectRatio, type CaptionOptions, type CaptionSegment, type CaptionStyle, type CaptionStylePreset, type ClipInput, type CropOptions, type EncodeOptions, FFmpegBackend, type FrameData, type FrameWorker, type FrameWorkerConfig, type RenderOptions, type RendererBackend, STYLE_PRESETS, createFFmpegBackend, createFrameWorker };
+export { type AspectRatio, type CaptionOptions, type CaptionSegment, type CaptionStyle, type CaptionStylePreset, type ClipInput, type ClipProgress, type ClipStatus, type CropOptions, type EncodeOptions, FFmpegBackend, type FrameData, type FrameWorker, type FrameWorkerConfig, type RenderOptions, type RendererBackend, type RichProgress, STYLE_PRESETS, type StitchOptions, createFFmpegBackend, createFrameWorker };

package/dist/index.d.ts

@@ -114,15 +114,29 @@ interface FrameWorkerConfig {
     /** Default output height */
     height?: number;
 }
+type ClipStatus = 'pending' | 'rendering' | 'encoding' | 'done' | 'error';
+interface ClipProgress {
+    index: number;
+    status: ClipStatus;
+    progress: number;
+}
+interface RichProgress {
+    overall: number;
+    clips: ClipProgress[];
+}
+/** Extends RenderOptions with rich per-clip progress reporting */
+interface StitchOptions extends Omit<RenderOptions, 'onProgress'> {
+    onProgress?: (progress: RichProgress) => void;
+}
 interface FrameWorker {
     /** Render a single clip to a Blob */
     render(clip: ClipInput, options?: RenderOptions): Promise<Blob>;
     /** Render a single clip and return an object URL */
     renderToUrl(clip: ClipInput, options?: RenderOptions): Promise<string>;
     /** Stitch multiple clips into one Blob */
-    stitch(clips: ClipInput[], options?: RenderOptions): Promise<Blob>;
+    stitch(clips: ClipInput[], options?: StitchOptions): Promise<Blob>;
     /** Stitch multiple clips and return an object URL */
-    stitchToUrl(clips: ClipInput[], options?: RenderOptions): Promise<string>;
+    stitchToUrl(clips: ClipInput[], options?: StitchOptions): Promise<string>;
 }
 
 declare const STYLE_PRESETS: Record<CaptionStylePreset, CaptionStyle>;
@@ -141,4 +155,4 @@ declare function createFFmpegBackend(): FFmpegBackend;
 
 declare function createFrameWorker(config?: FrameWorkerConfig): FrameWorker;
 
-export { type AspectRatio, type CaptionOptions, type CaptionSegment, type CaptionStyle, type CaptionStylePreset, type ClipInput, type CropOptions, type EncodeOptions, FFmpegBackend, type FrameData, type FrameWorker, type FrameWorkerConfig, type RenderOptions, type RendererBackend, STYLE_PRESETS, createFFmpegBackend, createFrameWorker };
+export { type AspectRatio, type CaptionOptions, type CaptionSegment, type CaptionStyle, type CaptionStylePreset, type ClipInput, type ClipProgress, type ClipStatus, type CropOptions, type EncodeOptions, FFmpegBackend, type FrameData, type FrameWorker, type FrameWorkerConfig, type RenderOptions, type RendererBackend, type RichProgress, STYLE_PRESETS, type StitchOptions, createFFmpegBackend, createFrameWorker };

package/dist/index.js

@@ -468,25 +468,211 @@ function seekVideo(video, time) {
   });
 }
 
+// src/worker/pool.ts
+var ASPECT_RATIO_MAP2 = {
+  "16:9": [16, 9],
+  "9:16": [9, 16],
+  "1:1": [1, 1],
+  "4:3": [4, 3],
+  "3:4": [3, 4],
+  original: [0, 0]
+};
+function resolveOutputDimensions2(clip, videoWidth, videoHeight, width, height) {
+  const ar = clip.aspectRatio ?? "original";
+  const ratio = ASPECT_RATIO_MAP2[ar] ?? [0, 0];
+  if (ratio[0] === 0) return [width, height];
+  const w = width;
+  const h = Math.round(w * (ratio[1] / ratio[0]));
+  return [w, h];
+}
+function seekVideo2(video, time) {
+  return new Promise((resolve) => {
+    if (Math.abs(video.currentTime - time) < 1e-3) {
+      resolve();
+      return;
+    }
+    const onSeeked = () => {
+      video.removeEventListener("seeked", onSeeked);
+      resolve();
+    };
+    video.addEventListener("seeked", onSeeked);
+    video.currentTime = time;
+  });
+}
+function drawVideoFrame2(ctx, video, clip, outW, outH) {
+  const vw = video.videoWidth;
+  const vh = video.videoHeight;
+  if (clip.crop) {
+    const { x, y, width, height } = clip.crop;
+    ctx.drawImage(video, x * vw, y * vh, width * vw, height * vh, 0, 0, outW, outH);
+  } else {
+    const videoAR = vw / vh;
+    const outAR = outW / outH;
+    let sx = 0, sy = 0, sw = vw, sh = vh;
+    if (videoAR > outAR) {
+      sw = vh * outAR;
+      sx = (vw - sw) / 2;
+    } else if (videoAR < outAR) {
+      sh = vw / outAR;
+      sy = (vh - sh) / 2;
+    }
+    ctx.drawImage(video, sx, sy, sw, sh, 0, 0, outW, outH);
+  }
+}
+var WorkerPool = class {
+  constructor(maxConcurrency) {
+    this.workers = [];
+    this.available = [];
+    this.waiters = [];
+    for (let i = 0; i < maxConcurrency; i++) {
+      const w = new Worker(new URL("./render-worker.js", import.meta.url), { type: "module" });
+      this.workers.push(w);
+      this.available.push(w);
+    }
+  }
+  acquire() {
+    if (this.available.length > 0) return Promise.resolve(this.available.pop());
+    return new Promise((resolve) => this.waiters.push(resolve));
+  }
+  release(worker) {
+    if (this.waiters.length > 0) {
+      this.waiters.shift()(worker);
+    } else {
+      this.available.push(worker);
+    }
+  }
+  async dispatch(clip, width, height, fps, signal, onProgress) {
+    const worker = await this.acquire();
+    try {
+      return await this.processClip(worker, clip, width, height, fps, signal, onProgress);
+    } finally {
+      this.release(worker);
+    }
+  }
+  async processClip(worker, clip, width, height, fps, signal, onProgress) {
+    let srcUrl;
+    let needsRevoke = false;
+    if (typeof clip.source === "string") {
+      srcUrl = clip.source;
+    } else if (clip.source instanceof HTMLVideoElement) {
+      srcUrl = clip.source.src;
+    } else {
+      srcUrl = URL.createObjectURL(clip.source);
+      needsRevoke = true;
+    }
+    const video = document.createElement("video");
+    video.muted = true;
+    video.crossOrigin = "anonymous";
+    video.preload = "auto";
+    await new Promise((resolve, reject) => {
+      video.onloadedmetadata = () => resolve();
+      video.onerror = () => reject(new Error(`Failed to load video: ${srcUrl}`));
+      video.src = srcUrl;
+    });
+    const duration = video.duration;
+    const startTime = clip.startTime ?? 0;
+    const endTime = clip.endTime ?? duration;
+    const clipDuration = endTime - startTime;
+    const [outW, outH] = resolveOutputDimensions2(clip, video.videoWidth, video.videoHeight, width, height);
+    const totalFrames = Math.ceil(clipDuration * fps);
+    const canvas = document.createElement("canvas");
+    canvas.width = outW;
+    canvas.height = outH;
+    const ctx = canvas.getContext("2d");
+    const resultPromise = new Promise((resolve, reject) => {
+      const onMessage = (e) => {
+        const msg = e.data;
+        if (msg.type === "done") {
+          worker.removeEventListener("message", onMessage);
+          resolve(msg.frames);
+        } else if (msg.type === "error") {
+          worker.removeEventListener("message", onMessage);
+          reject(new Error(msg.message));
+        } else if (msg.type === "progress") {
+          onProgress?.(msg.value);
+        }
+      };
+      worker.addEventListener("message", onMessage);
+    });
+    const initMsg = {
+      type: "init",
+      meta: { width: outW, height: outH, fps, captions: clip.captions, totalFrames }
+    };
+    worker.postMessage(initMsg);
+    try {
+      for (let i = 0; i < totalFrames; i++) {
+        if (signal?.aborted) {
+          worker.postMessage({ type: "abort" });
+          throw new DOMException("Render cancelled", "AbortError");
+        }
+        const t = startTime + i / fps;
+        await seekVideo2(video, t);
+        ctx.clearRect(0, 0, outW, outH);
+        drawVideoFrame2(ctx, video, clip, outW, outH);
+        const bitmap = await createImageBitmap(canvas);
+        const frameMsg = { type: "frame", bitmap, timestamp: t - startTime, index: i };
+        worker.postMessage(frameMsg, [bitmap]);
+      }
+      worker.postMessage({ type: "end" });
+      const transferableFrames = await resultPromise;
+      return transferableFrames.map((f) => ({
+        imageData: new ImageData(new Uint8ClampedArray(f.buffer), f.width, f.height),
+        timestamp: f.timestamp,
+        width: f.width,
+        height: f.height
+      }));
+    } finally {
+      if (needsRevoke) URL.revokeObjectURL(srcUrl);
+    }
+  }
+  terminate() {
+    for (const w of this.workers) w.terminate();
+    this.workers.length = 0;
+    this.available.length = 0;
+  }
+};
+
 // src/stitch.ts
+function supportsOffscreenWorkers() {
+  return typeof Worker !== "undefined" && typeof OffscreenCanvas !== "undefined" && typeof createImageBitmap !== "undefined";
+}
 async function stitchClips(clips, backend, options) {
+  if (supportsOffscreenWorkers() && clips.length > 1) {
+    return stitchParallel(clips, backend, options);
+  }
+  return stitchSequential(clips, backend, options);
+}
+async function stitchSequential(clips, backend, options) {
   const fps = options.fps ?? 30;
   const width = options.width ?? 1280;
   const height = options.height ?? 720;
-  const onProgress = options.onProgress;
+  const { onProgress, signal } = options;
+  const clipStatuses = clips.map((_, i) => ({
+    index: i,
+    status: "pending",
+    progress: 0
+  }));
+  const emit = (overall) => {
+    onProgress?.({ overall, clips: clipStatuses.slice() });
+  };
   const blobs = [];
   for (let ci = 0; ci < clips.length; ci++) {
-    const clip = clips[ci];
-    const clipProgress = (p) => {
-      onProgress?.((ci + p * 0.9) / clips.length);
-    };
-    const frames = await extractFrames(clip, {
-      ...options,
+    clipStatuses[ci].status = "rendering";
+    emit(ci / clips.length);
+    const frames = await extractFrames(clips[ci], {
+      fps,
       width,
       height,
-      fps,
-      onProgress: clipProgress
+      mimeType: options.mimeType,
+      quality: options.quality,
+      encoderOptions: options.encoderOptions,
+      signal,
+      onProgress: (p) => {
+        clipStatuses[ci].progress = p * 0.9;
+        emit((ci + p * 0.9) / clips.length);
+      }
     });
+    clipStatuses[ci].status = "encoding";
     const blob = await backend.encode(frames, {
       width,
       height,
@@ -494,13 +680,18 @@ async function stitchClips(clips, backend, options) {
       mimeType: options.mimeType ?? "video/mp4",
       quality: options.quality ?? 0.92,
       encoderOptions: options.encoderOptions,
-      onProgress: (p) => clipProgress(0.9 + p * 0.1),
-      signal: options.signal
+      signal,
+      onProgress: (p) => {
+        clipStatuses[ci].progress = 0.9 + p * 0.1;
+        emit((ci + 0.9 + p * 0.1) / clips.length);
+      }
     });
+    clipStatuses[ci].status = "done";
+    clipStatuses[ci].progress = 1;
     blobs.push(blob);
   }
   if (blobs.length === 1) {
-    onProgress?.(1);
+    emit(1);
     return blobs[0];
   }
   return backend.concat(blobs, {
@@ -509,10 +700,96 @@ async function stitchClips(clips, backend, options) {
     fps,
     mimeType: options.mimeType ?? "video/mp4",
     quality: options.quality ?? 0.92,
-    onProgress: (p) => onProgress?.((clips.length - 1 + p) / clips.length),
-    signal: options.signal
+    signal,
+    onProgress: (p) => emit((clips.length - 1 + p) / clips.length)
   });
 }
+async function stitchParallel(clips, backend, options) {
+  const fps = options.fps ?? 30;
+  const width = options.width ?? 1280;
+  const height = options.height ?? 720;
+  const { onProgress, signal } = options;
+  const concurrency = Math.min(
+    clips.length,
+    typeof navigator !== "undefined" ? navigator.hardwareConcurrency || 2 : 2,
+    4
+  );
+  const clipStatuses = clips.map((_, i) => ({
+    index: i,
+    status: "pending",
+    progress: 0
+  }));
+  const emit = () => {
+    const overall = clipStatuses.reduce((sum, c) => sum + c.progress, 0) / clips.length;
+    onProgress?.({ overall, clips: clipStatuses.slice() });
+  };
+  const pool = new WorkerPool(concurrency);
+  const blobs = new Array(clips.length);
+  let encodeChain = Promise.resolve();
+  try {
+    await Promise.all(
+      clips.map(async (clip, ci) => {
+        clipStatuses[ci].status = "rendering";
+        emit();
+        const frames = await pool.dispatch(
+          clip,
+          width,
+          height,
+          fps,
+          signal,
+          (p) => {
+            clipStatuses[ci].progress = p * 0.85;
+            emit();
+          }
+        );
+        clipStatuses[ci].status = "encoding";
+        clipStatuses[ci].progress = 0.85;
+        emit();
+        await new Promise((resolve, reject) => {
+          encodeChain = encodeChain.then(async () => {
+            try {
+              blobs[ci] = await backend.encode(frames, {
+                width,
+                height,
+                fps,
+                mimeType: options.mimeType ?? "video/mp4",
+                quality: options.quality ?? 0.92,
+                encoderOptions: options.encoderOptions,
+                signal,
+                onProgress: (p) => {
+                  clipStatuses[ci].progress = 0.85 + p * 0.15;
+                  emit();
+                }
+              });
+              clipStatuses[ci].status = "done";
+              clipStatuses[ci].progress = 1;
+              emit();
+              resolve();
+            } catch (err) {
+              clipStatuses[ci].status = "error";
+              reject(err);
+              throw err;
+            }
+          });
+        });
+      })
+    );
+    if (blobs.length === 1) {
+      onProgress?.({ overall: 1, clips: clipStatuses.slice() });
+      return blobs[0];
+    }
+    return backend.concat(blobs, {
+      width,
+      height,
+      fps,
+      mimeType: options.mimeType ?? "video/mp4",
+      quality: options.quality ?? 0.92,
+      signal
+    });
+  } finally {
+    pool.terminate();
+  }
+}
 
 // src/index.ts
 function createFrameWorker(config = {}) {