@shotstack/shotstack-canvas 1.9.6 → 2.0.0

package/README.md

@@ -1,13 +1,13 @@
-# @shotstack/shotstack-canvas
-
-One package → identical text shaping/wrapping/animation on Web & Node.
-- HarfBuzz WASM for shaping and glyph outlines (via `harfbuzzjs`).
-- Device-independent draw-ops.
-- Painters: Canvas2D (web) and node-canvas (node).
-- Deterministic time-driven animations.
-
-## Install
-
-```bash
-pnpm add @shotstack/shotstack-canvas
-# or npm i / yarn add
+# @shotstack/shotstack-canvas
+
+One package → identical text shaping/wrapping/animation on Web & Node.
+- HarfBuzz WASM for shaping and glyph outlines (via `harfbuzzjs`).
+- Device-independent draw-ops.
+- Painters: Canvas2D (web) and node-canvas (node).
+- Deterministic time-driven animations.
+
+## Install
+
+```bash
+pnpm add @shotstack/shotstack-canvas
+# or npm i / yarn add

package/dist/chunk-5BH5YLM5.js

@@ -0,0 +1,140 @@
+import {
+  __publicField
+} from "./chunk-FPPKRKBX.js";
+
+// src/core/video/mediarecorder-fallback.ts
+var MediaRecorderFallback = class {
+  constructor() {
+    __publicField(this, "mediaRecorder", null);
+    __publicField(this, "canvas", null);
+    __publicField(this, "config", null);
+    __publicField(this, "chunks", []);
+    __publicField(this, "frameCount", 0);
+    __publicField(this, "totalFrames", 0);
+    __publicField(this, "startTime", 0);
+    __publicField(this, "ctx", null);
+    __publicField(this, "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,
+  isMediaRecorderSupported,
+  createMediaRecorderFallback
+};

package/dist/chunk-FPPKRKBX.js

@@ -0,0 +1,66 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var __privateWrapper = (obj, member, setter, getter) => ({
+  set _(value) {
+    __privateSet(obj, member, value, setter);
+  },
+  get _() {
+    return __privateGet(obj, member, getter);
+  }
+});
+
+export {
+  __require,
+  __commonJS,
+  __export,
+  __toESM,
+  __publicField,
+  __privateGet,
+  __privateAdd,
+  __privateSet,
+  __privateMethod,
+  __privateWrapper
+};

package/dist/chunk-KBAXJEJG.js

@@ -0,0 +1,178 @@
+import {
+  __publicField
+} from "./chunk-FPPKRKBX.js";
+
+// src/core/video/web-encoder.ts
+var WebCodecsEncoder = class {
+  constructor() {
+    __publicField(this, "encoder", null);
+    __publicField(this, "muxer", null);
+    __publicField(this, "config", null);
+    __publicField(this, "frameCount", 0);
+    __publicField(this, "totalFrames", 0);
+    __publicField(this, "startTime", 0);
+    __publicField(this, "fps", 30);
+    __publicField(this, "keyframeInterval", 150);
+    __publicField(this, "encoderError", null);
+    __publicField(this, "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
+};