Frame Extractor

App local (HTML/CSS/JS puro, sem dependências) para navegar frame a frame em um vídeo MP4 e exportar o frame escolhido como JPG no tamanho original do vídeo.

Como usar

Abra index.html no navegador (Chrome/Edge recomendado).

Se o navegador bloquear a exportação do canvas via file://, sirva a pasta:

python3 -m http.server 8000
# depois acesse http://localhost:8000

1. Abrir vídeo MP4… (ou arraste o arquivo na área tracejada). Nada é enviado para servidor algum — tudo roda no navegador.
2. O FPS é detectado automaticamente (via requestVideoFrameCallback) e a timeline é montada com todos os frames, de 1 até o último. Se a detecção falhar ou o valor estiver errado, edite o campo FPS — a contagem de frames é recalculada na hora.
3. Navegue:
   • arraste o mouse sobre a timeline para deslizar;
   • roda do mouse sobre a timeline dá zoom (aproxime até ver frame a frame);
   • botões < e > andam 1 frame, << e >> andam 10, |< e >| vão ao primeiro/último;
   • teclado: ←/→ (1 frame), Shift+←/Shift+→ (10 frames), Home/End;
   • ou digite o número do frame no campo Frame.
4. Salvar JPG baixa o frame atual como <nome-do-video>_frame_<numero>.jpg, exatamente nas dimensões originais (videoWidth × videoHeight). A qualidade JPEG é ajustável (padrão 95%).

Arquivos

• index.html — estrutura da interface
• style.css — estilos
• app.js — detecção de FPS, seek por frame, timeline com miniaturas e export JPG

Limitações

• O navegador só abre vídeos cujo codec ele suporta (MP4/H.264 e WebM/VP9 estão ok; HEVC, ProRes e afins podem não abrir).
• O posicionamento por frame usa currentTime = (frame + 0.5) / fps. Para vídeos com taxa de quadros variável (VFR), o mapeamento frame↔tempo é aproximado.
• requestVideoFrameCallback não existe no Firefox: lá o FPS entra como 30 e deve ser ajustado à mão no campo FPS.