@shotstack/shotstack-canvas 1.1.6 → 1.1.8

package/dist/entry.node.d.cts

@@ -204,6 +204,7 @@ interface VideoGenerationOptions {
     duration: number;
     outputPath: string;
     pixelRatio?: number;
+    hasAlpha?: boolean;
     crf?: number;
     preset?: "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "medium" | "slow" | "slower" | "veryslow";
     tune?: "film" | "animation" | "grain" | "stillimage" | "psnr" | "ssim" | "fastdecode" | "zerolatency";

package/dist/entry.node.d.ts

@@ -204,6 +204,7 @@ interface VideoGenerationOptions {
     duration: number;
     outputPath: string;
     pixelRatio?: number;
+    hasAlpha?: boolean;
     crf?: number;
     preset?: "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "medium" | "slow" | "slower" | "veryslow";
     tune?: "film" | "animation" | "grain" | "stillimage" | "psnr" | "ssim" | "fastdecode" | "zerolatency";

package/dist/entry.node.js

@@ -126,9 +126,62 @@ var RichTextAssetSchema = Joi.object({
 
 // src/wasm/hb-loader.ts
 var hbSingleton = null;
+function isNode() {
+  return typeof process !== "undefined" && process.versions != null && process.versions.node != null;
+}
+async function loadWasmWeb(wasmBaseURL) {
+  try {
+    if (wasmBaseURL) {
+      const url = wasmBaseURL.endsWith(".wasm") ? wasmBaseURL : wasmBaseURL.endsWith("/") ? `${wasmBaseURL}hb.wasm` : `${wasmBaseURL}/hb.wasm`;
+      console.log(`Fetching WASM from: ${url}`);
+      const response = await fetch(url);
+      if (response.ok) {
+        const arrayBuffer = await response.arrayBuffer();
+        const bytes = new Uint8Array(arrayBuffer);
+        if (bytes.length >= 4 && bytes[0] === 0 && bytes[1] === 97 && bytes[2] === 115 && bytes[3] === 109) {
+          console.log(`\u2705 Valid WASM binary loaded (${bytes.length} bytes)`);
+          return arrayBuffer;
+        }
+      }
+    }
+    return void 0;
+  } catch (err) {
+    console.error("Error in loadWasmWeb:", err);
+    return void 0;
+  }
+}
+function setupWasmFetchInterceptor(wasmBinary) {
+  const originalFetch = window.fetch;
+  window.fetch = function(input, init) {
+    const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
+    if (url.includes("hb.wasm") || url.endsWith(".wasm")) {
+      console.log(`\u{1F504} Intercepted fetch for: ${url}`);
+      return Promise.resolve(
+        new Response(wasmBinary, {
+          status: 200,
+          statusText: "OK",
+          headers: {
+            "Content-Type": "application/wasm",
+            "Content-Length": wasmBinary.byteLength.toString()
+          }
+        })
+      );
+    }
+    return originalFetch.apply(this, [input, init]);
+  };
+}
 async function initHB(wasmBaseURL) {
   if (hbSingleton) return hbSingleton;
   try {
+    let wasmBinary;
+    wasmBinary = await loadWasmWeb(wasmBaseURL);
+    if (!wasmBinary) {
+      throw new Error("Failed to load WASM binary from any source");
+    }
+    console.log(`\u2705 WASM binary loaded successfully (${wasmBinary.byteLength} bytes)`);
+    if (!isNode()) {
+      setupWasmFetchInterceptor(wasmBinary);
+    }
     const mod = await import("harfbuzzjs");
     const candidate = mod.default;
     let hb;
@@ -142,10 +195,11 @@ async function initHB(wasmBaseURL) {
     if (!hb || typeof hb.createBuffer !== "function" || typeof hb.createFont !== "function") {
       throw new Error("Failed to initialize HarfBuzz: unexpected export shape from 'harfbuzzjs'.");
     }
-    void wasmBaseURL;
     hbSingleton = hb;
+    console.log("\u2705 HarfBuzz initialized successfully");
     return hbSingleton;
   } catch (err) {
+    console.error("Failed to initialize HarfBuzz:", err);
     throw new Error(
       `Failed to initialize HarfBuzz: ${err instanceof Error ? err.message : String(err)}`
     );
@@ -184,7 +238,7 @@ var FontRegistry = class _FontRegistry {
   }
   async _doInit() {
     try {
-      this.hb = await initHB(this.wasmBaseURL);
+      this.hb = await initHB("https://shotstack-ingest-api-dev-sources.s3.ap-southeast-2.amazonaws.com/euo5r93oyr/zzz01k9h-yycyx-2x2y6-qx9bj-7n567b/source.wasm");
     } catch (error) {
       this.initPromise = void 0;
       throw error;
@@ -1176,6 +1230,7 @@ async function createNodePainter(opts) {
           const hasBackground = !!(op.bg && op.bg.color);
           needsAlphaExtraction = !hasBackground;
           if (op.bg && op.bg.color) {
+            ctx.clearRect(0, 0, op.width, op.height);
             const { color, opacity, radius } = op.bg;
             const c = parseHex6(color, opacity);
             ctx.fillStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
@@ -1189,10 +1244,15 @@ async function createNodePainter(opts) {
               ctx.fillRect(0, 0, op.width, op.height);
             }
           } else {
+            ctx.clearRect(0, 0, op.width, op.height);
+            ctx.save();
             ctx.fillStyle = "rgb(255, 255, 255)";
             ctx.fillRect(0, 0, op.width, op.height);
+            ctx.restore();
+            offscreenCtx.save();
             offscreenCtx.fillStyle = "rgb(0, 0, 0)";
             offscreenCtx.fillRect(0, 0, op.width, op.height);
+            offscreenCtx.restore();
           }
           continue;
         }
@@ -1578,44 +1638,72 @@ var VideoGenerator = class {
       tune = "animation",
       profile = "high",
       level = "4.2",
-      pixFmt = "yuv420p"
+      pixFmt = "yuv420p",
+      hasAlpha = false
     } = options;
     const totalFrames = Math.max(2, Math.round(duration * fps) + 1);
+    const finalOutputPath = hasAlpha ? outputPath.replace(/\.mp4$/, ".mov") : outputPath;
     console.log(
-      `\u{1F3AC} Generating video: ${width}x${height} @ ${fps}fps, ${duration}s (${totalFrames} frames)
-    CRF=${crf}, preset=${preset}, tune=${tune}, profile=${profile}, level=${level}, pix_fmt=${pixFmt}`
+      `\u{1F3AC} Generating video: ${width}x${height} @ ${fps}fps, ${duration}s (${totalFrames} frames)` + (hasAlpha ? " (MOV with alpha)" : "")
     );
     return new Promise(async (resolve, reject) => {
-      const args = [
-        "-y",
-        "-f",
-        "image2pipe",
-        "-vcodec",
-        "png",
-        "-framerate",
-        String(fps),
-        "-i",
-        "-",
-        "-c:v",
-        "libx264",
-        "-preset",
-        preset,
-        "-crf",
-        String(crf),
-        "-tune",
-        tune,
-        "-profile:v",
-        profile,
-        "-level",
-        level,
-        "-pix_fmt",
-        pixFmt,
-        "-r",
-        String(fps),
-        "-movflags",
-        "+faststart",
-        outputPath
-      ];
+      let args;
+      if (hasAlpha) {
+        args = [
+          "-y",
+          "-f",
+          "image2pipe",
+          "-vcodec",
+          "png",
+          "-framerate",
+          String(fps),
+          "-i",
+          "-",
+          "-c:v",
+          "prores_ks",
+          "-profile:v",
+          "4444",
+          "-pix_fmt",
+          "yuva444p10le",
+          "-vendor",
+          "apl0",
+          "-r",
+          String(fps),
+          finalOutputPath
+        ];
+        console.log(`    Output: ${finalOutputPath} (ProRes 4444 with alpha)`);
+      } else {
+        args = [
+          "-y",
+          "-f",
+          "image2pipe",
+          "-vcodec",
+          "png",
+          "-framerate",
+          String(fps),
+          "-i",
+          "-",
+          "-c:v",
+          "libx264",
+          "-preset",
+          preset,
+          "-crf",
+          String(crf),
+          "-tune",
+          tune,
+          "-profile:v",
+          profile,
+          "-level",
+          level,
+          "-pix_fmt",
+          pixFmt,
+          "-r",
+          String(fps),
+          "-movflags",
+          "+faststart",
+          outputPath
+        ];
+      }
       const ffmpeg = spawn(this.ffmpegPath, args, { stdio: ["pipe", "inherit", "pipe"] });
       let ffmpegError = "";
       ffmpeg.stderr.on("data", (data) => {
@@ -1864,13 +1952,21 @@ async function createTextEngine(opts = {}) {
     },
     async generateVideo(asset, options) {
       try {
+        const hasBackground = !!asset.background?.color;
+        const hasAnimation = !!asset.animation?.preset;
+        const needsAlpha = !hasBackground && hasAnimation;
+        console.log(
+          `\u{1F3A8} Video settings: Animation=${hasAnimation}, Background=${hasBackground}, Alpha=${needsAlpha}`
+        );
         const finalOptions = {
           width: asset.width ?? width,
           height: asset.height ?? height,
           fps,
           duration: asset.animation?.duration ?? 3,
           outputPath: options.outputPath ?? "output.mp4",
-          pixelRatio: asset.pixelRatio ?? pixelRatio
+          pixelRatio: asset.pixelRatio ?? pixelRatio,
+          hasAlpha: needsAlpha,
+          ...options
         };
         const frameGenerator = async (time) => {
           return this.renderFrame(asset, time);