deck-recorder 0.1.0

package/README.md

@@ -0,0 +1,57 @@
+# deck-recorder
+
+Records a talk given with a [`<deck-shift>`](../deck-shift) slide deck, and
+turns the recording into a video.
+
+```html
+<script type="module" src="https://unpkg.com/deck-recorder"></script>
+<deck-controls></deck-controls>
+```
+
+Or:
+
+```sh
+npm install deck-recorder
+```
+
+```js
+import "deck-recorder";
+```
+
+Add `<deck-recorder>` to the page and press <kbd>R</kbd> to start recoding a
+run-through of the deck. The microphone will begin recording (and, if
+[`webcam-view`] is present, the camera stream too), as well as every slide and
+step change, and any clicks and key presses. <kbd>.</kbd> will pause and resume,
+and the recording marks the cut. Press <kbd>R</kbd> again to download the video
+(`recording-<time>.webm`) and its flow (`recording-<time>.json`).
+
+The flow is a [Puppeteer Replay] user flow which means a tool like
+[Chrome DevTools Recorder] can replay it. `setViewport` and a `navigate` to
+the deck, a `navigate` to `#<slide>.<step>` for each change, `click` (selectors
+pierce shadow roots) and `keyDown`/`keyUp` steps, and a `customStep` named
+`pause` at each cut. Every step also has `t`, the ms into the video it happened;
+the flow also has `video` (its file name), `started`, `duration` and `slides`
+(the deck's `script()`). Why is this useful? Combine it with `deck-replay` to
+get a video!
+
+```sh
+npm install puppeteer @puppeteer/replay
+npx deck-replay recording-<time>.json [--out video.mp4] [--headed]
+```
+
+That replays the recording in a browser, while also screen-recording the page in
+Chrome as the steps play, laying the recording's sound under it.
+
+## Styling & API
+
+A REC pill shows while recording (`::part(indicator)`). `start()`, `pause()`,
+`resume()`, `stop()` (resolves with `{ video, flow }`), `toggle()`, `recording`
+and `paused` drive it from script, and it fires a bubbling
+`deck-recorder-change` event (`DeckRecorderChangeEvent`, with `recording` and
+`paused`) as they change.
+
+It adds the custom `--record` and `--record-pause` commands, meaning it can be
+scripted also.
+
+[`webcam-view`]: ../webcam-view
+[Puppeteer Replay]: https://github.com/puppeteer/replay

package/deck-recorder.min.js

@@ -0,0 +1,2 @@
+var E=new CSSStyleSheet;E.replaceSync(`:host{position:fixed;top:16px;right:16px;z-index:2147483647;pointer-events:none}.rec{display:none;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--deck-ui-bg, rgba(22, 22, 24, .88));color:var(--deck-ui-fg, #f4f4f4);font:600 14px/1 ui-monospace,monospace}:host(:state(recording)) .rec{display:flex}.dot{box-sizing:border-box;width:10px;height:10px;border-radius:50%;background:#e5484d}:host(:state(paused)) .dot{border:2px solid #e5484d;background:none}
+`);var L=E;var $=a=>String(a).padStart(2,"0"),M=(a,e)=>{let t=Object.assign(document.createElement("a"),{href:URL.createObjectURL(a),download:e});t.click(),setTimeout(()=>URL.revokeObjectURL(t.href),6e4)},m={record:"r",pause:"."},N=a=>{let e=a.getRootNode(),t=[];for(let n=a;n;n=n.parentElement){let o=n.id&&`#${globalThis.CSS.escape(n.id)}`;if(o&&e.querySelectorAll(o).length===1){t.unshift(o);break}let i=[...n.parentElement?.children??[n]].filter(c=>c.localName===n.localName);t.unshift(i.length>1?`${n.localName}:nth-of-type(${i.indexOf(n)+1})`:n.localName)}return t.join(" > ")},O=a=>{let e=[];for(let t=a;t;t=t.getRootNode().host)e.unshift(N(t));return e},g=class extends Event{constructor(e,t){super("deck-recorder-change",{bubbles:!0,composed:!0}),this.recording=e,this.paused=t}},w=class extends HTMLElement{static define(e="deck-recorder",t=customElements){t.define(e,this)}#t;#e=null;#o=this.attachInternals();shadowRoot=Object.assign(this.attachShadow({mode:"open"}),{adoptedStyleSheets:[L],innerHTML:'<div class="rec" part="indicator" role="status"><i class="dot"></i><span class="time">00:00</span></div>'});get recording(){return this.#e!==null}get paused(){return this.#o.states.has("paused")}async connectedCallback(){if(this.#t)return;let e=this.closest("deck-shift")??this.ownerDocument.querySelector("deck-shift");await customElements.whenDefined(e.localName),this.#t=e,e.addShortcut("--record",m.record,()=>this.toggle(),"Start / stop recording"),e.addShortcut("--record-pause",m.pause,()=>this.paused?this.resume():this.pause(),"Pause / resume recording")}async start(){this.#e??=this.#r().catch(e=>{throw this.#e=null,e}),await this.#e}async pause(){(await this.#e)?.pause()}async resume(){(await this.#e)?.resume()}async stop(){let e=this.#e;if(!e)return null;this.#e=null;let{recorder:t,mic:n,done:o,controller:i,started:c,steps:h}=await e;t.state!=="inactive"&&t.stop();try{let{video:r,duration:u}=await o,d=`recording-${c.replace(/[:.]/g,"-")}`;return{video:r,flow:{title:d,video:`${d}.${r.type.includes("mp4")?"mp4":"webm"}`,started:c,duration:u,slides:this.#t.script(),steps:h}}}finally{i.abort(),n.getTracks().forEach(r=>r.stop()),this.#s(!1,!1)}}async toggle(){if(!this.#e)return this.start();let{video:e,flow:t}=await this.stop();M(e,t.video),M(new Blob([JSON.stringify(t,null,2)],{type:"application/json"}),`${t.title}.json`)}#n(e){let t=Math.floor(e/1e3);this.shadowRoot.querySelector(".time").textContent=`${$(Math.floor(t/60))}:${$(t%60)}`}#s(e,t){let{states:n}=this.#o;for(let[o,i]of[["recording",e],["paused",t]])i?n.add(o):n.delete(o);this.dispatchEvent(new g(e,t))}async#r(){let e=this.#t,t=await navigator.mediaDevices.getUserMedia({audio:!0}),n=await this.ownerDocument.querySelector("webcam-view")?.stream?.catch(s=>(console.warn("deck-recorder: recording without the webcam",s),null)),o=new MediaRecorder(new MediaStream([...n?.getVideoTracks()??[],...t.getAudioTracks()])),i=[],c=[],h=new AbortController,{signal:r}=h,u=0,d=null,f=()=>Math.round((d??performance.now())-u),l=s=>c.push({t:f(),...s}),P=new Promise(s=>{o.ondataavailable=p=>i.push(p.data),o.onstop=()=>s({video:new Blob(i,{type:o.mimeType}),duration:f()})});o.onerror=s=>console.error("deck-recorder:",s.error),await new Promise(s=>{o.onstart=()=>{u=performance.now(),s()},o.start(1e3)});let R=new Date().toISOString();l({type:"setViewport",width:innerWidth,height:innerHeight,deviceScaleFactor:devicePixelRatio,isMobile:!1,hasTouch:!1,isLandscape:innerWidth>=innerHeight}),l({type:"navigate",url:location.href}),e.addEventListener("deckchange",()=>l({type:"navigate",url:location.href}),{signal:r});let y="",k=()=>`${e.slide}.${e.step}`,T=()=>y=k(),b=()=>y!==k(),v=new Set;for(let s of["keydown","click"])addEventListener(s,T,{capture:!0,signal:r});addEventListener("keydown",s=>{b()||s.isComposing||/^(Unidentified|Dead|Process)$/.test(s.key)||s.defaultPrevented&&Object.values(m).includes(s.key)||(v.add(s.code),l({type:"keyDown",key:s.key}))},{signal:r}),addEventListener("keyup",s=>v.delete(s.code)&&l({type:"keyUp",key:s.key}),{signal:r}),addEventListener("click",s=>{let[p]=s.composedPath();if(b()||!s.detail||!s.composedPath().includes(e))return;let x=p.getBoundingClientRect();l({type:"click",selectors:[O(p)],offsetX:Math.round(s.clientX-x.left),offsetY:Math.round(s.clientY-x.top)})},{signal:r});let S=()=>this.#n(f());S();let j=setInterval(S,250);return r.addEventListener("abort",()=>clearInterval(j)),this.#s(!0,!1),{recorder:o,mic:t,done:P,controller:h,started:R,steps:c,pause:()=>{o.state==="recording"&&(o.pause(),d=performance.now(),l({type:"customStep",name:"pause"}),this.#s(!0,!0))},resume:()=>{o.state==="paused"&&(u+=performance.now()-d,d=null,o.resume(),this.#s(!0,!1))}}}};new URL(import.meta.url).searchParams.has("nodefine")||w.define();export{w as DeckRecorder,g as DeckRecorderChangeEvent};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "deck-recorder",
+  "version": "0.1.0",
+  "description": "Records a <deck-shift> talk as a webcam video plus a timed Puppeteer Replay flow, and replays them into one video.",
+  "keywords": [
+    "web-components",
+    "custom-elements",
+    "slides",
+    "presentation",
+    "recording",
+    "puppeteer",
+    "replay"
+  ],
+  "author": "Keith Cirkel",
+  "type": "module",
+  "exports": "./deck-recorder.min.js",
+  "bin": {
+    "deck-replay": "./replay.js"
+  },
+  "files": [
+    "deck-recorder.min.js",
+    "replay.js"
+  ],
+  "scripts": {
+    "build": "node esbuild.js"
+  },
+  "peerDependencies": {
+    "@puppeteer/replay": "^4.0.2",
+    "deck-shift": "^0.1.0",
+    "puppeteer": "^25.12.0",
+    "webcam-view": "^0.1.0"
+  },
+  "peerDependenciesMeta": {
+    "@puppeteer/replay": {
+      "optional": true
+    },
+    "puppeteer": {
+      "optional": true
+    },
+    "webcam-view": {
+      "optional": true
+    }
+  }
+}

package/replay.js

@@ -0,0 +1,151 @@
+#!/usr/bin/env node
+// Turns a <deck-recorder> recording into a video. The recording's flow
+// (recording-<time>.json, a Puppeteer Replay user flow with `t` on each step)
+// is replayed in time in Chrome, with its video playing in the page's
+// <webcam-view>; the page is screen-recorded and the recording's sound laid
+// under it. Writes <title>.mp4 next to the flow.
+//
+//   node replay.js recording-<time>.json [--out video.mp4] [--headed]
+
+import { spawn } from "node:child_process";
+import { readFile, rm } from "node:fs/promises";
+import { dirname, join, resolve } from "node:path";
+import { setTimeout as sleep } from "node:timers/promises";
+import { parseArgs } from "node:util";
+import { createRunner, PuppeteerRunnerExtension } from "@puppeteer/replay";
+import puppeteer from "puppeteer";
+
+const CHUNK = 4 << 20;
+const wait = (until) => sleep(Math.max(0, until - performance.now()));
+
+const {
+  values: opt,
+  positionals: [file],
+} = parseArgs({
+  allowPositionals: true,
+  options: { out: { type: "string" }, headed: { type: "boolean" } },
+});
+if (!file) {
+  console.error(
+    "usage: node replay.js recording-<time>.json [--out video.mp4] [--headed]",
+  );
+  process.exit(1);
+}
+
+const dir = dirname(resolve(file));
+const flow = JSON.parse(await readFile(file, "utf8"));
+const video = await readFile(join(dir, flow.video));
+const screen = join(dir, `${flow.title}.screen.webm`);
+const out = resolve(opt.out ?? join(dir, `${flow.title}.mp4`));
+
+// Plays the webcam video in the page's <webcam-view>, paused at the start.
+async function load(page) {
+  await page.exposeFunction("__recordingChunk", (i) =>
+    video.subarray(i * CHUNK, (i + 1) * CHUNK).toString("base64"),
+  );
+  await page.evaluate(
+    async (size, chunk, type) => {
+      const cam = document.querySelector("webcam-view");
+      if (!cam) return;
+      const parts = [];
+      for (let i = 0; i * chunk < size; i++) {
+        parts.push(Uint8Array.fromBase64(await window.__recordingChunk(i)));
+      }
+      cam.src = URL.createObjectURL(new Blob(parts, { type }));
+      const v = cam.video;
+      if (v.readyState < 3) {
+        await new Promise((ok, fail) => {
+          v.addEventListener("canplay", ok, { once: true });
+          v.addEventListener("error", () => fail(v.error), { once: true });
+        });
+      }
+      v.pause();
+      v.currentTime = 0;
+    },
+    video.length,
+    CHUNK,
+    flow.video.endsWith(".mp4") ? "video/mp4" : "video/webm",
+  );
+}
+
+// Runs each step at its `t`, counted from when the video starts: just after
+// the first navigation, once the deck is ready.
+class Timed extends PuppeteerRunnerExtension {
+  t0 = null;
+  recorder = null;
+  captured = 0;
+
+  async beforeEachStep(step, flow) {
+    if (this.t0 !== null) await wait(this.t0 + step.t);
+    await super.beforeEachStep?.(step, flow);
+  }
+
+  async afterEachStep(step, flow) {
+    await super.afterEachStep?.(step, flow);
+    if (this.t0 !== null || step.type !== "navigate") return;
+    const { page } = this;
+    await page.evaluate(() => document.querySelector("deck-shift")?.ready);
+    await load(page);
+    this.recorder = await page.screencast({ path: screen });
+    this.captured = performance.now();
+    await page.evaluate(() =>
+      document.querySelector("webcam-view")?.video.play(),
+    );
+    this.t0 = performance.now();
+  }
+}
+
+const browser = await puppeteer.launch({
+  headless: !opt.headed,
+  acceptInsecureCerts: true,
+  args: ["--autoplay-policy=no-user-gesture-required"],
+});
+try {
+  const page = await browser.newPage();
+  page.on("pageerror", (e) => console.error(`page: ${e.message}`));
+  const timed = new Timed(browser, page);
+  await (await createRunner(flow, timed)).run();
+  // minimal: real-time capture, so frames can lag a slow machine; seek every
+  // animation per frame (as ../demo's renderer does) if that shows.
+  await wait(timed.t0 + flow.duration);
+  await timed.recorder.stop();
+  const offset = (timed.t0 - timed.captured) / 1000;
+  const ffmpeg = spawn(
+    "ffmpeg",
+    [
+      "-y",
+      "-loglevel",
+      "error",
+      "-ss",
+      `${offset}`,
+      "-i",
+      screen,
+      "-i",
+      join(dir, flow.video),
+      "-map",
+      "0:v",
+      "-map",
+      "1:a?",
+      "-t",
+      `${flow.duration / 1000}`,
+      "-vf",
+      "pad=ceil(iw/2)*2:ceil(ih/2)*2",
+      "-c:v",
+      "libx264",
+      "-pix_fmt",
+      "yuv420p",
+      "-c:a",
+      "aac",
+      "-movflags",
+      "+faststart",
+      out,
+    ],
+    { stdio: "inherit" },
+  );
+  const code = await new Promise((ok) => ffmpeg.on("exit", ok));
+  if (code) throw new Error(`ffmpeg exited with ${code}`);
+  await rm(screen);
+  console.log(out);
+} finally {
+  await browser.close();
+}