@bendyline/squisq-video-react 1.1.1 → 1.2.0

package/dist/workers/encode.worker.js

@@ -1,341 +1,295 @@
-/**
- * Video Encoding Web Worker
- *
- * Encodes video frames to MP4 using one of two backends:
- * - **WebCodecs** (preferred): Streaming H.264 encoding via VideoEncoder + mp4-muxer.
- *   Each frame is encoded as it arrives — minimal memory footprint.
- * - **ffmpeg.wasm** (fallback): Batch encoding in ~10-second segments.
- *   Used when WebCodecs is unavailable (older browsers).
- *
- * Frames arrive as ImageBitmap (zero-copy transfer from main thread).
- */
-import { createMp4Muxer } from '../mp4Mux.js';
-// ── State ──────────────────────────────────────────────────────────
-let backend = null;
-let cancelled = false;
-// WebCodecs state
-let videoEncoder = null;
-let muxer = null;
-// ffmpeg.wasm state
-let ffmpegInstance = null;
-let ffmpegFrames = [];
-let ffmpegConfig = null;
-// Frame tracking
-let totalFramesReceived = 0;
-let _totalFramesEncoded = 0;
-// ── Helpers ────────────────────────────────────────────────────────
+import {
+  createMp4Muxer
+} from "../chunk-LZYWP4HB.js";
+
+// src/workers/encodeParams.ts
+function bitrateForQuality(quality, width, height) {
+  const pixels = width * height;
+  const baseBitrate = pixels * 4;
+  switch (quality) {
+    case "draft":
+      return Math.round(baseBitrate * 0.5);
+    case "high":
+      return Math.round(baseBitrate * 2);
+    default:
+      return baseBitrate;
+  }
+}
+
+// src/workers/encode.worker.ts
+var backend = null;
+var cancelled = false;
+var videoEncoder = null;
+var muxer = null;
+var ffmpegInstance = null;
+var ffmpegFrames = [];
+var ffmpegConfig = null;
+var totalFramesReceived = 0;
+var _totalFramesEncoded = 0;
 function post(msg, transfer) {
-    self.postMessage(msg, { transfer: transfer ?? [] });
+  self.postMessage(msg, { transfer: transfer ?? [] });
 }
 function postProgress(percent, phase) {
-    post({ type: 'progress', percent, phase });
+  post({ type: "progress", percent, phase });
 }
 function postError(message) {
-    post({ type: 'error', message });
+  post({ type: "error", message });
 }
-// ── Feature Detection ──────────────────────────────────────────────
 function hasWebCodecs() {
-    return typeof VideoEncoder !== 'undefined' && typeof VideoFrame !== 'undefined';
+  return typeof VideoEncoder !== "undefined" && typeof VideoFrame !== "undefined";
 }
 function hasSharedArrayBuffer() {
-    return typeof SharedArrayBuffer !== 'undefined';
+  return typeof SharedArrayBuffer !== "undefined";
 }
-/**
- * Check whether the browser's WebCodecs implementation actually supports
- * the H.264 Baseline profile we use. Linux Chromium ships without the
- * proprietary H.264 encoder, so `VideoEncoder` exists but `configure()`
- * for `avc1.*` fails asynchronously.
- */
 async function supportsWebCodecsH264(config) {
-    if (!hasWebCodecs())
-        return false;
-    try {
-        const support = await VideoEncoder.isConfigSupported({
-            codec: 'avc1.42001f',
-            width: config.width,
-            height: config.height,
-            bitrate: bitrateForQuality(config.quality, config.width, config.height),
-            framerate: config.fps,
-        });
-        return support.supported === true;
-    }
-    catch {
-        return false;
-    }
-}
-// ── WebCodecs Backend ──────────────────────────────────────────────
-function initWebCodecs(config) {
-    muxer = createMp4Muxer({
-        width: config.width,
-        height: config.height,
-        fps: config.fps,
-    });
-    videoEncoder = new VideoEncoder({
-        output(chunk, meta) {
-            if (cancelled)
-                return;
-            muxer.addVideoChunk(chunk, meta ?? undefined);
-            _totalFramesEncoded++;
-        },
-        error(err) {
-            postError(`WebCodecs encoder error: ${err.message}`);
-        },
-    });
-    // Use H.264 Baseline for maximum compatibility
-    videoEncoder.configure({
-        codec: 'avc1.42001f',
-        width: config.width,
-        height: config.height,
-        bitrate: bitrateForQuality(config.quality, config.width, config.height),
-        framerate: config.fps,
+  if (!hasWebCodecs()) return false;
+  try {
+    const support = await VideoEncoder.isConfigSupported({
+      codec: "avc1.42001f",
+      width: config.width,
+      height: config.height,
+      bitrate: bitrateForQuality(config.quality, config.width, config.height),
+      framerate: config.fps
     });
+    return support.supported === true;
+  } catch {
+    return false;
+  }
 }
-function bitrateForQuality(quality, width, height) {
-    const pixels = width * height;
-    const baseBitrate = pixels * 4; // ~4 bits per pixel baseline
-    switch (quality) {
-        case 'draft':
-            return Math.round(baseBitrate * 0.5);
-        case 'high':
-            return Math.round(baseBitrate * 2);
-        default: // normal
-            return baseBitrate;
+function initWebCodecs(config) {
+  muxer = createMp4Muxer({
+    width: config.width,
+    height: config.height,
+    fps: config.fps
+  });
+  videoEncoder = new VideoEncoder({
+    output(chunk, meta) {
+      if (cancelled) return;
+      muxer.addVideoChunk(chunk, meta ?? void 0);
+      _totalFramesEncoded++;
+    },
+    error(err) {
+      postError(`WebCodecs encoder error: ${err.message}`);
     }
+  });
+  videoEncoder.configure({
+    codec: "avc1.42001f",
+    width: config.width,
+    height: config.height,
+    bitrate: bitrateForQuality(config.quality, config.width, config.height),
+    framerate: config.fps
+  });
 }
 async function encodeFrameWebCodecs(msg) {
-    if (!videoEncoder || cancelled) {
-        msg.bitmap.close();
-        return;
-    }
-    const frame = new VideoFrame(msg.bitmap, { timestamp: msg.timestamp });
-    const keyFrame = msg.frameIndex % 30 === 0; // Key frame every 30 frames
-    videoEncoder.encode(frame, { keyFrame });
-    frame.close();
+  if (!videoEncoder || cancelled) {
     msg.bitmap.close();
-    totalFramesReceived++;
-    postProgress(Math.round((totalFramesReceived / (totalFramesReceived + 1)) * 50), `Encoding frame ${totalFramesReceived}`);
+    return;
+  }
+  const frame = new VideoFrame(msg.bitmap, { timestamp: msg.timestamp });
+  const keyFrame = msg.frameIndex % 30 === 0;
+  videoEncoder.encode(frame, { keyFrame });
+  frame.close();
+  msg.bitmap.close();
+  totalFramesReceived++;
+  postProgress(
+    Math.round(totalFramesReceived / (totalFramesReceived + 1) * 50),
+    `Encoding frame ${totalFramesReceived}`
+  );
 }
 async function finalizeWebCodecs() {
-    if (!videoEncoder || !muxer || cancelled)
-        return;
-    postProgress(50, 'Flushing encoder…');
-    await videoEncoder.flush();
-    videoEncoder.close();
-    videoEncoder = null;
-    postProgress(90, 'Finalizing MP4…');
-    const buffer = muxer.finalize();
-    muxer = null;
-    post({ type: 'complete', data: buffer, size: buffer.byteLength }, [buffer]);
+  if (!videoEncoder || !muxer || cancelled) return;
+  postProgress(50, "Flushing encoder\u2026");
+  await videoEncoder.flush();
+  videoEncoder.close();
+  videoEncoder = null;
+  postProgress(90, "Finalizing MP4\u2026");
+  const buffer = muxer.finalize();
+  muxer = null;
+  post({ type: "complete", data: buffer, size: buffer.byteLength }, [buffer]);
 }
-// ── ffmpeg.wasm Backend ────────────────────────────────────────────
 async function initFfmpegWasm(config) {
-    ffmpegConfig = config;
-    ffmpegFrames = [];
-    totalFramesReceived = 0;
-    // Lazy-load ffmpeg.wasm
-    try {
-        const { FFmpeg } = await import('@ffmpeg/ffmpeg');
-        const ffmpeg = new FFmpeg();
-        await ffmpeg.load();
-        ffmpegInstance = ffmpeg;
-    }
-    catch (err) {
-        const message = err instanceof Error ? err.message : String(err);
-        postError(`Failed to load ffmpeg.wasm: ${message}. ` +
-            'Ensure @ffmpeg/ffmpeg and @ffmpeg/util are installed and ' +
-            'Cross-Origin-Isolation headers (COOP/COEP) are set.');
-    }
+  ffmpegConfig = config;
+  ffmpegFrames = [];
+  totalFramesReceived = 0;
+  try {
+    const { FFmpeg } = await import("@ffmpeg/ffmpeg");
+    const ffmpeg = new FFmpeg();
+    await ffmpeg.load();
+    ffmpegInstance = ffmpeg;
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    postError(
+      `Failed to load ffmpeg.wasm: ${message}. Ensure @ffmpeg/ffmpeg and @ffmpeg/util are installed and Cross-Origin-Isolation headers (COOP/COEP) are set.`
+    );
+  }
 }
 async function encodeFrameFfmpeg(msg) {
-    if (cancelled) {
-        msg.bitmap.close();
-        return;
-    }
-    // Convert ImageBitmap to PNG bytes via OffscreenCanvas
-    const canvas = new OffscreenCanvas(msg.bitmap.width, msg.bitmap.height);
-    const ctx = canvas.getContext('2d');
-    if (!ctx) {
-        msg.bitmap.close();
-        postError('Failed to create OffscreenCanvas 2D context');
-        return;
-    }
-    ctx.drawImage(msg.bitmap, 0, 0);
+  if (cancelled) {
     msg.bitmap.close();
-    const blob = await canvas.convertToBlob({ type: 'image/png' });
-    const arrayBuffer = await blob.arrayBuffer();
-    ffmpegFrames.push({ data: new Uint8Array(arrayBuffer), index: msg.frameIndex });
-    totalFramesReceived++;
-    postProgress(Math.round((totalFramesReceived / (totalFramesReceived + 1)) * 40), `Collecting frame ${totalFramesReceived}`);
-    // Batch encode every ~10 seconds worth of frames
-    const batchSize = (ffmpegConfig?.fps ?? 30) * 10;
-    if (ffmpegFrames.length >= batchSize) {
-        await encodeFfmpegBatch();
-    }
+    return;
+  }
+  const canvas = new OffscreenCanvas(msg.bitmap.width, msg.bitmap.height);
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    msg.bitmap.close();
+    postError("Failed to create OffscreenCanvas 2D context");
+    return;
+  }
+  ctx.drawImage(msg.bitmap, 0, 0);
+  msg.bitmap.close();
+  const blob = await canvas.convertToBlob({ type: "image/png" });
+  const arrayBuffer = await blob.arrayBuffer();
+  ffmpegFrames.push({ data: new Uint8Array(arrayBuffer), index: msg.frameIndex });
+  totalFramesReceived++;
+  postProgress(
+    Math.round(totalFramesReceived / (totalFramesReceived + 1) * 40),
+    `Collecting frame ${totalFramesReceived}`
+  );
+  const batchSize = (ffmpegConfig?.fps ?? 30) * 10;
+  if (ffmpegFrames.length >= batchSize) {
+    await encodeFfmpegBatch();
+  }
 }
-/** Segments already encoded as MP4 data. */
-const ffmpegSegments = [];
+var ffmpegSegments = [];
 async function encodeFfmpegBatch() {
-    if (!ffmpegInstance || ffmpegFrames.length === 0 || cancelled)
-        return;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const ffmpeg = ffmpegInstance;
-    const config = ffmpegConfig;
-    const batchIndex = ffmpegSegments.length;
-    postProgress(40 + batchIndex * 5, `Encoding batch ${batchIndex + 1}…`);
-    // Write frames to virtual filesystem
-    for (const frame of ffmpegFrames) {
-        const paddedIndex = String(frame.index).padStart(6, '0');
-        await ffmpeg.writeFile(`frame_${paddedIndex}.png`, frame.data);
+  if (!ffmpegInstance || ffmpegFrames.length === 0 || cancelled) return;
+  const ffmpeg = ffmpegInstance;
+  const config = ffmpegConfig;
+  const batchIndex = ffmpegSegments.length;
+  postProgress(40 + batchIndex * 5, `Encoding batch ${batchIndex + 1}\u2026`);
+  for (const frame of ffmpegFrames) {
+    const paddedIndex = String(frame.index).padStart(6, "0");
+    await ffmpeg.writeFile(`frame_${paddedIndex}.png`, frame.data);
+  }
+  const firstIndex = ffmpegFrames[0].index;
+  const segmentName = `segment_${batchIndex}.mp4`;
+  await ffmpeg.exec([
+    "-framerate",
+    String(config.fps),
+    "-start_number",
+    String(firstIndex),
+    "-i",
+    `frame_%06d.png`,
+    "-frames:v",
+    String(ffmpegFrames.length),
+    "-c:v",
+    "libx264",
+    "-pix_fmt",
+    "yuv420p",
+    "-preset",
+    config.quality === "draft" ? "ultrafast" : config.quality === "high" ? "slow" : "medium",
+    "-crf",
+    config.quality === "draft" ? "28" : config.quality === "high" ? "18" : "23",
+    segmentName
+  ]);
+  const segmentData = await ffmpeg.readFile(segmentName);
+  ffmpegSegments.push(segmentData);
+  for (const frame of ffmpegFrames) {
+    const paddedIndex = String(frame.index).padStart(6, "0");
+    await ffmpeg.deleteFile(`frame_${paddedIndex}.png`);
+  }
+  await ffmpeg.deleteFile(segmentName);
+  ffmpegFrames = [];
+}
+async function finalizeFfmpeg() {
+  if (!ffmpegInstance || cancelled) return;
+  await encodeFfmpegBatch();
+  const ffmpeg = ffmpegInstance;
+  postProgress(85, "Concatenating segments\u2026");
+  let finalData;
+  if (ffmpegSegments.length === 1) {
+    finalData = ffmpegSegments[0];
+  } else if (ffmpegSegments.length > 1) {
+    const concatList = [];
+    for (let i = 0; i < ffmpegSegments.length; i++) {
+      const name = `seg_${i}.mp4`;
+      await ffmpeg.writeFile(name, ffmpegSegments[i]);
+      concatList.push(`file '${name}'`);
     }
-    const firstIndex = ffmpegFrames[0].index;
-    const segmentName = `segment_${batchIndex}.mp4`;
-    // Encode batch to MP4 segment
+    await ffmpeg.writeFile("concat.txt", new TextEncoder().encode(concatList.join("\n")));
     await ffmpeg.exec([
-        '-framerate',
-        String(config.fps),
-        '-start_number',
-        String(firstIndex),
-        '-i',
-        `frame_%06d.png`,
-        '-frames:v',
-        String(ffmpegFrames.length),
-        '-c:v',
-        'libx264',
-        '-pix_fmt',
-        'yuv420p',
-        '-preset',
-        config.quality === 'draft' ? 'ultrafast' : config.quality === 'high' ? 'slow' : 'medium',
-        '-crf',
-        config.quality === 'draft' ? '28' : config.quality === 'high' ? '18' : '23',
-        segmentName,
+      "-f",
+      "concat",
+      "-safe",
+      "0",
+      "-i",
+      "concat.txt",
+      "-c",
+      "copy",
+      "output.mp4"
     ]);
-    // Read segment and clean up frames
-    const segmentData = await ffmpeg.readFile(segmentName);
-    ffmpegSegments.push(segmentData);
-    // Clean up frame files
-    for (const frame of ffmpegFrames) {
-        const paddedIndex = String(frame.index).padStart(6, '0');
-        await ffmpeg.deleteFile(`frame_${paddedIndex}.png`);
+    finalData = await ffmpeg.readFile("output.mp4");
+    for (let i = 0; i < ffmpegSegments.length; i++) {
+      await ffmpeg.deleteFile(`seg_${i}.mp4`);
     }
-    await ffmpeg.deleteFile(segmentName);
-    // Free batch memory
-    ffmpegFrames = [];
+    await ffmpeg.deleteFile("concat.txt");
+    await ffmpeg.deleteFile("output.mp4");
+  } else {
+    postError("No frames were encoded");
+    return;
+  }
+  postProgress(95, "Preparing download\u2026");
+  const sliced = new Uint8Array(finalData).buffer;
+  post({ type: "complete", data: sliced, size: sliced.byteLength }, [sliced]);
+  ffmpegInstance = null;
+  ffmpegSegments.length = 0;
 }
-async function finalizeFfmpeg() {
-    if (!ffmpegInstance || cancelled)
-        return;
-    // Encode any remaining frames
-    await encodeFfmpegBatch();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const ffmpeg = ffmpegInstance;
-    postProgress(85, 'Concatenating segments…');
-    let finalData;
-    if (ffmpegSegments.length === 1) {
-        // Single segment — no concat needed
-        finalData = ffmpegSegments[0];
-    }
-    else if (ffmpegSegments.length > 1) {
-        // Write segments and concat list
-        const concatList = [];
-        for (let i = 0; i < ffmpegSegments.length; i++) {
-            const name = `seg_${i}.mp4`;
-            await ffmpeg.writeFile(name, ffmpegSegments[i]);
-            concatList.push(`file '${name}'`);
+self.onmessage = async (event) => {
+  const msg = event.data;
+  try {
+    switch (msg.type) {
+      case "init": {
+        cancelled = false;
+        totalFramesReceived = 0;
+        _totalFramesEncoded = 0;
+        if (await supportsWebCodecsH264(msg)) {
+          backend = "webcodecs";
+          initWebCodecs(msg);
+        } else if (hasSharedArrayBuffer()) {
+          backend = "ffmpeg-wasm";
+          await initFfmpegWasm(msg);
+        } else {
+          postError(
+            "No video encoding support available. WebCodecs H.264 is unavailable (typical on Linux Chromium without proprietary codecs) and ffmpeg.wasm requires SharedArrayBuffer (Cross-Origin-Isolation headers)."
+          );
+          return;
         }
-        await ffmpeg.writeFile('concat.txt', new TextEncoder().encode(concatList.join('\n')));
-        await ffmpeg.exec([
-            '-f',
-            'concat',
-            '-safe',
-            '0',
-            '-i',
-            'concat.txt',
-            '-c',
-            'copy',
-            'output.mp4',
-        ]);
-        finalData = await ffmpeg.readFile('output.mp4');
-        // Clean up
-        for (let i = 0; i < ffmpegSegments.length; i++) {
-            await ffmpeg.deleteFile(`seg_${i}.mp4`);
+        post({ type: "capabilities", backend });
+        postProgress(0, "Encoder ready");
+        break;
+      }
+      case "frame": {
+        if (backend === "webcodecs") {
+          await encodeFrameWebCodecs(msg);
+        } else if (backend === "ffmpeg-wasm") {
+          await encodeFrameFfmpeg(msg);
         }
-        await ffmpeg.deleteFile('concat.txt');
-        await ffmpeg.deleteFile('output.mp4');
-    }
-    else {
-        postError('No frames were encoded');
-        return;
-    }
-    postProgress(95, 'Preparing download…');
-    // Convert Uint8Array to a transferable ArrayBuffer
-    const sliced = new Uint8Array(finalData).buffer;
-    post({ type: 'complete', data: sliced, size: sliced.byteLength }, [sliced]);
-    // Clean up
-    ffmpegInstance = null;
-    ffmpegSegments.length = 0;
-}
-// ── Message Handler ────────────────────────────────────────────────
-self.onmessage = async (event) => {
-    const msg = event.data;
-    try {
-        switch (msg.type) {
-            case 'init': {
-                cancelled = false;
-                totalFramesReceived = 0;
-                _totalFramesEncoded = 0;
-                if (await supportsWebCodecsH264(msg)) {
-                    backend = 'webcodecs';
-                    initWebCodecs(msg);
-                }
-                else if (hasSharedArrayBuffer()) {
-                    backend = 'ffmpeg-wasm';
-                    await initFfmpegWasm(msg);
-                }
-                else {
-                    postError('No video encoding support available. ' +
-                        'WebCodecs H.264 is unavailable (typical on Linux Chromium without proprietary codecs) ' +
-                        'and ffmpeg.wasm requires SharedArrayBuffer (Cross-Origin-Isolation headers).');
-                    return;
-                }
-                post({ type: 'capabilities', backend });
-                postProgress(0, 'Encoder ready');
-                break;
-            }
-            case 'frame': {
-                if (backend === 'webcodecs') {
-                    await encodeFrameWebCodecs(msg);
-                }
-                else if (backend === 'ffmpeg-wasm') {
-                    await encodeFrameFfmpeg(msg);
-                }
-                break;
-            }
-            case 'finalize': {
-                if (backend === 'webcodecs') {
-                    await finalizeWebCodecs();
-                }
-                else if (backend === 'ffmpeg-wasm') {
-                    await finalizeFfmpeg();
-                }
-                break;
-            }
-            case 'cancel': {
-                cancelled = true;
-                if (videoEncoder && videoEncoder.state !== 'closed') {
-                    videoEncoder.close();
-                    videoEncoder = null;
-                }
-                muxer = null;
-                ffmpegInstance = null;
-                ffmpegFrames = [];
-                ffmpegSegments.length = 0;
-                break;
-            }
+        break;
+      }
+      case "finalize": {
+        if (backend === "webcodecs") {
+          await finalizeWebCodecs();
+        } else if (backend === "ffmpeg-wasm") {
+          await finalizeFfmpeg();
         }
+        break;
+      }
+      case "cancel": {
+        cancelled = true;
+        if (videoEncoder && videoEncoder.state !== "closed") {
+          videoEncoder.close();
+          videoEncoder = null;
+        }
+        muxer = null;
+        ffmpegInstance = null;
+        ffmpegFrames = [];
+        ffmpegSegments.length = 0;
+        break;
+      }
     }
-    catch (err) {
-        const message = err instanceof Error ? err.message : String(err);
-        postError(message);
-    }
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    postError(message);
+  }
 };
 //# sourceMappingURL=encode.worker.js.map