asciify-engine 1.0.32 → 1.0.35

package/dist/index.js

@@ -968,7 +968,7 @@ function renderFrameToCanvas(ctx, frame, options, canvasWidth, canvasHeight, tim
 }
 
 // src/core/simple-api.ts
-async function asciify(source, canvas, { fontSize = 10, style = "classic", options = {} } = {}) {
+async function asciify(source, canvas, { fontSize = 10, artStyle = "classic", options = {} } = {}) {
   let el;
   if (typeof source === "string") {
     const img = new Image();
@@ -988,16 +988,16 @@ async function asciify(source, canvas, { fontSize = 10, style = "classic", optio
   } else {
     el = source;
   }
-  const preset = ART_STYLE_PRESETS[style];
+  const preset = ART_STYLE_PRESETS[artStyle];
   const merged = { ...DEFAULT_OPTIONS, ...preset, ...options, fontSize };
   const ctx = canvas.getContext("2d");
   if (!ctx) throw new Error("Could not get 2d context from canvas");
   const { frame } = imageToAsciiFrame(el, merged, canvas.width, canvas.height);
   renderFrameToCanvas(ctx, frame, merged, canvas.width, canvas.height);
 }
-async function asciifyGif(source, canvas, { fontSize = 10, style = "classic", options = {} } = {}) {
+async function asciifyGif(source, canvas, { fontSize = 10, artStyle = "classic", options = {} } = {}) {
   const buffer = typeof source === "string" ? await fetch(source).then((r) => r.arrayBuffer()) : source;
-  const merged = { ...DEFAULT_OPTIONS, ...ART_STYLE_PRESETS[style], ...options, fontSize };
+  const merged = { ...DEFAULT_OPTIONS, ...ART_STYLE_PRESETS[artStyle], ...options, fontSize };
   const ctx = canvas.getContext("2d");
   if (!ctx) throw new Error("Could not get 2d context from canvas");
   const { frames, fps } = await gifToAsciiFrames(buffer, merged, canvas.width, canvas.height);
@@ -1021,20 +1021,22 @@ async function asciifyGif(source, canvas, { fontSize = 10, style = "classic", op
     cancelAnimationFrame(animId);
   };
 }
-async function asciifyVideo(source, canvas, { fontSize = 10, style = "classic", options = {} } = {}) {
+async function asciifyVideo(source, canvas, { fontSize = 10, artStyle = "classic", options = {} } = {}) {
   let video;
   if (typeof source === "string") {
     video = document.createElement("video");
     video.crossOrigin = "anonymous";
     video.src = source;
-    await new Promise((resolve, reject) => {
-      video.onloadeddata = () => resolve();
-      video.onerror = () => reject(new Error(`Failed to load video: ${source}`));
-    });
+    if (video.readyState < 2) {
+      await new Promise((resolve, reject) => {
+        video.onloadeddata = () => resolve();
+        video.onerror = () => reject(new Error(`Failed to load video: ${source}`));
+      });
+    }
   } else {
     video = source;
   }
-  const merged = { ...DEFAULT_OPTIONS, ...ART_STYLE_PRESETS[style], ...options, fontSize };
+  const merged = { ...DEFAULT_OPTIONS, ...ART_STYLE_PRESETS[artStyle], ...options, fontSize };
   const ctx = canvas.getContext("2d");
   if (!ctx) throw new Error("Could not get 2d context from canvas");
   const { frames, fps } = await videoToAsciiFrames(video, merged, canvas.width, canvas.height);
@@ -2283,146 +2285,145 @@ function renderTextBackground(ctx, width, height, text, options = {}, hoverPos)
 }
 
 // src/core/record.ts
-function createRecorder(canvas, options = {}) {
-  const {
-    fps = 15,
-    maxFrames = 120,
-    format = "gif",
-    quality = 10,
-    scale = 1
-  } = options;
-  const interval = 1e3 / fps;
-  let recording = false;
-  let timerId = -1;
-  const blobs = [];
-  const captureFrame = () => {
-    if (!recording || blobs.length >= maxFrames) return;
+function captureSnapshot(canvas, { format = "png", quality = 0.92, scale = 1 } = {}) {
+  return new Promise((resolve, reject) => {
     let src = canvas;
     if (scale !== 1) {
       const off = document.createElement("canvas");
       off.width = Math.round(canvas.width * scale);
       off.height = Math.round(canvas.height * scale);
       const offCtx = off.getContext("2d");
+      if (!offCtx) {
+        reject(new Error("captureSnapshot: could not get 2d context"));
+        return;
+      }
       offCtx.drawImage(canvas, 0, 0, off.width, off.height);
       src = off;
     }
-    blobs.push(src.toDataURL("image/png"));
+    src.toBlob(
+      (blob) => blob ? resolve(blob) : reject(new Error("captureSnapshot: toBlob returned null")),
+      `image/${format}`,
+      quality
+    );
+  });
+}
+async function snapshotAndDownload(canvas, options = {}) {
+  const { filename = "asciify-snapshot", format = "png", ...snapOpts } = options;
+  const blob = await captureSnapshot(canvas, { format, ...snapOpts });
+  const ext = format === "jpeg" ? "jpg" : format;
+  const a = document.createElement("a");
+  a.href = URL.createObjectURL(blob);
+  a.download = `${filename}.${ext}`;
+  a.click();
+  setTimeout(() => URL.revokeObjectURL(a.href), 1e4);
+}
+
+// src/core/webcam.ts
+async function asciifyWebcam(canvas, {
+  fontSize = 10,
+  style = "classic",
+  options = {},
+  liveOptions,
+  mirror = true,
+  constraints = { facingMode: "user" },
+  dpr: dprOverride
+} = {}) {
+  if (!navigator.mediaDevices?.getUserMedia) {
+    throw new Error("asciifyWebcam: getUserMedia is not supported in this browser.");
+  }
+  const stream = await navigator.mediaDevices.getUserMedia({ video: constraints });
+  const video = document.createElement("video");
+  video.srcObject = stream;
+  video.muted = true;
+  video.playsInline = true;
+  await new Promise((resolve, reject) => {
+    video.onloadedmetadata = () => resolve();
+    video.onerror = () => reject(new Error("asciifyWebcam: video stream failed to load."));
+    video.play().catch(reject);
+  });
+  const merged = {
+    ...DEFAULT_OPTIONS,
+    ...ART_STYLE_PRESETS[style],
+    ...options,
+    fontSize
   };
-  const encodeGif = async (frames) => {
-    return new Promise((resolve, reject) => {
-      if (typeof GIF === "undefined") {
-        reject(new Error('[asciify recorder] gif.js not found. Add <script src="/gif.worker.js"> to your page.'));
-        return;
-      }
-      const gif = new GIF({
-        workers: 2,
-        quality,
-        workerScript: "/gif.worker.js"
-      });
-      let loaded = 0;
-      const total = frames.length;
-      frames.forEach((dataUrl) => {
-        const img = new Image();
-        img.onload = () => {
-          gif.addFrame(img, { delay: interval, copy: true });
-          loaded++;
-          if (loaded === total) gif.render();
-        };
-        img.src = dataUrl;
-      });
-      gif.on("finished", (blob) => {
-        const reader = new FileReader();
-        reader.onload = () => resolve(reader.result);
-        reader.readAsDataURL(blob);
-      });
-      gif.on("error", reject);
-    });
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("asciifyWebcam: could not get 2d context from canvas.");
+  const deviceRatio = dprOverride ?? (typeof window !== "undefined" ? window.devicePixelRatio : 1) ?? 1;
+  if (deviceRatio !== 1) {
+    ctx.scale(deviceRatio, deviceRatio);
+  }
+  let hoverPos = null;
+  const smoothHover = { x: 0.5, y: 0.5, intensity: 0 };
+  const onMouseMove = (e) => {
+    const rect = canvas.getBoundingClientRect();
+    hoverPos = {
+      x: (e.clientX - rect.left) / rect.width,
+      y: (e.clientY - rect.top) / rect.height
+    };
   };
-  const encodeWebP = async (frames, _fps) => {
-    if (typeof MediaRecorder === "undefined") {
-      throw new Error("[asciify recorder] MediaRecorder not available in this browser.");
-    }
-    const off = document.createElement("canvas");
-    if (frames.length === 0) return "";
-    const probe = new Image();
-    await new Promise((res) => {
-      probe.onload = () => res();
-      probe.src = frames[0];
-    });
-    off.width = probe.naturalWidth;
-    off.height = probe.naturalHeight;
-    const offCtx = off.getContext("2d");
-    const stream = off.captureStream(_fps);
-    const recorder = new MediaRecorder(stream, { mimeType: "video/webm;codecs=vp9" });
-    const chunks = [];
-    recorder.ondataavailable = (e) => chunks.push(e.data);
-    return new Promise((resolve, reject) => {
-      recorder.onstop = () => {
-        const blob = new Blob(chunks, { type: "video/webm" });
-        const reader = new FileReader();
-        reader.onload = () => resolve(reader.result);
-        reader.readAsDataURL(blob);
-      };
-      recorder.onerror = reject;
-      recorder.start();
-      let idx = 0;
-      const drawNext = () => {
-        if (idx >= frames.length) {
-          recorder.stop();
-          return;
-        }
-        const img = new Image();
-        img.onload = () => {
-          offCtx.drawImage(img, 0, 0);
-          idx++;
-          setTimeout(drawNext, interval);
-        };
-        img.src = frames[idx];
-      };
-      drawNext();
-    });
+  const onMouseLeave = () => {
+    hoverPos = null;
   };
-  return {
-    get isRecording() {
-      return recording;
-    },
-    get frameCount() {
-      return blobs.length;
-    },
-    start() {
-      if (recording) return;
-      blobs.length = 0;
-      recording = true;
-      timerId = window.setInterval(captureFrame, interval);
-    },
-    async stop() {
-      if (!recording) return "";
-      recording = false;
-      clearInterval(timerId);
-      const frames = blobs.slice();
-      if (format === "png-sequence") {
-        return JSON.stringify(frames);
+  if (merged.hoverStrength > 0) {
+    canvas.addEventListener("mousemove", onMouseMove);
+    canvas.addEventListener("mouseleave", onMouseLeave);
+  }
+  let cancelled = false;
+  let animId;
+  const startTime = performance.now();
+  const tick = (timestamp) => {
+    if (cancelled) return;
+    if (video.readyState >= video.HAVE_CURRENT_DATA) {
+      const displayW = canvas.width / deviceRatio;
+      const displayH = canvas.height / deviceRatio;
+      const elapsed = (timestamp - startTime) / 1e3;
+      const frameOptions = liveOptions ? { ...merged, ...liveOptions() } : merged;
+      const wantsHover = frameOptions.hoverStrength > 0;
+      if (wantsHover) {
+        canvas.addEventListener("mousemove", onMouseMove);
+        canvas.addEventListener("mouseleave", onMouseLeave);
+      } else {
+        canvas.removeEventListener("mousemove", onMouseMove);
+        canvas.removeEventListener("mouseleave", onMouseLeave);
       }
-      if (format === "webp") {
-        return encodeWebP(frames, fps);
+      const { frame } = imageToAsciiFrame(video, frameOptions, displayW, displayH);
+      if (hoverPos) {
+        const dx = hoverPos.x - smoothHover.x;
+        const dy = hoverPos.y - smoothHover.y;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        const speed = Math.min(0.25, 0.06 + dist * 0.8);
+        smoothHover.x += dx * speed;
+        smoothHover.y += dy * speed;
+        smoothHover.intensity += (1 - smoothHover.intensity) * 0.12;
+      } else {
+        smoothHover.intensity *= 0.965;
+        if (smoothHover.intensity < 3e-3) smoothHover.intensity = 0;
+      }
+      const hoverArg = smoothHover.intensity > 3e-3 ? { x: smoothHover.x, y: smoothHover.y, intensity: smoothHover.intensity } : null;
+      if (mirror) {
+        ctx.save();
+        ctx.scale(-1, 1);
+        ctx.translate(-displayW, 0);
+        renderFrameToCanvas(ctx, frame, frameOptions, displayW, displayH, elapsed, hoverArg);
+        ctx.restore();
+      } else {
+        renderFrameToCanvas(ctx, frame, frameOptions, displayW, displayH, elapsed, hoverArg);
       }
-      return encodeGif(frames);
     }
+    animId = requestAnimationFrame(tick);
+  };
+  animId = requestAnimationFrame(tick);
+  return () => {
+    cancelled = true;
+    cancelAnimationFrame(animId);
+    canvas.removeEventListener("mousemove", onMouseMove);
+    canvas.removeEventListener("mouseleave", onMouseLeave);
+    stream.getTracks().forEach((t) => t.stop());
+    video.srcObject = null;
   };
-}
-async function recordAndDownload(canvas, durationMs, options = {}) {
-  const { filename = "asciify-recording", ...recOpts } = options;
-  const recorder = createRecorder(canvas, recOpts);
-  recorder.start();
-  await new Promise((res) => setTimeout(res, durationMs));
-  const dataUrl = await recorder.stop();
-  const ext = options.format === "webp" ? "webm" : options.format === "png-sequence" ? "json" : "gif";
-  const a = document.createElement("a");
-  a.href = dataUrl;
-  a.download = `${filename}.${ext}`;
-  a.click();
 }
 
-export { ART_STYLE_PRESETS, CHARSETS, DEFAULT_OPTIONS, HOVER_PRESETS, PALETTE_THEMES, asciiBackground, asciiText, asciiTextAnsi, asciify, asciifyGif, asciifyVideo, buildTextFrame, createRecorder, gifToAsciiFrames, imageToAsciiFrame, mountWaveBackground, recordAndDownload, renderAuroraBackground, renderCircuitBackground, renderDnaBackground, renderFireBackground, renderFrameToCanvas, renderGridBackground, renderMorphBackground, renderNoiseBackground, renderPulseBackground, renderRainBackground, renderSilkBackground, renderStarsBackground, renderTerrainBackground, renderTextBackground, renderVoidBackground, renderWaveBackground, videoToAsciiFrames };
+export { ART_STYLE_PRESETS, CHARSETS, DEFAULT_OPTIONS, HOVER_PRESETS, PALETTE_THEMES, asciiBackground, asciiText, asciiTextAnsi, asciify, asciifyGif, asciifyVideo, asciifyWebcam, buildTextFrame, captureSnapshot, gifToAsciiFrames, imageToAsciiFrame, mountWaveBackground, renderAuroraBackground, renderCircuitBackground, renderDnaBackground, renderFireBackground, renderFrameToCanvas, renderGridBackground, renderMorphBackground, renderNoiseBackground, renderPulseBackground, renderRainBackground, renderSilkBackground, renderStarsBackground, renderTerrainBackground, renderTextBackground, renderVoidBackground, renderWaveBackground, snapshotAndDownload, videoToAsciiFrames };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map