feature-demo-recording

Feature Demo Recording

Record a real browser and cut it into either of two things:

• Narrated film (default when someone will watch and listen): designed brand slides, spoken narration, subtitles, and a camera that punches in on whatever is being talked about.
• Silent evidence clip (a PR, a QA pass): the same capture with subtitles and punch-in, no audio, authored durations.

Both share one pipeline. The only difference is whether the timeline comes from measured speech or from durations you write down.

The rule that makes it work

Narration first, then record. Generate the audio, measure every line with ffprobe, and pace the capture to those numbers. Alignment is then true by construction instead of repaired in the edit. Recording first and narrating after accumulates drift you cannot fix without re-recording -- measured at about 3s by the last beat on a two-minute cut, versus under a few hundred ms when the recorder holds absolute targets read out of the measured timeline.

In silent mode there is nothing to measure, so you write each beat's duration in the script instead. Same file, same recorder, narrate.py --silent.

Pipeline

script.json ──narrate.py──> narration.mp3 + narr.json      (measured timeline)
              (--silent: no audio, durations taken from the script)
                                   │
                                   ▼  the recorder reads the beat targets
   record.py (adapted) ──> page.webm + events.json          (capture + beat log)
                                   │
                  ffmpeg ──> assets/footage.mp4
                                   │
      compose.py (narr.json + events.json) ──> index.html   (HTML timeline)
                                   │
                  hyperframes ──> renders/*.mp4
                                   │
      verify_align.py ──> drift / audio / picture / streams  (gate before delivery)

Only record.py is written per video. Everything else is generic.