framewebworker 0.1.1 → 0.1.2

package/dist/index.js

@@ -469,87 +469,48 @@ 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);
+    this.idleWorkers = [];
+    this.queue = [];
+    const count = Math.min(maxConcurrency, navigator.hardwareConcurrency || 2, 4);
+    for (let i = 0; i < count; i++) {
+      const worker = new Worker(
+        new URL("./render-worker.js", import.meta.url),
+        { type: "module" }
+      );
+      this.workers.push(worker);
+      this.idleWorkers.push(worker);
     }
   }
-  acquire() {
-    if (this.available.length > 0) return Promise.resolve(this.available.pop());
-    return new Promise((resolve) => this.waiters.push(resolve));
+  dispatch(jobId, clip, options, onProgress) {
+    return new Promise((resolve, reject) => {
+      this.queue.push({ jobId, clip, options, onProgress, resolve, reject });
+      this.processQueue();
+    });
   }
-  release(worker) {
-    if (this.waiters.length > 0) {
-      this.waiters.shift()(worker);
-    } else {
-      this.available.push(worker);
+  processQueue() {
+    while (this.queue.length > 0 && this.idleWorkers.length > 0) {
+      const worker = this.idleWorkers.pop();
+      const job = this.queue.shift();
+      this.runJob(worker, job);
     }
   }
-  async dispatch(clip, width, height, fps, signal, onProgress) {
-    const worker = await this.acquire();
+  async runJob(worker, job) {
     try {
-      return await this.processClip(worker, clip, width, height, fps, signal, onProgress);
+      const frames = await this.executeJob(worker, job);
+      job.resolve(frames);
+    } catch (err) {
+      job.reject(err instanceof Error ? err : new Error(String(err)));
     } finally {
-      this.release(worker);
+      this.idleWorkers.push(worker);
+      this.processQueue();
     }
   }
-  async processClip(worker, clip, width, height, fps, signal, onProgress) {
+  async executeJob(worker, job) {
+    const { jobId, clip, options, onProgress } = job;
+    const { fps, width: outW, height: outH, signal } = options;
     let srcUrl;
     let needsRevoke = false;
     if (typeof clip.source === "string") {
@@ -564,115 +525,245 @@ var WorkerPool = class {
     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;
-    });
+    try {
+      await new Promise((res, rej) => {
+        video.onloadedmetadata = () => res();
+        video.onerror = () => rej(new Error(`Failed to load video: ${srcUrl}`));
+        video.src = srcUrl;
+      });
+    } catch (err) {
+      if (needsRevoke) URL.revokeObjectURL(srcUrl);
+      throw err;
+    }
     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 startSec = clip.startTime ?? 0;
+    const endSec = clip.endTime ?? duration;
+    const clipDuration = endSec - startSec;
     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") {
+    const captionSegments = clip.captions?.segments ?? [];
+    const baseStylePreset = clip.captions?.style?.preset ?? "modern";
+    const captionStyle = mergeStyle(STYLE_PRESETS[baseStylePreset], clip.captions?.style);
+    const offscreen = new OffscreenCanvas(outW, outH);
+    const initMsg = {
+      type: "init",
+      jobId,
+      canvas: offscreen,
+      meta: { captions: captionSegments, captionStyle, width: outW, height: outH, totalFrames }
+    };
+    worker.postMessage(initMsg, [offscreen]);
+    const resultFrames = [];
+    await new Promise((res, rej) => {
+      let aborted = false;
+      const onMessage = (event) => {
+        const msg = event.data;
+        if (msg.jobId !== jobId) return;
+        if (msg.type === "progress") {
+          onProgress(msg.currentFrame, msg.totalFrames);
+        } else if (msg.type === "done") {
           worker.removeEventListener("message", onMessage);
-          resolve(msg.frames);
+          for (const tf of msg.frames) {
+            resultFrames.push({
+              imageData: new ImageData(new Uint8ClampedArray(tf.buffer), tf.width, tf.height),
+              timestamp: tf.timestamp,
+              width: tf.width,
+              height: tf.height
+            });
+          }
+          res();
         } else if (msg.type === "error") {
           worker.removeEventListener("message", onMessage);
-          reject(new Error(msg.message));
-        } else if (msg.type === "progress") {
-          onProgress?.(msg.value);
+          rej(new Error(msg.message));
         }
       };
       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]);
+      if (signal) {
+        signal.addEventListener("abort", () => {
+          if (aborted) return;
+          aborted = true;
+          const abortMsg = { type: "abort", jobId };
+          worker.postMessage(abortMsg);
+          worker.removeEventListener("message", onMessage);
+          rej(new DOMException("Render cancelled", "AbortError"));
+        }, { once: true });
       }
-      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);
-    }
+      (async () => {
+        try {
+          for (let i = 0; i < totalFrames; i++) {
+            if (signal?.aborted || aborted) break;
+            const t = startSec + i / fps;
+            await seekVideo2(video, t);
+            const vw = video.videoWidth;
+            const vh = video.videoHeight;
+            let sx = 0, sy = 0, sw = vw, sh = vh;
+            if (clip.crop) {
+              sx = clip.crop.x * vw;
+              sy = clip.crop.y * vw;
+              sw = clip.crop.width * vw;
+              sh = clip.crop.height * vh;
+            } else {
+              const videoAR = vw / vh;
+              const outAR = outW / outH;
+              if (videoAR > outAR) {
+                sw = vh * outAR;
+                sx = (vw - sw) / 2;
+              } else if (videoAR < outAR) {
+                sh = vw / outAR;
+                sy = (vh - sh) / 2;
+              }
+            }
+            const bitmap = await createImageBitmap(video, sx, sy, sw, sh, {
+              resizeWidth: outW,
+              resizeHeight: outH
+            });
+            const frameMsg = {
+              type: "frame",
+              jobId,
+              frameIndex: i,
+              bitmap,
+              timestamp: t - startSec
+            };
+            worker.postMessage(frameMsg, [bitmap]);
+          }
+          if (!signal?.aborted && !aborted) {
+            const endMsg = { type: "end", jobId };
+            worker.postMessage(endMsg);
+          }
+        } catch (err) {
+          if (!aborted) rej(err instanceof Error ? err : new Error(String(err)));
+        }
+      })();
+    });
+    if (needsRevoke) URL.revokeObjectURL(srcUrl);
+    return resultFrames;
   }
   terminate() {
-    for (const w of this.workers) w.terminate();
-    this.workers.length = 0;
-    this.available.length = 0;
+    for (const worker of this.workers) {
+      worker.terminate();
+    }
+    this.workers = [];
+    this.idleWorkers = [];
   }
 };
+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;
+  });
+}
 
 // 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, signal } = options;
-  const clipStatuses = clips.map((_, i) => ({
-    index: i,
-    status: "pending",
-    progress: 0
-  }));
-  const emit = (overall) => {
-    onProgress?.({ overall, clips: clipStatuses.slice() });
+  const onProgress = options.onProgress;
+  if (!("OffscreenCanvas" in globalThis) || !("Worker" in globalThis)) {
+    return sequentialStitch(clips, backend, options, fps, width, height);
+  }
+  const concurrency = Math.min(clips.length, navigator.hardwareConcurrency || 2, 4);
+  const pool = new WorkerPool(concurrency);
+  const clipStatuses = clips.map(() => "queued");
+  const clipProgresses = clips.map(() => 0);
+  const emitProgress = () => {
+    if (!onProgress) return;
+    const overall = clipProgresses.reduce((a, b) => a + b, 0) / clips.length;
+    const clipData = clips.map((_, i) => ({
+      index: i,
+      status: clipStatuses[i],
+      progress: clipProgresses[i]
+    }));
+    onProgress({ overall, clips: clipData });
   };
+  try {
+    const frameArrays = await Promise.all(
+      clips.map(async (clip, i) => {
+        clipStatuses[i] = "rendering";
+        emitProgress();
+        try {
+          const frames = await pool.dispatch(
+            `clip-${i}`,
+            clip,
+            { fps, width, height, signal: options.signal },
+            (current, total) => {
+              clipProgresses[i] = current / total;
+              emitProgress();
+            }
+          );
+          return frames;
+        } catch (err) {
+          clipStatuses[i] = "failed";
+          emitProgress();
+          throw err;
+        }
+      })
+    );
+    const blobs = [];
+    for (let i = 0; i < frameArrays.length; i++) {
+      const blob = await backend.encode(frameArrays[i], {
+        width,
+        height,
+        fps,
+        mimeType: options.mimeType ?? "video/mp4",
+        quality: options.quality ?? 0.92,
+        encoderOptions: options.encoderOptions,
+        signal: options.signal
+      });
+      clipStatuses[i] = "done";
+      clipProgresses[i] = 1;
+      emitProgress();
+      blobs.push(blob);
+    }
+    if (blobs.length === 1) {
+      onProgress?.({
+        overall: 1,
+        clips: clips.map((_, i) => ({ index: i, status: "done", progress: 1 }))
+      });
+      return blobs[0];
+    }
+    return backend.concat(blobs, {
+      width,
+      height,
+      fps,
+      mimeType: options.mimeType ?? "video/mp4",
+      quality: options.quality ?? 0.92,
+      signal: options.signal
+    });
+  } finally {
+    pool.terminate();
+  }
+}
+async function sequentialStitch(clips, backend, options, fps, width, height) {
+  const onProgress = options.onProgress;
   const blobs = [];
   for (let ci = 0; ci < clips.length; ci++) {
-    clipStatuses[ci].status = "rendering";
-    emit(ci / clips.length);
-    const frames = await extractFrames(clips[ci], {
-      fps,
+    const clip = clips[ci];
+    const emitClipProgress = (p) => {
+      if (!onProgress) return;
+      const overall = (ci + p) / clips.length;
+      onProgress({
+        overall,
+        clips: clips.map((_, i) => ({
+          index: i,
+          status: i < ci ? "done" : i === ci ? "rendering" : "queued",
+          progress: i < ci ? 1 : i === ci ? p : 0
+        }))
+      });
+    };
+    const frames = await extractFrames(clip, {
+      ...options,
       width,
       height,
-      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);
-      }
+      fps,
+      onProgress: (p) => emitClipProgress(p * 0.9)
     });
-    clipStatuses[ci].status = "encoding";
     const blob = await backend.encode(frames, {
       width,
       height,
@@ -680,18 +771,16 @@ async function stitchSequential(clips, backend, options) {
       mimeType: options.mimeType ?? "video/mp4",
       quality: options.quality ?? 0.92,
       encoderOptions: options.encoderOptions,
-      signal,
-      onProgress: (p) => {
-        clipStatuses[ci].progress = 0.9 + p * 0.1;
-        emit((ci + 0.9 + p * 0.1) / clips.length);
-      }
+      onProgress: (p) => emitClipProgress(0.9 + p * 0.1),
+      signal: options.signal
     });
-    clipStatuses[ci].status = "done";
-    clipStatuses[ci].progress = 1;
     blobs.push(blob);
   }
   if (blobs.length === 1) {
-    emit(1);
+    onProgress?.({
+      overall: 1,
+      clips: clips.map((_, i) => ({ index: i, status: "done", progress: 1 }))
+    });
     return blobs[0];
   }
   return backend.concat(blobs, {
@@ -700,96 +789,9 @@ async function stitchSequential(clips, backend, options) {
     fps,
     mimeType: options.mimeType ?? "video/mp4",
     quality: options.quality ?? 0.92,
-    signal,
-    onProgress: (p) => emit((clips.length - 1 + p) / clips.length)
+    signal: options.signal
   });
 }
-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 = {}) {