pa_encoder 0.2.8 → 0.3.0

package/dist/index.js

@@ -5,6 +5,7 @@ async function startLiveCapture({
   fps = 30,
   concurrency = 2,
   maxQueue = 8,
+  maxPendingCaptures = null,
   policy = "drop",
   // "drop" | "block"
   onProgress,
@@ -22,6 +23,9 @@ async function startLiveCapture({
     throw new TypeError("concurrency must be >= 1");
   if (!Number.isInteger(maxQueue) || maxQueue < 0)
     throw new TypeError("maxQueue must be >= 0");
+  if (maxPendingCaptures != null && (!Number.isInteger(maxPendingCaptures) || maxPendingCaptures < 1)) {
+    throw new TypeError("maxPendingCaptures must be >= 1");
+  }
   if (policy !== "drop" && policy !== "block")
     throw new TypeError('policy must be "drop" or "block"');
   const worker = new Worker(new URL("./worker.js", import.meta.url), {
@@ -32,22 +36,31 @@ async function startLiveCapture({
       var _a, _b;
       if (((_a = ev.data) == null ? void 0 : _a.type) === "ready") {
         worker.removeEventListener("message", onMsg);
+        worker.removeEventListener("error", onErr);
         resolve();
       } else if (((_b = ev.data) == null ? void 0 : _b.type) === "error") {
         worker.removeEventListener("message", onMsg);
+        worker.removeEventListener("error", onErr);
         reject(new Error(ev.data.message || "Worker error"));
       }
     };
+    const onErr = (ev) => {
+      worker.removeEventListener("message", onMsg);
+      worker.removeEventListener("error", onErr);
+      reject(ev.error || new Error("Worker failed to initialize"));
+    };
     worker.addEventListener("message", onMsg);
-    worker.addEventListener("error", reject);
+    worker.addEventListener("error", onErr);
   });
   const stats = {
     captured: 0,
     encoded: 0,
     written: 0,
     dropped: 0,
+    failed: 0,
     queueMax: 0,
     inFlightMax: 0,
+    pendingCaptureMax: 0,
     lastBitmapMs: 0,
     bitmapMsAvg: 0,
     lastEncodeMs: 0,
@@ -55,65 +68,171 @@ async function startLiveCapture({
     lastWriteMs: 0,
     writeMsAvg: 0
   };
+  const maxCaptureTasks = maxPendingCaptures == null ? Math.max(1, Math.min(4, concurrency)) : maxPendingCaptures;
+  const frameIntervalMs = 1e3 / fps;
+  const maxCatchUpFrames = 4;
+  const maxAccumMs = frameIntervalMs * maxCatchUpFrames;
   let stopped = false;
   let rafId = null;
+  let fatalError = null;
   let inFlight = 0;
+  let pendingCaptures = 0;
+  let accMs = 0;
+  let lastTickMs = null;
+  let seq = 0;
   const queue = [];
   const waiters = [];
   const ack = /* @__PURE__ */ new Map();
+  const captureTasks = /* @__PURE__ */ new Set();
+  let doneSettled = false;
+  let resolveDone = null;
+  const done = new Promise((resolve) => {
+    resolveDone = resolve;
+  });
+  function isAbortError(err) {
+    return (err == null ? void 0 : err.name) === "AbortError" || (err == null ? void 0 : err.message) === "stopped" || (err == null ? void 0 : err.message) === "Aborted";
+  }
+  function emitProgress() {
+    onProgress == null ? void 0 : onProgress({ ...stats });
+  }
   function throwIfAborted() {
+    if (fatalError) throw fatalError;
     if (signal == null ? void 0 : signal.aborted) {
       throw signal.reason ?? new DOMException("Aborted", "AbortError");
     }
   }
-  function wakeOneWaiter() {
-    const w = waiters.shift();
-    if (w) w();
+  function wakeAllWaiters() {
+    while (waiters.length) {
+      const w = waiters.shift();
+      if (w) w();
+    }
+  }
+  function releaseBitmap(bitmap) {
+    if (typeof (bitmap == null ? void 0 : bitmap.close) === "function") {
+      try {
+        bitmap.close();
+      } catch {
+      }
+    }
+  }
+  function settleDone(value) {
+    if (doneSettled) return;
+    doneSettled = true;
+    resolveDone == null ? void 0 : resolveDone(value);
+  }
+  function dispatchFrame(item) {
+    inFlight++;
+    stats.inFlightMax = Math.max(stats.inFlightMax, inFlight);
+    const { seq: seq2, bitmap, w, h } = item;
+    const p = new Promise((resolve, reject) => ack.set(seq2, { resolve, reject }));
+    worker.postMessage(
+      { type: "encode", frameIndex: seq2, bitmap, width: w, height: h },
+      [bitmap]
+    );
+    p.catch(() => {
+    });
+  }
+  function dispatchIfPossible() {
+    while (!stopped && inFlight < concurrency && queue.length > 0) {
+      const item = queue.shift();
+      dispatchFrame(item);
+      wakeAllWaiters();
+    }
   }
-  async function enqueueFrame(item) {
+  async function pushCapturedFrame(item) {
+    if (stopped) {
+      releaseBitmap(item.bitmap);
+      return false;
+    }
+    if (inFlight < concurrency) {
+      dispatchFrame(item);
+      return true;
+    }
     if (policy === "drop") {
       if (queue.length >= maxQueue) {
         stats.dropped++;
-        if (typeof item.bitmap.close === "function") item.bitmap.close();
-        onProgress == null ? void 0 : onProgress({ ...stats });
+        releaseBitmap(item.bitmap);
         return false;
       }
       queue.push(item);
       stats.queueMax = Math.max(stats.queueMax, queue.length);
       return true;
     }
-    while (queue.length >= maxQueue) {
+    if (maxQueue === 0) {
+      while (!stopped && inFlight >= concurrency) {
+        await new Promise((r) => waiters.push(r));
+        throwIfAborted();
+      }
+      if (stopped) {
+        releaseBitmap(item.bitmap);
+        return false;
+      }
+      dispatchFrame(item);
+      return true;
+    }
+    while (!stopped && queue.length >= maxQueue) {
       await new Promise((r) => waiters.push(r));
       throwIfAborted();
-      if (stopped) return false;
+    }
+    if (stopped) {
+      releaseBitmap(item.bitmap);
+      return false;
     }
     queue.push(item);
     stats.queueMax = Math.max(stats.queueMax, queue.length);
     return true;
   }
-  function dispatchIfPossible() {
-    while (!stopped && inFlight < concurrency && queue.length > 0) {
-      const item = queue.shift();
-      wakeOneWaiter();
-      inFlight++;
-      stats.inFlightMax = Math.max(stats.inFlightMax, inFlight);
-      const { seq: seq2, bitmap, w, h } = item;
-      const p = new Promise(
-        (resolve, reject) => ack.set(seq2, { resolve, reject })
-      );
-      worker.postMessage(
-        { type: "encode", frameIndex: seq2, bitmap, width: w, height: h },
-        [bitmap]
-      );
-      p.catch(() => {
-      });
+  function canScheduleCapture() {
+    if (stopped) return false;
+    if (pendingCaptures >= maxCaptureTasks) return false;
+    if (policy === "drop") {
+      const buffered = queue.length + inFlight + pendingCaptures;
+      const capacity = maxQueue + concurrency;
+      return buffered < capacity;
     }
+    if (maxQueue === 0) return inFlight < concurrency;
+    return queue.length < maxQueue || inFlight < concurrency;
+  }
+  function scheduleCaptureFrame() {
+    pendingCaptures++;
+    stats.pendingCaptureMax = Math.max(stats.pendingCaptureMax, pendingCaptures);
+    let task = null;
+    task = (async () => {
+      throwIfAborted();
+      const w = canvas.width;
+      const h = canvas.height;
+      const b0 = performance.now();
+      const bitmap = await createImageBitmap(canvas);
+      const b1 = performance.now();
+      const bitmapMs = b1 - b0;
+      stats.lastBitmapMs = bitmapMs;
+      stats.bitmapMsAvg = stats.bitmapMsAvg ? stats.bitmapMsAvg * 0.9 + bitmapMs * 0.1 : bitmapMs;
+      stats.captured++;
+      await pushCapturedFrame({
+        seq: seq++,
+        bitmap,
+        w,
+        h
+      });
+    })().catch((err) => {
+      if (!stopped && !isAbortError(err)) {
+        stats.failed++;
+        console.error("capture failed:", err);
+      }
+    }).finally(() => {
+      pendingCaptures--;
+      captureTasks.delete(task);
+      dispatchIfPossible();
+      wakeAllWaiters();
+      emitProgress();
+    });
+    captureTasks.add(task);
   }
   worker.addEventListener("message", async (ev) => {
     const msg = ev.data;
     if (!msg || typeof msg !== "object") return;
     if (msg.type === "frame") {
-      const { frameIndex: seq2, blob, encodeMs } = msg;
+      const { frameIndex: frameSeq, blob, encodeMs } = msg;
       stats.encoded++;
       if (typeof encodeMs === "number") {
         stats.lastEncodeMs = encodeMs;
@@ -121,31 +240,45 @@ async function startLiveCapture({
       }
       try {
         const w0 = performance.now();
-        await exporter.write(seq2, blob);
+        await exporter.write(frameSeq, blob);
         const w1 = performance.now();
         stats.written++;
         const writeMs = w1 - w0;
         stats.lastWriteMs = writeMs;
         stats.writeMsAvg = stats.writeMsAvg ? stats.writeMsAvg * 0.9 + writeMs * 0.1 : writeMs;
-        const entry = ack.get(seq2);
+        const entry = ack.get(frameSeq);
         if (entry) entry.resolve();
       } catch (err) {
-        const entry = ack.get(seq2);
+        stats.failed++;
+        const entry = ack.get(frameSeq);
         if (entry) entry.reject(err);
       } finally {
-        ack.delete(seq2);
-        inFlight--;
+        ack.delete(frameSeq);
+        inFlight = Math.max(0, inFlight - 1);
         dispatchIfPossible();
-        onProgress == null ? void 0 : onProgress({ ...stats });
+        wakeAllWaiters();
+        emitProgress();
       }
-    } else if (msg.type === "error") {
-      console.error("Worker error:", msg.message);
+      return;
+    }
+    if (msg.type === "error") {
+      const frameSeq = Number(msg.frameIndex);
+      const err = new Error(msg.message || "Worker error");
+      stats.failed++;
+      if (Number.isInteger(frameSeq)) {
+        const entry = ack.get(frameSeq);
+        if (entry) entry.reject(err);
+        ack.delete(frameSeq);
+        inFlight = Math.max(0, inFlight - 1);
+        dispatchIfPossible();
+        wakeAllWaiters();
+      } else {
+        fatalError = err;
+      }
+      console.error("Worker error:", err.message);
+      emitProgress();
     }
   });
-  const frameIntervalMs = 1e3 / fps;
-  let accMs = 0;
-  let lastTickMs = null;
-  let seq = 0;
   function tick(ts) {
     if (stopped) return;
     try {
@@ -159,47 +292,64 @@ async function startLiveCapture({
     const dt = ts - lastTickMs;
     lastTickMs = ts;
     accMs += dt;
-    while (accMs >= frameIntervalMs) {
-      accMs -= frameIntervalMs;
-      const b0 = performance.now();
-      createImageBitmap(canvas).then(async (bitmap) => {
-        const b1 = performance.now();
-        const bitmapMs = b1 - b0;
-        stats.lastBitmapMs = bitmapMs;
-        stats.bitmapMsAvg = stats.bitmapMsAvg ? stats.bitmapMsAvg * 0.9 + bitmapMs * 0.1 : bitmapMs;
-        if (stopped) {
-          if (typeof bitmap.close === "function") bitmap.close();
-          return;
+    if (accMs > maxAccumMs) {
+      const dropFrames = Math.floor((accMs - maxAccumMs) / frameIntervalMs);
+      if (dropFrames > 0) {
+        stats.dropped += dropFrames;
+        accMs -= dropFrames * frameIntervalMs;
+      }
+      if (accMs > maxAccumMs) accMs = maxAccumMs;
+    }
+    let loopGuard = 0;
+    while (accMs >= frameIntervalMs && loopGuard < maxCatchUpFrames) {
+      if (!canScheduleCapture()) {
+        if (policy === "drop") {
+          stats.dropped++;
+          accMs -= frameIntervalMs;
+          loopGuard++;
+          continue;
         }
-        stats.captured++;
-        const ok = await enqueueFrame({
-          seq: seq++,
-          bitmap,
-          w: canvas.width,
-          h: canvas.height
-        });
-        if (ok) dispatchIfPossible();
-        onProgress == null ? void 0 : onProgress({ ...stats });
-      }).catch((e) => console.error("createImageBitmap failed:", e));
+        break;
+      }
+      accMs -= frameIntervalMs;
+      scheduleCaptureFrame();
+      loopGuard++;
     }
+    emitProgress();
     rafId = requestAnimationFrame(tick);
   }
   rafId = requestAnimationFrame(tick);
   async function stop() {
-    if (stopped) return;
+    if (stopped) return done;
     stopped = true;
     if (rafId != null) cancelAnimationFrame(rafId);
-    while (waiters.length) wakeOneWaiter();
-    for (const item of queue.splice(0, queue.length)) {
-      if (typeof item.bitmap.close === "function") item.bitmap.close();
-    }
-    while (inFlight > 0 || ack.size > 0) {
-      await new Promise((r) => setTimeout(r, 25));
+    let stopError = null;
+    try {
+      wakeAllWaiters();
+      const tasks = Array.from(captureTasks);
+      if (tasks.length > 0) {
+        await Promise.allSettled(tasks);
+      }
+      for (const item of queue.splice(0, queue.length)) {
+        releaseBitmap(item.bitmap);
+      }
+      while (inFlight > 0 || ack.size > 0) {
+        await new Promise((r) => setTimeout(r, 25));
+      }
+      await exporter.finalize();
+    } catch (err) {
+      stopError = err;
+      throw err;
+    } finally {
+      try {
+        worker.terminate();
+      } catch {
+      }
+      settleDone({ error: stopError ?? fatalError ?? null });
     }
-    await exporter.finalize();
-    worker.terminate();
+    return done;
   }
-  return { stop, stats };
+  return { stop, stats, done };
 }
 
 // src/virtual_time.js

package/dist/ui/encoder.html

@@ -140,6 +140,20 @@
         word-break: break-word;
       }
 
+      .stats {
+        margin-top: 12px;
+        border: 1px solid rgba(255, 255, 255, 0.12);
+        border-radius: 12px;
+        padding: 10px;
+        background: rgba(0, 0, 0, 0.22);
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          "Liberation Mono", "Courier New", monospace;
+        font-size: 12.5px;
+        line-height: 1.4;
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+
       /* Inputs */
       button,
       input,
@@ -418,7 +432,26 @@
               <label>MaxQueue</label>
               <input id="maxQueue" type="number" min="0" step="1" value="8" />
               <label>Duration</label>
-              <input id="duration" type="number" min="1" step="1" value="10" />
+              <input id="duration" type="number" min="0" step="1" value="10" />
+            </div>
+
+            <div class="row2">
+              <label>PendingCap</label>
+              <input
+                id="maxPendingCaptures"
+                type="number"
+                min="1"
+                step="1"
+                value="2"
+              />
+              <label>Stats(ms)</label>
+              <input
+                id="statsIntervalMs"
+                type="number"
+                min="50"
+                step="10"
+                value="180"
+              />
             </div>
           </details>
 
@@ -442,6 +475,8 @@
             <button id="btnStop" class="btnDanger" disabled>Stop</button>
           </div>
 
+          <div id="stats" class="stats">status: idle</div>
+
           <div class="hint">
             Hotkeys (only when not recording):
             <br />
@@ -455,6 +490,8 @@
             <br />
             - Space: start
             <br />
+            Duration=0 means manual stop.
+            <br />
             During recording, keyboard is not captured by the UI. Use Focus
             Sketch if needed, then click the canvas to ensure focus.
           </div>

package/dist/ui/encoder.js

@@ -14,6 +14,8 @@ const policyEl = $("policy");
 const concurrencyEl = $("concurrency");
 const maxQueueEl = $("maxQueue");
 const durationEl = $("duration");
+const maxPendingCapturesEl = $("maxPendingCaptures");
+const statsIntervalMsEl = $("statsIntervalMs");
 
 const framesEl = $("frames");
 const warmupEl = $("warmup");
@@ -33,6 +35,7 @@ const btnPassthrough = $("btnPassthrough");
 const btnFocus = $("btnFocus");
 
 const logEl = $("log");
+const statsEl = $("stats");
 const preview = $("preview");
 
 let running = false;
@@ -42,11 +45,37 @@ const docks = ["dock-br", "dock-bl", "dock-tr", "dock-tl"];
 let dockIndex = 0;
 
 let passthrough = false;
+let lastStatusLog = "";
+
+const LOG_MAX_LINES = 220;
+const logLines = [];
+const runtimeState = {
+  status: "idle",
+  message: "",
+  progressDone: 0,
+  progressTotal: 0,
+  stats: null,
+};
+
+function toPositiveInt(v, fallback) {
+  const n = Number(v);
+  if (!Number.isInteger(n) || n <= 0) return fallback;
+  return n;
+}
+
+function toNonNegativeNumber(v, fallback) {
+  const n = Number(v);
+  if (!Number.isFinite(n) || n < 0) return fallback;
+  return n;
+}
 
 function appendLog(line) {
-  const s = String(line);
-  const needsNL = logEl.textContent && !logEl.textContent.endsWith("\n");
-  logEl.textContent += (needsNL ? "\n" : "") + s;
+  const s = String(line ?? "");
+  logLines.push(s);
+  if (logLines.length > LOG_MAX_LINES) {
+    logLines.splice(0, logLines.length - LOG_MAX_LINES);
+  }
+  logEl.textContent = logLines.join("\n");
   logEl.scrollTop = logEl.scrollHeight;
 }
 
@@ -65,6 +94,52 @@ function setRunning(v) {
   }
 }
 
+function nfmt(v, d = 2) {
+  if (!Number.isFinite(v)) return "-";
+  return Number(v).toFixed(d);
+}
+
+function renderStats() {
+  const s = runtimeState.stats || null;
+  const lines = [];
+
+  lines.push(
+    `status: ${runtimeState.status}${
+      runtimeState.message ? ` (${runtimeState.message})` : ""
+    }`
+  );
+
+  if (runtimeState.progressTotal > 0) {
+    lines.push(`progress: ${runtimeState.progressDone}/${runtimeState.progressTotal}`);
+  }
+
+  if (!s) {
+    lines.push("captured: -  encoded: -  written: -");
+    lines.push("dropped: -   failed: -");
+    lines.push("bitmap ms: -/-   encode ms: -/-   write ms: -/-");
+    lines.push("queueMax: -   inFlightMax: -   pendingMax: -");
+  } else {
+    lines.push(
+      `captured: ${s.captured ?? 0}  encoded: ${s.encoded ?? 0}  written: ${
+        s.written ?? 0
+      }`
+    );
+    lines.push(`dropped: ${s.dropped ?? 0}   failed: ${s.failed ?? 0}`);
+    lines.push(
+      `bitmap ms: ${nfmt(s.lastBitmapMs)}/${nfmt(s.bitmapMsAvg)}   ` +
+        `encode ms: ${nfmt(s.lastEncodeMs)}/${nfmt(s.encodeMsAvg)}   ` +
+        `write ms: ${nfmt(s.lastWriteMs)}/${nfmt(s.writeMsAvg)}`
+    );
+    lines.push(
+      `queueMax: ${s.queueMax ?? 0}   inFlightMax: ${
+        s.inFlightMax ?? 0
+      }   pendingMax: ${s.pendingCaptureMax ?? 0}`
+    );
+  }
+
+  statsEl.textContent = lines.join("\n");
+}
+
 function buildPreviewUrl(entry) {
   const e = entry || "/src/main.js";
   return `/__pa_encoder__/ui/preview.html?entry=${encodeURIComponent(e)}`;
@@ -161,9 +236,13 @@ function syncModeUI() {
 }
 
 function currentPayload() {
-  const fps = Number(fpsEl.value || "60");
+  const fps = Math.max(1, Math.floor(Number(fpsEl.value || "60")));
   const kind = modeEl.value === "frame" ? "frame" : "live";
   const canvasSelector = selectedCanvasSelector();
+  const statsIntervalMs = Math.max(
+    50,
+    toPositiveInt(statsIntervalMsEl.value, 180)
+  );
 
   if (kind === "frame") {
     const frames = Math.max(1, Math.floor(Number(framesEl.value || "300")));
@@ -174,11 +253,17 @@ function currentPayload() {
       frames,
       warmup,
       canvasSelector,
+      statsIntervalMs,
       ...exporterPayload(),
     };
   }
 
-  const duration = Math.max(1, Number(durationEl.value || "10"));
+  const duration = toNonNegativeNumber(durationEl.value, 10);
+  const maxPendingCaptures = Math.max(
+    1,
+    toPositiveInt(maxPendingCapturesEl.value, 2)
+  );
+
   return {
     kind: "live",
     fps,
@@ -187,6 +272,8 @@ function currentPayload() {
     policy: policyEl.value,
     concurrency: Math.max(1, Math.floor(Number(concurrencyEl.value || "2"))),
     maxQueue: Math.max(0, Math.floor(Number(maxQueueEl.value || "8"))),
+    maxPendingCaptures,
+    statsIntervalMs,
     ...exporterPayload(),
   };
 }
@@ -201,6 +288,12 @@ function start() {
   appendLog(
     `start: ${payload.kind} fps=${payload.fps} canvas=${payload.canvasSelector}`
   );
+  runtimeState.status = "running";
+  runtimeState.message = "starting";
+  runtimeState.progressDone = 0;
+  runtimeState.progressTotal = 0;
+  runtimeState.stats = null;
+  renderStats();
 
   // start recording -> prefer passthrough + focus canvas
   setPassthrough(true, { silent: true });
@@ -219,7 +312,12 @@ function start() {
   }
 
   clearTimeout(stopTimer);
-  stopTimer = setTimeout(() => stop(), payload.duration * 1000);
+  if (payload.duration > 0) {
+    stopTimer = setTimeout(() => stop(), payload.duration * 1000);
+  } else {
+    stopTimer = null;
+    appendLog("live duration=0 (manual stop)");
+  }
 }
 
 function stop() {
@@ -317,7 +415,14 @@ window.addEventListener("message", (ev) => {
   if (msg.type === "pa_status") {
     const status = msg.status || "";
     const message = msg.message || "";
-    appendLog(message ? `${status}: ${message}` : String(status));
+    const line = message ? `${status}: ${message}` : String(status);
+    if (line !== lastStatusLog) {
+      appendLog(line);
+      lastStatusLog = line;
+    }
+    runtimeState.status = status || "idle";
+    runtimeState.message = message || "";
+    renderStats();
 
     if (status === "idle") {
       setRunning(false);
@@ -332,21 +437,25 @@ window.addEventListener("message", (ev) => {
   }
 
   if (msg.type === "pa_progress") {
-    const done = Number(msg.done ?? 0);
-    const total = Number(msg.total ?? 0);
-    appendLog(`progress: ${done}/${total}`);
+    runtimeState.progressDone = Number(msg.done ?? 0);
+    runtimeState.progressTotal = Number(msg.total ?? 0);
+    renderStats();
     return;
   }
 
   if (msg.type === "pa_stats") {
     const safe = { ...msg };
     delete safe.type;
-    appendLog(`stats: ${JSON.stringify(safe)}`);
+    runtimeState.stats = safe;
+    renderStats();
     return;
   }
 
   if (msg.type === "pa_error") {
     appendLog(`ERROR: ${msg.message || "unknown error"}`);
+    runtimeState.status = "error";
+    runtimeState.message = msg.message || "unknown error";
+    renderStats();
     setRunning(false);
   }
 });
@@ -361,6 +470,7 @@ window.addEventListener("message", (ev) => {
 
   setRunning(false);
   syncModeUI();
+  renderStats();
 
   fillCanvasDropdown([]);
   appendLog("loading preview...");