Authentication demonstrations are difficult to record reliably. A live flow
depends on cookies, existing sessions, certificate trust, test passwords, and
network timing. It can also expose credentials or tokens in a recording.

For this project, I built a deterministic presentation that explains the real
behavior without depending on live secrets. The implementation is available at
github.com/darkedges/pingfedonetap.

The storyboard

The 16:9 tour contains six timed scenes:

1. A fresh visitor sees no unsolicited account popup.
2. The visitor starts an interactive PingFederate login.
3. The OIDC callback establishes the application session.
4. Application-only logout clears local state.
5. The chooser displays two remembered accounts.
6. Selecting the second account reuses the PingFederate session without a password prompt.

The presentation uses mock credentials and token summaries. It demonstrates
state transitions but never handles a real password, authorization code, or
token.

make demo-tour

The page supports autoplay, looping, playback speed, hidden controls, Space to
pause, and R to restart. This makes it useful both for rehearsal and automated
capture.

Generate a timed AI voiceover

The narration uses the Apache-2.0 licensed hexgrad/Kokoro-82M model from
Hugging Face. The selected af_heart voice is clear for short technical
narration.

The source script is a JSON file with a start time, scene label, and sentence
for each cue. The generator synthesizes every sentence, measures its actual
duration, and fails if it would overlap the next cue.

make voiceover

The output is:

artifacts/one-tap-demo-voiceover.wav

Solving PyTorch memory growth

An early implementation kept one Kokoro pipeline alive while generating all
six sentences. On a constrained Windows development machine, CPU memory grew
until PyTorch failed during a later cue.

The final generator starts one worker process per cue. Each worker loads the
model, writes a temporary floating-point WAV, and exits. Process termination
returns PyTorch's working memory to the operating system before the next cue
starts. The parent process then validates timing and mixes the small audio
segments into a 34-second, 24 kHz PCM WAV.

This approach is slower, but its memory behavior is predictable.

Record the browser automatically

Playwright opens a headless Chromium context with both viewport and recording
size fixed at 1280 x 720. Autoplay is disabled so the recorder controls the
exact start.

The capture process:

1. Opens the presentation and verifies the stage dimensions.
2. Waits for the page to settle.
3. Presses R to start the tour.
4. Waits until the tour marks the final scene complete.
5. Holds the final signed-in frame until the 34-second narration ends.
6. Closes the browser context so Playwright finalizes the WebM.
7. Trims browser setup frames.

Mux a delivery-ready MP4

The project uses imageio-ffmpeg, whose platform wheel includes an FFmpeg
executable. FFmpeg converts the silent VP8 WebM to H.264 and adds the WAV as AAC
audio.

The complete pipeline is one command:

make demo-video

It produces:

artifacts/one-tap-demo-screen.webm
artifacts/one-tap-demo-final.mp4

The final file is 1280 x 720, 30 frames per second, 34 seconds long, with H.264
video, AAC audio, and the MP4 metadata moved to the front for progressive web
playback.

Why keep the deterministic tour separate

The narrated presentation is not a replacement for integration tests. The live
demo still verifies the adapter endpoint, cookie decoding, OIDC callback, PKCE,
and session behavior. The deterministic tour has a different purpose: it makes
the explanation repeatable, safe to publish, and easy to regenerate after a UI
change.

That separation produced a better test tool and a better communication tool.

Repository: https://github.com/darkedges/pingfedonetap

Watch the published demo: https://youtu.be/KuVNjWiZrAk

Playwright #Python #AI #FFmpeg #PingFederate #DevOps