Communitygithub.com

chrome-video-render

Adaptador de renderizado de video para Android Chrome, diseñado para Remotion e HyperFrames. Usa 'cvr' para un inicio rápido y ligero, y 'rvc' para comprobaciones detalladas de entorno, hardware, segmentos y sincronización. Mide planes de renderizado cortos/largos en la primera ejecución. Admite Chrome headless, descubrimiento de navegadores portátiles, renderizado paralelo en primer plano, segmentación adaptativa, ensamblaje de audio PCM y verificación de sincronización audiovisual.

¿Qué es chrome-video-render?

Chrome Video Render (CVR) es una habilidad de agente de IA especializada que actúa como adaptador de renderizado de video para entornos Android/proot, diseñado específicamente para los frameworks Remotion e HyperFrames. Su propósito principal es optimizar el proceso de renderizado de composiciones de video, midiendo y adaptando automáticamente la configuración al hardware del dispositivo. Ofrece dos modos de inicio: 'cvr', para un uso diario rápido que solo mide el rendimiento en la primera ejecución y luego usa un archivo de plan guardado, y 'rvc', para diagnósticos y verificaciones de lanzamiento que re-miden todo en cada ejecución. La habilidad gestiona la detección del navegador (Chrome headless o navegadores portátiles), la paralelización del renderizado en segmentos, el ensamblaje de audio PCM y la verificación de sincronización audiovisual. No asume una configuración por defecto, sino que la mide empíricamente en el dispositivo real, lo que la hace especialmente útil para entornos diversos como dispositivos Android con proot. La segmentación se adapta dinámicamente según la duración del video, y la habilidad proporciona planes de renderizado tanto para videos cortos (hasta 300 frames) como largos. Está diseñada para funcionar con proyectos que usan Remotion o HyperFrames, y soporta tanto renderizado secuencial como paralelo dentro de un mismo trabajo.

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

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Chrome Video Render (CVR)

Adaptador de navegador y renderizado para Android/proot, diseñado para Remotion e HyperFrames. El contenido de la composición y las líneas de tiempo de audio permanecen bajo la propiedad del proyecto de video.

Modos de inicio

ModoUsoComportamiento al iniciar
cvrpredeterminado, renderizados cotidianosla primera ejecución mide planes de renderizado cortos/largos (la duración escala con el número de candidatos, anunciado de antemano); las ejecuciones posteriores leen el archivo de plan y comienzan de inmediato; sin sondas adicionales de npm/versión del navegador; resultado conciso en una línea
rvcdiagnósticos, verificaciones de lanzamientomide ambos planes en cada ejecución y sobrescribe el archivo de plan compartido (se mantiene un historial); informe completo del entorno, detalle del presupuesto de hardware, validación por segmento y verificación de sincronización opcional; resumen de tiempos por fase

Ambos modos se ejecutan en primer plano. Los trabajos independientes se serializan; el paralelismo dentro de un mismo trabajo está limitado por el plan medido.

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

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

Planes de renderizado

El número de trabajadores se mide, no se infiere. En el primer uso, se renderizan dos composiciones de prueba fijas con cada número candidato de trabajadores durante varias rondas, y la mediana decide la puntuación de cada candidato; el ganador se registra por separado para videos cortos (<=300 frames) y largos en <project>/node_modules/.cache/cvr-render-plan.json. Las ejecuciones posteriores de cvr leen el plan correspondiente y comienzan a renderizar inmediatamente. rvc mide de nuevo en cada ejecución, sobrescribe el archivo de plan y renderiza ese trabajo con los nuevos números; cada escritura se añade a una lista de history.

No se envía ningún número de trabajadores como predeterminado, porque cuál gana depende del dispositivo. La primera ejecución imprime lo que está haciendo antes de comenzar, ya que cuesta un renderizado de prueba por candidato por ronda por clase de duración. --workers N omite por completo las pruebas.

Entorno del navegador

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

cvr usa los lanzadores de esta instalación. rvc además ejecuta render-env.sh --json para informar sobre el navegador, el motor y el hardware. Para un checkout fuera de /skills, use el directorio scripts/ de ese checkout.

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"}'

Utiliza el paquete Remotion del proyecto de destino y las API oficiales selectComposition(), renderMedia() y combineChunks(). Admite FPS fraccional y propiedades JSON. Produce segmentos PCM y un codificado AAC final de entrega.

El tamaño del segmento se adapta a la duración de la composición cuando no se especifica --segment-frames: 90 frames hasta 300 frames, 150 hasta 900, 300 hasta 3000 y 450 más allá. Por lo tanto, los videos largos evitan dividirse en docenas de segmentos que reinician el navegador cada vez. Pase --segment-frames para fijar un tamaño fijo.

HyperFrames

Después de la revisión y aprobación del proyecto:

python3 /skills/chrome-video-render/scripts/hyperframes-render.py \
  --project /path/to/project --output /path/to/output.mp4 \
  --quality looks --workers 2   # valor de ejemplo; elegir por proyecto

Mantiene la línea de tiempo nativa de HyperFrames, el mezclador y el sistema de trabajadores. El adaptador de backend se selecciona por firma de función, no por un nombre de archivo de build generado.

--mode quick usa el lanzador Headless Shell instalado; --mode full ejecuta render-env.sh y dimensiona los trabajadores según el presupuesto de hardware. La invocación subyacente de hyperframes render es la misma en ambos modos, y un --workers explícito se respeta en cualquier caso. HyperFrames no utiliza los planes de renderizado medidos.

Verificación

  • cvr: verificaciones básicas de fotogramas decodificados, FPS, dimensiones y propiedades de audio; el estado de sincronización sigue siendo not-measured a menos que se solicite una verificación de calibración.
  • rvc: decodificación completa de una sola pasada, detalle por segmento, presupuesto de hardware, verificaciones de sincronización basadas en marcadores y un resumen de tiempos por fase.
  • check-av-sync.py requiere una composición de calibración con pulsos PCM conocidos y destellos visuales.
  • selftest-av-sync.py valida señales tanto alineadas como deliberadamente retrasadas.
  • webgl-policy-check.py es una auditoría de backend opcional, no un paso de renderizado rutinario.

Consulte implementación y compatibilidad, backend del navegador y notas del backend.

Alcance de la validación

Probado en Android/proot aarch64 con Remotion 4.0.538 e HyperFrames 0.8.198: FPS fraccional, composiciones con y sin audio, reenvío de parámetros y verificaciones de sincronización. Las versiones se enumeran para que el lector pueda ver lo que se probó, no como una declaración de versiones compatibles.

La primera ejecución cuesta un renderizado de prueba por candidato por ronda por clase de duración, por lo que su duración escala con el número de candidatos y la duración del video; es un costo único por dispositivo, ya que las ejecuciones posteriores leen el plan registrado. rvc mide de nuevo en cada ejecución. La segmentación adaptativa reduce el número de segmentos para videos más largos con el mismo total de fotogramas decodificados. Cualquier cifra producida por una ejecución describe la máquina que la produjo, no una garantía para otros dispositivos.

Skills relacionados