@shotstack/shotstack-canvas 1.0.0

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

@@ -0,0 +1,78 @@
+{
+  "name": "@shotstack/shotstack-canvas",
+  "version": "1.0.0",
+  "description": "Text layout & animation engine (HarfBuzz) for Node & Web - fully self-contained.",
+  "type": "module",
+  "main": "./dist/entry.node.cjs",
+  "module": "./dist/entry.node.js",
+  "browser": "./dist/entry.web.js",
+  "types": "./dist/entry.node.d.ts",
+  "exports": {
+    ".": {
+      "node": {
+        "import": "./dist/entry.node.js",
+        "require": "./dist/entry.node.cjs"
+      },
+      "browser": "./dist/entry.web.js",
+      "default": "./dist/entry.web.js"
+    }
+  },
+  "files": [
+    "dist/**",
+    "scripts/postinstall.js",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "postinstall": "node scripts/postinstall.js",
+    "vendor:harfbuzz": "node scripts/vendor-harfbuzz.js",
+    "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": "node scripts/publish-guard.cjs && pnpm build",
+    "test": "node --test tests/build-verify.mjs"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "@resvg/resvg-js": "^2.6.2",
+    "@resvg/resvg-wasm": "^2.6.2",
+    "@shotstack/schemas": "1.8.7",
+    "bidi-js": "^1.0.3",
+    "canvas": "npm:@napi-rs/canvas@^0.1.54",
+    "ffmpeg-static": "^5.2.0",
+    "fontkit": "^2.0.4",
+    "harfbuzzjs": "0.4.12",
+    "lru-cache": "^11.2.5",
+    "mp4-muxer": "^5.1.3",
+    "zod": "^4.2.0"
+  },
+  "devDependencies": {
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/commit-analyzer": "^13.0.1",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^12.0.6",
+    "@semantic-release/npm": "^13.1.5",
+    "@semantic-release/release-notes-generator": "^14.1.0",
+    "@types/node": "^20.14.10",
+    "semantic-release": "^25.0.3",
+    "tsup": "^8.2.3",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.3",
+    "vite-plugin-top-level-await": "1.6.0",
+    "vite-plugin-wasm": "3.5.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/shotstack/shotstack-canvas.git"
+  }
+}

package/scripts/postinstall.js

@@ -0,0 +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`);
+}