framewebworker 0.1.2 → 0.1.3

package/dist/index.js

@@ -469,48 +469,87 @@ 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.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);
+    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);
     }
   }
-  dispatch(jobId, clip, options, onProgress) {
-    return new Promise((resolve, reject) => {
-      this.queue.push({ jobId, clip, options, onProgress, resolve, reject });
-      this.processQueue();
-    });
+  acquire() {
+    if (this.available.length > 0) return Promise.resolve(this.available.pop());
+    return new Promise((resolve) => this.waiters.push(resolve));
   }
-  processQueue() {
-    while (this.queue.length > 0 && this.idleWorkers.length > 0) {
-      const worker = this.idleWorkers.pop();
-      const job = this.queue.shift();
-      this.runJob(worker, job);
+  release(worker) {
+    if (this.waiters.length > 0) {
+      this.waiters.shift()(worker);
+    } else {
+      this.available.push(worker);
     }
   }
-  async runJob(worker, job) {
+  async dispatch(clip, width, height, fps, signal, onProgress) {
+    const worker = await this.acquire();
     try {
-      const frames = await this.executeJob(worker, job);
-      job.resolve(frames);
-    } catch (err) {
-      job.reject(err instanceof Error ? err : new Error(String(err)));
+      return await this.processClip(worker, clip, width, height, fps, signal, onProgress);
     } finally {
-      this.idleWorkers.push(worker);
-      this.processQueue();
+      this.release(worker);
     }
   }
-  async executeJob(worker, job) {
-    const { jobId, clip, options, onProgress } = job;
-    const { fps, width: outW, height: outH, signal } = options;
+  async processClip(worker, clip, width, height, fps, signal, onProgress) {
     let srcUrl;
     let needsRevoke = false;
     if (typeof clip.source === "string") {
@@ -525,245 +564,120 @@ var WorkerPool = class {
     video.muted = true;
     video.crossOrigin = "anonymous";
     video.preload = "auto";
-    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;
-    }
+    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 startSec = clip.startTime ?? 0;
-    const endSec = clip.endTime ?? duration;
-    const clipDuration = endSec - startSec;
+    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 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") {
+    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);
-          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();
+          resolve(msg.frames);
         } else if (msg.type === "error") {
           worker.removeEventListener("message", onMessage);
-          rej(new Error(msg.message));
+          reject(new Error(msg.message));
+        } else if (msg.type === "progress") {
+          onProgress?.(msg.value);
         }
       };
       worker.addEventListener("message", onMessage);
-      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 });
-      }
-      (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;
+    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 worker of this.workers) {
-      worker.terminate();
-    }
-    this.workers = [];
-    this.idleWorkers = [];
+    for (const w of this.workers) w.terminate();
+    this.workers.length = 0;
+    this.available.length = 0;
   }
 };
-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 = 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 });
+  const { onProgress, onComplete, signal } = options;
+  const stitchStart = performance.now();
+  const clipStatuses = clips.map((_, i) => ({
+    index: i,
+    status: "pending",
+    progress: 0
+  }));
+  const clipMetrics = [];
+  const emit = (overall) => {
+    onProgress?.({ overall, clips: clipStatuses.slice() });
   };
-  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++) {
-    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,
+    clipStatuses[ci].status = "rendering";
+    emit(ci / clips.length);
+    const extractStart = performance.now();
+    const frames = await extractFrames(clips[ci], {
+      fps,
       width,
       height,
-      fps,
-      onProgress: (p) => emitClipProgress(p * 0.9)
+      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);
+      }
     });
+    const extractionMs = performance.now() - extractStart;
+    clipStatuses[ci].status = "encoding";
+    const encodeStart = performance.now();
     const blob = await backend.encode(frames, {
       width,
       height,
@@ -771,26 +685,170 @@ async function sequentialStitch(clips, backend, options, fps, width, height) {
       mimeType: options.mimeType ?? "video/mp4",
       quality: options.quality ?? 0.92,
       encoderOptions: options.encoderOptions,
-      onProgress: (p) => emitClipProgress(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);
+      }
+    });
+    const encodingMs = performance.now() - encodeStart;
+    clipStatuses[ci].status = "done";
+    clipStatuses[ci].progress = 1;
+    clipMetrics.push({
+      clipId: String(ci),
+      extractionMs,
+      encodingMs,
+      totalMs: extractionMs + encodingMs,
+      framesExtracted: frames.length
     });
     blobs.push(blob);
   }
+  let finalBlob;
+  let stitchMs = 0;
   if (blobs.length === 1) {
-    onProgress?.({
-      overall: 1,
-      clips: clips.map((_, i) => ({ index: i, status: "done", progress: 1 }))
+    emit(1);
+    finalBlob = blobs[0];
+  } else {
+    const stitchPhaseStart = performance.now();
+    finalBlob = await backend.concat(blobs, {
+      width,
+      height,
+      fps,
+      mimeType: options.mimeType ?? "video/mp4",
+      quality: options.quality ?? 0.92,
+      signal,
+      onProgress: (p) => emit((clips.length - 1 + p) / clips.length)
     });
-    return blobs[0];
+    stitchMs = performance.now() - stitchPhaseStart;
+  }
+  const totalMs = performance.now() - stitchStart;
+  const totalFrames = clipMetrics.reduce((s, c) => s + c.framesExtracted, 0);
+  const metrics = {
+    totalMs,
+    extractionMs: clipMetrics.reduce((s, c) => s + c.extractionMs, 0),
+    encodingMs: clipMetrics.reduce((s, c) => s + c.encodingMs, 0),
+    stitchMs,
+    clips: clipMetrics,
+    framesPerSecond: totalFrames / (totalMs / 1e3)
+  };
+  onComplete?.(metrics);
+  return { blob: finalBlob, metrics };
+}
+async function stitchParallel(clips, backend, options) {
+  const fps = options.fps ?? 30;
+  const width = options.width ?? 1280;
+  const height = options.height ?? 720;
+  const { onProgress, onComplete, signal } = options;
+  const stitchStart = performance.now();
+  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 clipMetrics = new Array(clips.length);
+  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 extractStart = performance.now();
+        const frames = await pool.dispatch(
+          clip,
+          width,
+          height,
+          fps,
+          signal,
+          (p) => {
+            clipStatuses[ci].progress = p * 0.85;
+            emit();
+          }
+        );
+        const extractionMs = performance.now() - extractStart;
+        clipStatuses[ci].status = "encoding";
+        clipStatuses[ci].progress = 0.85;
+        emit();
+        await new Promise((resolve, reject) => {
+          encodeChain = encodeChain.then(async () => {
+            const encodeStart = performance.now();
+            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();
+                }
+              });
+              const encodingMs = performance.now() - encodeStart;
+              clipMetrics[ci] = {
+                clipId: String(ci),
+                extractionMs,
+                encodingMs,
+                totalMs: extractionMs + encodingMs,
+                framesExtracted: frames.length
+              };
+              clipStatuses[ci].status = "done";
+              clipStatuses[ci].progress = 1;
+              emit();
+              resolve();
+            } catch (err) {
+              clipStatuses[ci].status = "error";
+              reject(err);
+              throw err;
+            }
+          });
+        });
+      })
+    );
+    let finalBlob;
+    let stitchMs = 0;
+    if (blobs.length === 1) {
+      onProgress?.({ overall: 1, clips: clipStatuses.slice() });
+      finalBlob = blobs[0];
+    } else {
+      const stitchPhaseStart = performance.now();
+      finalBlob = await backend.concat(blobs, {
+        width,
+        height,
+        fps,
+        mimeType: options.mimeType ?? "video/mp4",
+        quality: options.quality ?? 0.92,
+        signal
+      });
+      stitchMs = performance.now() - stitchPhaseStart;
+    }
+    const totalMs = performance.now() - stitchStart;
+    const totalFrames = clipMetrics.reduce((s, c) => s + c.framesExtracted, 0);
+    const metrics = {
+      totalMs,
+      extractionMs: clipMetrics.reduce((s, c) => s + c.extractionMs, 0),
+      encodingMs: clipMetrics.reduce((s, c) => s + c.encodingMs, 0),
+      stitchMs,
+      clips: clipMetrics,
+      framesPerSecond: totalFrames / (totalMs / 1e3)
+    };
+    onComplete?.(metrics);
+    return { blob: finalBlob, metrics };
+  } finally {
+    pool.terminate();
   }
-  return backend.concat(blobs, {
-    width,
-    height,
-    fps,
-    mimeType: options.mimeType ?? "video/mp4",
-    quality: options.quality ?? 0.92,
-    signal: options.signal
-  });
 }
 
 // src/index.ts
@@ -836,8 +894,8 @@ function createFrameWorker(config = {}) {
     return stitchClips(clips, backend, mergedOpts);
   }
   async function stitchToUrl(clips, options) {
-    const blob = await stitch(clips, options);
-    return URL.createObjectURL(blob);
+    const { blob, metrics } = await stitch(clips, options);
+    return { url: URL.createObjectURL(blob), metrics };
   }
   return { render, renderToUrl, stitch, stitchToUrl };
 }