Communitygithub.com

Chrome Video Render (CVR)

Adaptador de renderização de vídeo para Chrome no Android, para Remotion e HyperFrames. Use 'cvr' para início leve e rápido, e 'rvc' para verificações detalhadas de ambiente, hardware, segmentos e sincronia. Mede planos de renderização curtos/longos na primeira execução. Suporta Chrome headless, descoberta de navegador portátil, renderização paralela em primeiro plano, segmentação adaptativa, montagem de áudio PCM e verificação de sincronia áudio/vídeo.

O que é Chrome Video Render (CVR)?

O Chrome Video Render (CVR) é um adaptador de renderização e navegador para ambientes Android/proot, projetado para integração com Remotion e HyperFrames. Ele oferece dois modos principais de início: 'cvr' (padrão, para renderizações cotidianas) e 'rvc' (para diagnósticos e verificações de lançamento). O modo 'cvr' mede planos de renderização curtos (até 300 frames) e longos na primeira execução, armazenando-os em um arquivo de cache para inícios posteriores instantâneos. O modo 'rvc' re-mede os planos a cada execução, fornecendo um relatório completo de ambiente, detalhes de orçamento de hardware, validação por segmento e verificação opcional de sincronia. Ambos os modos são executados em primeiro plano, com trabalhos independentes serializados e paralelismo dentro de um único trabalho limitado pelo plano medido. O CVR também suporta segmentação adaptativa, que ajusta o tamanho dos segmentos de acordo com o comprimento da composição, reduzindo o número de segmentos para vídeos mais longos e evitando reinicializações desnecessárias do navegador. A ferramenta é útil para desenvolvedores que precisam de renderização eficiente e personalizável em dispositivos Android, com suporte a verificações de sincronia e diagnósticos detalhados.

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

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

O que Chrome Video Render (CVR) faz?

Adaptador de navegador e renderização para Android/proot para Remotion e HyperFrames. Conteúdo de composição e timelines de áudio permanecem de propriedade do projeto de vídeo.

Modos de início

ModoUsoComportamento de início
cvrpadrão, renderizações cotidianasna primeira execução, mede planos de renderização curtos/longos (duração escala com o número de candidatos, anunciado antecipadamente); execuções posteriores leem o arquivo de plano e iniciam imediatamente; sem sondas extras de versão npm/navegador; resultado conciso em uma linha
rvcdiagnósticos, verificações de lançamentore-mede ambos os planos a cada execução e sobrescreve o arquivo de plano compartilhado (histórico mantido); relatório completo de ambiente, detalhe de orçamento de hardware, validação por segmento e verificação opcional de sincronia; resumo de tempo por fase

Ambos os modos são em primeiro plano. Trabalhos independentes são serializados; paralelismo dentro de um único trabalho é limitado pelo plano medido.

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

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

Planos de renderização

O número de workers é medido, não inferido. No primeiro uso, duas composições de sonda fixas são renderizadas em cada número de worker candidato por várias rodadas, e a mediana decide a pontuação de cada candidato; o vencedor é registrado separadamente para vídeos curtos (<=300 frames) e longos em <project>/node_modules/.cache/cvr-render-plan.json. Execuções cvr posteriores leem o plano correspondente e iniciam a renderização imediatamente. rvc re-mede a cada execução, sobrescreve o arquivo de plano e renderiza aquele trabalho com os novos números; cada gravação é acrescentada a uma lista de history.

Nenhum número de worker é enviado como padrão, pois o vencedor depende do dispositivo. A primeira execução imprime o que está fazendo antes de começar, pois custa uma renderização de sonda por candidato por rodada por classe de comprimento. --workers N ignora completamente a sondagem.

Ambiente do navegador

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

cvr usa os lançadores desta instalação. rvc adicionalmente executa render-env.sh --json para relatórios de navegador, engine e hardware. Para um checkout fora de /skills, use o diretório scripts/ desse checkout.

Remotion

python3 /skills/chrome-video-render/scripts/remotion-segmented.py \
  --project /caminho/para/projeto --entry src/index.ts \
  --composition Hello --output /caminho/para/saida.mp4 \
  --input-props '{"title":"Exemplo"}'

Usa o pacote Remotion do projeto alvo e as APIs oficiais selectComposition(), renderMedia() e combineChunks(). Suporta FPS fracionário e props JSON. Produz segmentos PCM e uma codificação final AAC.

O tamanho do segmento se adapta ao comprimento da composição quando --segment-frames é omitido: 90 frames até 300 frames, 150 até 900, 300 até 3000 e 450 além disso. Vídeos longos evitam assim ser divididos em dezenas de segmentos que cada um reinicia um navegador. Passe --segment-frames para fixar um tamanho específico.

HyperFrames

Após revisão e aprovação do projeto:

python3 /skills/chrome-video-render/scripts/hyperframes-render.py \
  --project /caminho/para/projeto --output /caminho/para/saida.mp4 \
  --quality looks --workers 2   # valor de exemplo; escolha por projeto

Mantém a timeline nativa, mixer e sistema de workers do HyperFrames. O adaptador de backend é selecionado por assinatura de função, não por um nome de build gerado.

--mode quick usa o lançador Headless Shell instalado; --mode full executa render-env.sh e dimensiona workers a partir do orçamento de hardware. A invocação subjacente hyperframes render é a mesma em ambos os modos, e um --workers explícito é respeitado de qualquer forma. HyperFrames não usa os planos de renderização medidos.

Verificação

  • cvr: verificação básica de quadros decodificados, FPS, dimensões e propriedades de áudio; status de sincronia permanece not-measured a menos que a verificação de calibração seja solicitada.
  • rvc: decodificação completa em passagem única, detalhe por segmento, orçamento de hardware, verificações de sincronia baseadas em marcadores e um resumo de tempo por fase.
  • check-av-sync.py requer uma composição de calibração com pulsos PCM conhecidos e flashes visuais.
  • selftest-av-sync.py valida sinais alinhados e atrasados deliberadamente.
  • webgl-policy-check.py é uma auditoria opcional de backend, não uma etapa rotineira de renderização.

Veja implementação e compatibilidade, backend do navegador e notas de backend.

Escopo de validação

Testado em Android/proot aarch64 com Remotion 4.0.538 e HyperFrames 0.8.198: FPS fracionário, composições de áudio e silenciosas, encaminhamento de parâmetros e verificações de sincronia. As versões são listadas para que o leitor veja o que foi testado, não como uma garantia de versão suportada.

A primeira execução custa uma renderização de sonda por candidato por rodada por classe de comprimento, portanto sua duração escala com o número de candidatos e o comprimento do vídeo; é um custo único por dispositivo, já que execuções posteriores leem o plano registrado. rvc re-mede a cada execução. A segmentação adaptativa reduz o número de segmentos para vídeos mais longos, com o mesmo total de quadros decodificados. Quaisquer números produzidos por uma execução descrevem a máquina que os produziu, não uma garantia para outros dispositivos.

Habilidades Relacionadas