Vídeo: frames e codecs

Vídeo é sequência temporal — use isso

Um vídeo de 1080p a 30fps tem ~1.5 Gbps de dados brutos. Netflix streaming usa 5–10 Mbps. Compressão de 100–300×. Como?

A chave é que frames consecutivos são quase idênticos. Em vez de transmitir cada frame completo, codecs modernos transmitem apenas as diferenças (deltas) em relação ao frame anterior. Mas há mais: o codificador encontra onde cada bloco de 16×16 pixels se moveu no frame anterior — isso são os motion vectors. A diferença entre o bloco predito e o real (o residual) é geralmente muito próxima de zero e comprime muito bem.

I-frames vs. P-frames

Navegue pelos frames e alterne entre modo I-frame (completo) e P-frame (delta). Observe quais pixels mudaram entre frames.

Estrutura GOP e tipos de frame

// Estrutura de um GOP (Group of Pictures) em H.264
// Sequência típica: I B B P B B P B B P ... I

// I-Frame (Intra): frame completo, sem referência
const iFrame = {
  tipo: "I",
  dados: encodeFullFrame(pixelData),  // DCT + quantização por bloco
  tamanho: "grande",                // ~10-50x um P-frame
};

// P-Frame (Predicted): delta em relação ao frame anterior
const pFrame = {
  tipo: "P",
  motionVectors: [               // onde cada bloco 16×16 foi em relação ao frame ref
    { dx: +3, dy: 0 },          // este bloco se moveu 3px para direita
    { dx: 0,  dy: +1 },          // este bloco se moveu 1px para baixo
  ],
  residual: encodeDelta(diff),   // erro de predição (quase zeros!)
  tamanho: "pequeno",             // ~5-20x menor que I-frame
};

// B-Frame (Bidirectional): usa frame anterior E posterior
const bFrame = {
  tipo: "B",
  refAnterior: prevFrame,
  refPosterior: nextFrame,       // exige buffer extra no decodificador
  tamanho: "muito pequeno",
};

Bitrates e codecs modernos

// Cálculo de bitrate para diferentes qualidades

// Vídeo bruto: 1080p 30fps
const rawBitrate = 1920 * 1080 * 3 * 8 * 30;  // ~1.5 Gbps !

// Após compressão H.264:
const streamingSD  = "1–3 Mbps";   // Netflix 720p
const streamingHD  = "5–10 Mbps";  // Netflix 1080p
const streaming4K  = "15–25 Mbps"; // Netflix 4K HDR
const bluray4K     = "50–128 Mbps";// Blu-ray Ultra HD

// Taxa de compressão H.264: ~100:1 sobre vídeo bruto
// HEVC/H.265: ~150:1 (50% menor que H.264 mesma qualidade)
// AV1: ~180:1 (30% menor que HEVC, codec aberto)

// Modos de controle de bitrate:
// CBR: bitrate constante — bom para streaming ao vivo
// VBR: bitrate variável — cenas complexas = mais bits, simples = menos
// CRF: qualidade constante — encoder decide o bitrate automaticamente

Compressor de vídeo simples

Mini projeto: capture frames da câmera com getUserMedia + Canvas. Para cada frame, calcule a diferença em relação ao frame anterior (subtração pixel a pixel). Visualize os pixels que mudaram (delta frame) em tempo real.

Projeto principal: implemente motion compensation simples: divida cada frame em blocos 16×16. Para cada bloco, encontre o bloco mais parecido no frame anterior (busca em janela de ±8 pixels). Calcule o residual (diferença) e compare a compressão total: motion vectors + residual vs. frame bruto.

Desafio extra: use a MediaRecorder API do browser para gravar vídeo de câmera em tempo real com diferentes bitrates (bits/segundo). Compare o tamanho de arquivo e a qualidade visual. Experimente formatos: WebM (VP8/AV1) vs. MP4 (H.264).

Teste sua intuição

Onde você encontra isso