@shotstack/shotstack-canvas 1.9.6 → 2.0.1

package/dist/{hb-ODWKSLMB.js → hb-HSWG3Q47.js}

@@ -2,7 +2,7 @@ import {
   __commonJS,
   __publicField,
   __require
-} from "./chunk-HYGMWVDX.js";
+} from "./chunk-FPPKRKBX.js";
 
 // node_modules/.pnpm/harfbuzzjs@0.4.12/node_modules/harfbuzzjs/hb.js
 var require_hb = __commonJS({

package/dist/{hbjs-HHU2TAW7.js → hbjs-VGYWXH44.js}

@@ -1,6 +1,6 @@
 import {
   __commonJS
-} from "./chunk-HYGMWVDX.js";
+} from "./chunk-FPPKRKBX.js";
 
 // node_modules/.pnpm/harfbuzzjs@0.4.12/node_modules/harfbuzzjs/hbjs.js
 var require_hbjs = __commonJS({

package/dist/mediarecorder-fallback-5JYZBGT3.js

@@ -0,0 +1,133 @@
+// src/core/video/mediarecorder-fallback.ts
+var MediaRecorderFallback = class {
+  mediaRecorder = null;
+  canvas = null;
+  config = null;
+  chunks = [];
+  frameCount = 0;
+  totalFrames = 0;
+  startTime = 0;
+  ctx = null;
+  onProgress;
+  async configure(config, canvas) {
+    this.config = config;
+    this.totalFrames = Math.max(2, Math.round(config.duration * config.fps) + 1);
+    this.frameCount = 0;
+    this.startTime = Date.now();
+    this.chunks = [];
+    if (canvas) {
+      this.canvas = canvas;
+    } else {
+      if (typeof OffscreenCanvas !== "undefined") {
+        this.canvas = new OffscreenCanvas(config.width, config.height);
+      } else if (typeof document !== "undefined") {
+        this.canvas = document.createElement("canvas");
+        this.canvas.width = config.width;
+        this.canvas.height = config.height;
+      } else {
+        throw new Error("No canvas available for MediaRecorder fallback");
+      }
+    }
+    this.ctx = this.canvas.getContext("2d");
+    if (!this.ctx) {
+      throw new Error("Failed to get 2D context");
+    }
+    const stream = this.canvas.captureStream?.(config.fps);
+    if (!stream) {
+      throw new Error("captureStream not supported on this canvas type");
+    }
+    const mimeType = getPreferredMimeType();
+    this.mediaRecorder = new MediaRecorder(stream, {
+      mimeType,
+      videoBitsPerSecond: config.bitrate ?? 8e6
+    });
+    this.mediaRecorder.ondataavailable = (event) => {
+      if (event.data.size > 0) {
+        this.chunks.push(event.data);
+      }
+    };
+    this.mediaRecorder.start(100);
+  }
+  async encodeFrame(frameData, _frameIndex) {
+    if (!this.ctx || !this.config) {
+      throw new Error("Encoder not configured. Call configure() first.");
+    }
+    const { width, height } = this.config;
+    const pixelData = frameData instanceof ArrayBuffer ? new Uint8ClampedArray(frameData) : frameData;
+    const imageData = new ImageData(pixelData, width, height);
+    this.ctx.putImageData(imageData, 0, 0);
+    this.frameCount++;
+    if (this.onProgress) {
+      const elapsedMs = Date.now() - this.startTime;
+      if (elapsedMs > 0) {
+        const framesPerSecond = this.frameCount / (elapsedMs / 1e3);
+        const remainingFrames = this.totalFrames - this.frameCount;
+        const estimatedRemainingMs = remainingFrames / framesPerSecond * 1e3;
+        this.onProgress({
+          framesEncoded: this.frameCount,
+          totalFrames: this.totalFrames,
+          percentage: this.frameCount / this.totalFrames * 100,
+          elapsedMs,
+          estimatedRemainingMs: Math.round(estimatedRemainingMs),
+          currentFps: Math.round(framesPerSecond * 10) / 10
+        });
+      }
+    }
+    const frameInterval = 1e3 / this.config.fps;
+    await new Promise((resolve) => setTimeout(resolve, frameInterval));
+  }
+  async flush() {
+    if (!this.mediaRecorder) {
+      throw new Error("MediaRecorder not configured.");
+    }
+    return new Promise((resolve, reject) => {
+      this.mediaRecorder.onstop = () => {
+        const blob = new Blob(this.chunks, { type: this.mediaRecorder.mimeType });
+        resolve(blob);
+      };
+      this.mediaRecorder.onerror = (event) => {
+        reject(new Error(`MediaRecorder error: ${event}`));
+      };
+      this.mediaRecorder.stop();
+    });
+  }
+  close() {
+    if (this.mediaRecorder && this.mediaRecorder.state !== "inactive") {
+      this.mediaRecorder.stop();
+    }
+    this.mediaRecorder = null;
+    this.canvas = null;
+    this.ctx = null;
+    this.chunks = [];
+  }
+  getOutputMimeType() {
+    return this.mediaRecorder?.mimeType || "video/webm";
+  }
+};
+function getPreferredMimeType() {
+  const mimeTypes = [
+    "video/webm;codecs=vp9",
+    "video/webm;codecs=vp8",
+    "video/webm",
+    "video/mp4"
+  ];
+  for (const mimeType of mimeTypes) {
+    if (MediaRecorder.isTypeSupported(mimeType)) {
+      return mimeType;
+    }
+  }
+  return "video/webm";
+}
+function isMediaRecorderSupported() {
+  return typeof MediaRecorder !== "undefined" && typeof HTMLCanvasElement !== "undefined" && typeof HTMLCanvasElement.prototype.captureStream === "function";
+}
+async function createMediaRecorderFallback(config, canvas) {
+  const encoder = new MediaRecorderFallback();
+  await encoder.configure(config, canvas);
+  return encoder;
+}
+export {
+  MediaRecorderFallback,
+  createMediaRecorderFallback,
+  isMediaRecorderSupported
+};

package/dist/mediarecorder-fallback-TSLY4MAU.js

@@ -0,0 +1,11 @@
+import {
+  MediaRecorderFallback,
+  createMediaRecorderFallback,
+  isMediaRecorderSupported
+} from "./chunk-5BH5YLM5.js";
+import "./chunk-FPPKRKBX.js";
+export {
+  MediaRecorderFallback,
+  createMediaRecorderFallback,
+  isMediaRecorderSupported
+};

package/dist/web-encoder-7CLF7KX4.js

@@ -0,0 +1,171 @@
+// src/core/video/web-encoder.ts
+var WebCodecsEncoder = class {
+  encoder = null;
+  muxer = null;
+  config = null;
+  frameCount = 0;
+  totalFrames = 0;
+  startTime = 0;
+  fps = 30;
+  keyframeInterval = 150;
+  encoderError = null;
+  onProgress;
+  async configure(config) {
+    if (typeof VideoEncoder === "undefined") {
+      throw new Error("WebCodecs API not supported in this browser.");
+    }
+    this.config = config;
+    this.fps = config.fps;
+    this.totalFrames = Math.max(2, Math.round(config.duration * config.fps) + 1);
+    this.frameCount = 0;
+    this.startTime = Date.now();
+    this.keyframeInterval = Math.round(config.fps * 10);
+    this.encoderError = null;
+    const { Muxer, ArrayBufferTarget } = await import("mp4-muxer");
+    this.muxer = new Muxer({
+      target: new ArrayBufferTarget(),
+      video: {
+        codec: "avc",
+        width: config.width,
+        height: config.height
+      },
+      fastStart: "in-memory"
+    });
+    const candidates = getH264CodecCandidates(config.profile || "high");
+    let encoderConfig = null;
+    for (const codec of candidates) {
+      const candidate = {
+        codec,
+        width: config.width,
+        height: config.height,
+        bitrate: config.bitrate ?? 8e6,
+        framerate: config.fps,
+        hardwareAcceleration: config.hardwareAcceleration ?? "prefer-hardware",
+        latencyMode: "quality"
+      };
+      const support = await VideoEncoder.isConfigSupported(candidate);
+      if (support.supported) {
+        encoderConfig = candidate;
+        break;
+      }
+    }
+    if (!encoderConfig) {
+      throw new Error("H.264 encoding not supported. Tried codecs: " + candidates.join(", "));
+    }
+    this.encoder = new VideoEncoder({
+      output: (chunk, metadata) => {
+        this.muxer.addVideoChunk(chunk, metadata);
+      },
+      error: (e) => {
+        this.encoderError = e;
+      }
+    });
+    this.encoder.configure(encoderConfig);
+  }
+  async encodeFrame(frameData, frameIndex) {
+    if (this.encoderError) {
+      throw this.encoderError;
+    }
+    if (!this.encoder || !this.config) {
+      throw new Error("Encoder not configured. Call configure() first.");
+    }
+    const { width, height } = this.config;
+    const timestamp = Math.round(frameIndex * 1e6 / this.fps);
+    const pixelData = frameData instanceof ArrayBuffer ? new Uint8ClampedArray(frameData) : frameData;
+    const imageData = new ImageData(pixelData, width, height);
+    const videoFrame = new VideoFrame(imageData, { timestamp });
+    const isKeyFrame = frameIndex % this.keyframeInterval === 0;
+    this.encoder.encode(videoFrame, { keyFrame: isKeyFrame });
+    videoFrame.close();
+    this.frameCount++;
+    this.reportProgress();
+  }
+  async encodeCanvas(canvas, frameIndex) {
+    if (this.encoderError) {
+      throw this.encoderError;
+    }
+    if (!this.encoder || !this.config) {
+      throw new Error("Encoder not configured. Call configure() first.");
+    }
+    const timestamp = Math.round(frameIndex * 1e6 / this.fps);
+    const videoFrame = new VideoFrame(canvas, { timestamp });
+    const isKeyFrame = frameIndex % this.keyframeInterval === 0;
+    this.encoder.encode(videoFrame, { keyFrame: isKeyFrame });
+    videoFrame.close();
+    this.frameCount++;
+    this.reportProgress();
+  }
+  async encodeCanvasRepeat(canvas, startFrameIndex, repeatCount) {
+    if (this.encoderError) {
+      throw this.encoderError;
+    }
+    if (!this.encoder || !this.config) {
+      throw new Error("Encoder not configured. Call configure() first.");
+    }
+    for (let i = 0; i < repeatCount; i++) {
+      const actualFrameIndex = startFrameIndex + i;
+      const timestamp = Math.round(actualFrameIndex * 1e6 / this.fps);
+      const videoFrame = new VideoFrame(canvas, { timestamp });
+      const isKeyFrame = actualFrameIndex % this.keyframeInterval === 0;
+      this.encoder.encode(videoFrame, { keyFrame: isKeyFrame });
+      videoFrame.close();
+      this.frameCount++;
+    }
+    this.reportProgress();
+  }
+  async flush() {
+    if (this.encoderError) {
+      throw this.encoderError;
+    }
+    if (!this.encoder || !this.muxer) {
+      throw new Error("Encoder not configured.");
+    }
+    await this.encoder.flush();
+    this.muxer.finalize();
+    const buffer = this.muxer.target.buffer;
+    return new Blob([buffer], { type: "video/mp4" });
+  }
+  close() {
+    if (this.encoder && this.encoder.state !== "closed") {
+      this.encoder.close();
+    }
+    this.encoder = null;
+    this.muxer = null;
+  }
+  reportProgress() {
+    if (!this.onProgress) return;
+    const elapsedMs = Date.now() - this.startTime;
+    if (elapsedMs === 0) return;
+    const framesPerSecond = this.frameCount / (elapsedMs / 1e3);
+    const remainingFrames = this.totalFrames - this.frameCount;
+    const estimatedRemainingMs = remainingFrames / framesPerSecond * 1e3;
+    this.onProgress({
+      framesEncoded: this.frameCount,
+      totalFrames: this.totalFrames,
+      percentage: this.frameCount / this.totalFrames * 100,
+      elapsedMs,
+      estimatedRemainingMs: Math.round(estimatedRemainingMs),
+      currentFps: Math.round(framesPerSecond * 10) / 10
+    });
+  }
+};
+function getH264CodecCandidates(profile) {
+  switch (profile) {
+    case "baseline":
+      return ["avc1.42E028", "avc1.42001F", "avc1.42001E"];
+    case "main":
+      return ["avc1.4D0028", "avc1.4D001F", "avc1.4D001E"];
+    case "high":
+    default:
+      return ["avc1.640028", "avc1.640029", "avc1.64001F", "avc1.64001E"];
+  }
+}
+async function createWebCodecsEncoder(config) {
+  const encoder = new WebCodecsEncoder();
+  await encoder.configure(config);
+  return encoder;
+}
+export {
+  WebCodecsEncoder,
+  createWebCodecsEncoder
+};

package/dist/web-encoder-MXBT3N36.js

@@ -0,0 +1,9 @@
+import {
+  WebCodecsEncoder,
+  createWebCodecsEncoder
+} from "./chunk-KBAXJEJG.js";
+import "./chunk-FPPKRKBX.js";
+export {
+  WebCodecsEncoder,
+  createWebCodecsEncoder
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shotstack/shotstack-canvas",
-  "version": "1.9.6",
+  "version": "2.0.1",
   "description": "Text layout & animation engine (HarfBuzz) for Node & Web - fully self-contained.",
   "type": "module",
   "main": "./dist/entry.node.cjs",
@@ -31,6 +31,7 @@
     "example:node": "node examples/node-example.mjs",
     "example:video": "node examples/node-video.mjs",
     "example:web": "vite dev examples/web-example",
+    "test:caption-web": "vite dev examples/caption-tests",
     "prepublishOnly": "npm run build"
   },
   "publishConfig": {
@@ -44,18 +45,17 @@
   "dependencies": {
     "@resvg/resvg-js": "^2.6.2",
     "@resvg/resvg-wasm": "^2.6.2",
-    "@shotstack/schemas": "^1.5.4",
+    "@shotstack/schemas": "1.6.0",
     "canvas": "npm:@napi-rs/canvas@^0.1.54",
     "ffmpeg-static": "^5.2.0",
     "fontkit": "^2.0.4",
     "harfbuzzjs": "0.4.12",
-    "opentype.js": "^1.3.4",
+    "lru-cache": "^11.2.5",
+    "mp4-muxer": "^5.1.3",
     "zod": "^4.2.0"
   },
   "devDependencies": {
-    "@types/fluent-ffmpeg": "2.1.27",
     "@types/node": "^20.14.10",
-    "fluent-ffmpeg": "^2.1.3",
     "tsup": "^8.2.3",
     "typescript": "^5.5.3",
     "vite": "^5.3.3",

package/scripts/postinstall.js

@@ -1,58 +1,58 @@
-#!/usr/bin/env node
-
-/**
- * Postinstall script to verify native canvas bindings are available
- * This helps catch issues early and provides helpful guidance
- */
-
-import { platform as _platform, arch as _arch } from 'os';
-import { dirname } from 'path';
-import { readdirSync } from 'fs';
-import { createRequire } from 'module';
-
-const require = createRequire(import.meta.url);
-
-const platform = _platform();
-const arch = _arch();
-
-// Map platform/arch to package names
-const platformMap = {
-  'darwin-arm64': '@napi-rs/canvas-darwin-arm64',
-  'darwin-x64': '@napi-rs/canvas-darwin-x64',
-  'linux-arm64': '@napi-rs/canvas-linux-arm64-gnu',
-  'linux-x64': '@napi-rs/canvas-linux-x64-gnu',
-  'win32-x64': '@napi-rs/canvas-win32-x64-msvc',
-  'linux-arm': '@napi-rs/canvas-linux-arm-gnueabihf',
-  'android-arm64': '@napi-rs/canvas-android-arm64',
-};
-
-const platformKey = `${platform}-${arch}`;
-const requiredPackage = platformMap[platformKey];
-
-if (!requiredPackage) {
-  console.warn(`\n⚠️  Warning: Unsupported platform ${platformKey} for @napi-rs/canvas`);
-  console.warn('   Canvas rendering may not work on this platform.\n');
-  process.exit(0);
-}
-
-// Check if the native binding package is installed
-try {
-  const packagePath = require.resolve(`${requiredPackage}/package.json`);
-  const packageDir = dirname(packagePath);
-
-  // Verify the .node file exists
-  const nodeFiles = readdirSync(packageDir).filter(f => f.endsWith('.node'));
-
-  if (nodeFiles.length > 0) {
-    console.log(`✅ @shotstack/shotstack-canvas: Native canvas binding found for ${platformKey}`);
-  } else {
-    throw new Error('No .node file found');
-  }
-} catch (error) {
-  console.warn(`\n⚠️  Warning: Native canvas binding not found for ${platformKey}`);
-  console.warn(`   Expected package: ${requiredPackage}`);
-  console.warn('\n   If you see "Cannot find native binding" errors, try:');
-  console.warn('   1. Delete node_modules and package-lock.json');
-  console.warn('   2. Run: npm install');
-  console.warn(`   3. Or manually install: npm install ${requiredPackage}\n`);
-}
+#!/usr/bin/env node
+
+/**
+ * Postinstall script to verify native canvas bindings are available
+ * This helps catch issues early and provides helpful guidance
+ */
+
+import { platform as _platform, arch as _arch } from 'os';
+import { dirname } from 'path';
+import { readdirSync } from 'fs';
+import { createRequire } from 'module';
+
+const require = createRequire(import.meta.url);
+
+const platform = _platform();
+const arch = _arch();
+
+// Map platform/arch to package names
+const platformMap = {
+  'darwin-arm64': '@napi-rs/canvas-darwin-arm64',
+  'darwin-x64': '@napi-rs/canvas-darwin-x64',
+  'linux-arm64': '@napi-rs/canvas-linux-arm64-gnu',
+  'linux-x64': '@napi-rs/canvas-linux-x64-gnu',
+  'win32-x64': '@napi-rs/canvas-win32-x64-msvc',
+  'linux-arm': '@napi-rs/canvas-linux-arm-gnueabihf',
+  'android-arm64': '@napi-rs/canvas-android-arm64',
+};
+
+const platformKey = `${platform}-${arch}`;
+const requiredPackage = platformMap[platformKey];
+
+if (!requiredPackage) {
+  console.warn(`\n⚠️  Warning: Unsupported platform ${platformKey} for @napi-rs/canvas`);
+  console.warn('   Canvas rendering may not work on this platform.\n');
+  process.exit(0);
+}
+
+// Check if the native binding package is installed
+try {
+  const packagePath = require.resolve(`${requiredPackage}/package.json`);
+  const packageDir = dirname(packagePath);
+
+  // Verify the .node file exists
+  const nodeFiles = readdirSync(packageDir).filter(f => f.endsWith('.node'));
+
+  if (nodeFiles.length > 0) {
+    console.log(`✅ @shotstack/shotstack-canvas: Native canvas binding found for ${platformKey}`);
+  } else {
+    throw new Error('No .node file found');
+  }
+} catch (error) {
+  console.warn(`\n⚠️  Warning: Native canvas binding not found for ${platformKey}`);
+  console.warn(`   Expected package: ${requiredPackage}`);
+  console.warn('\n   If you see "Cannot find native binding" errors, try:');
+  console.warn('   1. Delete node_modules and package-lock.json');
+  console.warn('   2. Run: npm install');
+  console.warn(`   3. Or manually install: npm install ${requiredPackage}\n`);
+}

package/dist/chunk-HYGMWVDX.js

@@ -1,19 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined") return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-var __commonJS = (cb, mod) => function __require2() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
-};
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-
-export {
-  __require,
-  __commonJS,
-  __publicField
-};