Communitygithub.com

chrome-video-render

Android Chrome video rendering adapter for Remotion and HyperFrames. Use cvr for a fast lightweight render start and rvc for detailed environment, hardware, segment and sync checks. Measures short/long render plans on first run. Supports headless Chrome, portable browser discovery, foreground parallel rendering, adaptive segmentation, PCM audio assembly and audio/video sync verification.

What is chrome-video-render?

chrome-video-render is a Claude Code agent skill that android Chrome video rendering adapter for Remotion and HyperFrames. Use cvr for a fast lightweight render start and rvc for detailed environment, hardware, segment and sync checks. Measures short/long render plans on first run. Supports headless Chrome, portable browser discovery, foreground parallel rendering, adaptive segmentation, PCM audio assembly and audio/video sync verification.

Works with~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Jacky-xw/chrome-video-render/tree/main

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

Documentation

Chrome Video Render (CVR)

Android/proot browser and rendering adapter for Remotion and HyperFrames. Composition content and audio timelines remain owned by the video project.

Start modes

ModeUseStart behavior
cvrdefault, everyday rendersfirst run measures short/long render plans (duration scales with candidate count, announced beforehand); later runs read the plan file and start immediately; no extra npm/browser version probes; concise one-line result
rvcdiagnostics, release checksre-measures both plans every run and overwrites the shared plan file (history kept); full environment report, hardware budget detail, per-segment validation and optional sync check; per-phase timing summary

Both modes are foreground. Independent jobs are serialized; parallelism inside one job is bounded by the measured plan.

# lightweight
python3 /skills/chrome-video-render/scripts/remotion-segmented.py --project . --composition Hello --output out.mp4 --mode quick

# detailed
python3 /skills/chrome-video-render/scripts/remotion-segmented.py --project . --composition Hello --output out.mp4 --mode full --sync-check

Render plans

Worker count is measured, not inferred. On first use, two fixed probe compositions are rendered at each candidate worker count for several rounds, and the median decides each candidate's score; the winner is recorded separately for short (<=300 frames) and long videos in <project>/node_modules/.cache/cvr-render-plan.json. Later cvr runs read the matching plan and start rendering immediately. rvc re-measures every run, overwrites the plan file, and renders that job with the new numbers; each write is appended to a history list.

No worker count is shipped as a default, because which one wins depends on the device. The first run prints what it is doing before it starts, since it costs one probe render per candidate per round per length class. --workers N bypasses probing entirely.

Browser environment

source /skills/chrome-video-render/scripts/video-browser-env.sh

cvr uses the launchers from this installation. rvc additionally runs render-env.sh --json for browser, engine and hardware reporting. For a checkout outside /skills, use that checkout's scripts/ directory.

Remotion

python3 /skills/chrome-video-render/scripts/remotion-segmented.py \
  --project /path/to/project --entry src/index.ts \
  --composition Hello --output /path/to/output.mp4 \
  --input-props '{"title":"Example"}'

Uses the target project's Remotion package and official selectComposition(), renderMedia() and combineChunks() APIs. Supports fractional FPS and JSON props. Produces PCM segments and one final AAC delivery encode.

Segment size adapts to the composition length when --segment-frames is omitted: 90 frames up to 300 frames, 150 up to 900, 300 up to 3000 and 450 beyond. Long videos therefore avoid being split into dozens of segments that each relaunch a browser. Pass --segment-frames to pin a fixed size.

HyperFrames

After the project's review and approval:

python3 /skills/chrome-video-render/scripts/hyperframes-render.py \
  --project /path/to/project --output /path/to/output.mp4 \
  --quality looks --workers 2   # example value; pick per project

Keeps HyperFrames' native timeline, mixer and worker system. The backend adapter is selected by function signature, not a generated build filename.

--mode quick uses the installed Headless Shell launcher; --mode full runs render-env.sh and sizes workers from the hardware budget. The underlying hyperframes render invocation is the same in both modes, and an explicit --workers is honoured either way. HyperFrames does not use the measured render plans.

Verification

  • cvr: basic decoded frame, FPS, dimension and audio-property checks; sync status remains not-measured unless calibration checking is requested.
  • rvc: single-pass full decode, per-segment detail, hardware budget, marker-based sync checks and a per-phase timing summary.
  • check-av-sync.py requires a calibration composition with known PCM pulses and visual flashes.
  • selftest-av-sync.py validates both aligned and deliberately delayed signals.
  • webgl-policy-check.py is an optional backend audit, not a routine render step.

See implementation and compatibility, browser backend and backend notes.

Validation scope

Exercised on Android/proot aarch64 with Remotion 4.0.538 and HyperFrames 0.8.198: fractional FPS, audio and silent compositions, parameter forwarding and sync checks. The versions are listed so a reader can see what was tried, not as a supported-version claim.

The first run costs one probe render per candidate per round per length class, so its duration scales with candidate count and video length; it is a one-time cost per device, since later runs read the recorded plan. rvc re-measures every run. Adaptive segmentation reduces segment count for longer videos at the same decoded frame total. Any figures produced by a run describe the machine that produced them, not a guarantee for other devices.

Related Skills