asciify-engine 1.0.32 → 1.0.34

package/README.md

@@ -3,7 +3,7 @@
 <p align="left">
   <a href="https://www.npmjs.com/package/asciify-engine"><img src="https://img.shields.io/npm/v/asciify-engine?color=d4ff00&labelColor=0a0a0a&style=flat-square" alt="npm version" /></a>
   <a href="https://www.npmjs.com/package/asciify-engine"><img src="https://img.shields.io/npm/dm/asciify-engine?color=d4ff00&labelColor=0a0a0a&style=flat-square" alt="downloads" /></a>
-  <a href="https://github.com/ayangabryl/asciify/blob/main/packages/asciify-engine/LICENSE"><img src="https://img.shields.io/badge/license-MIT-d4ff00?labelColor=0a0a0a&style=flat-square" alt="MIT license" /></a>
+  <a href="https://github.com/ayangabryl/asciify-engine/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-d4ff00?labelColor=0a0a0a&style=flat-square" alt="MIT license" /></a>
   <a href="https://www.buymeacoffee.com/asciify"><img src="https://img.shields.io/badge/buy_me_a_coffee-support-d4ff00?labelColor=0a0a0a&style=flat-square" alt="Buy Me A Coffee" /></a>
 </p>
 

package/dist/index.cjs

@@ -2285,144 +2285,143 @@ 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);
+      }
+      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;
       }
-      if (format === "webp") {
-        return encodeWebP(frames, fps);
+      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();
 }
 
 exports.ART_STYLE_PRESETS = ART_STYLE_PRESETS;
@@ -2436,12 +2435,12 @@ exports.asciiTextAnsi = asciiTextAnsi;
 exports.asciify = asciify;
 exports.asciifyGif = asciifyGif;
 exports.asciifyVideo = asciifyVideo;
+exports.asciifyWebcam = asciifyWebcam;
 exports.buildTextFrame = buildTextFrame;
-exports.createRecorder = createRecorder;
+exports.captureSnapshot = captureSnapshot;
 exports.gifToAsciiFrames = gifToAsciiFrames;
 exports.imageToAsciiFrame = imageToAsciiFrame;
 exports.mountWaveBackground = mountWaveBackground;
-exports.recordAndDownload = recordAndDownload;
 exports.renderAuroraBackground = renderAuroraBackground;
 exports.renderCircuitBackground = renderCircuitBackground;
 exports.renderDnaBackground = renderDnaBackground;
@@ -2458,6 +2457,7 @@ exports.renderTerrainBackground = renderTerrainBackground;
 exports.renderTextBackground = renderTextBackground;
 exports.renderVoidBackground = renderVoidBackground;
 exports.renderWaveBackground = renderWaveBackground;
+exports.snapshotAndDownload = snapshotAndDownload;
 exports.videoToAsciiFrames = videoToAsciiFrames;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map