Transparência Alfa no vídeo do Chrome

Sam Dutton
François Beaufort
François Beaufort
GitHub

Vídeo "Transparência Alfa" no Chrome

O Chrome 31 agora é compatível com a transparência alfa de vídeo em WebM.

Em outras palavras, o Chrome considera o Canal Alfa ao abrir a tela verde vídeos codificados para WebM (VP8 e VP9) com um canal alfa. Isso significa que é possível reproduzir vídeos com fundos transparentes, seja sobre páginas da Web, imagens ou até mesmo sobre outros vídeos.

Há uma demonstração em simpl.info/videoalpha Um pouco surreal e um pouco descuidado (literalmente), mas você entendeu!

Como criar vídeos Alfa

O método que descrevemos usa as ferramentas de código aberto Liquider e ffmpeg:

  1. Filme o objeto em frente a um fundo de cor única, como um plano de fundo claro cortina verde.
  2. Processar o vídeo para criar uma matriz de imagens estáticas PNG com transparência dados.
  3. Codifique para um formato de vídeo (neste caso, WebM).

Existem também ferramentas proprietárias para realizar o mesmo trabalho, como o Adobe After Effects, que você pode encontrar mais simples.

1. Gravar um vídeo em tela verde

Em primeiro lugar, você precisa filmar o assunto de maneira que tudo o que o plano de fundo pode ser "removido" (tornar transparente) pelo processamento subsequente.

A maneira mais fácil de fazer isso é filmar na frente de um fundo de cor única, como tela ou cortina. Verde ou azul são as cores mais usadas, principalmente por causa da diferença entre os tons de pele.

Existem vários guias on-line para gravar vídeos em tela verde (também conhecidos como chroma key) e muitos lugares para comprar verde e panos de fundo de tela azul. Você também pode pintar um plano de fundo com a pintura chroma key.

O vídeo do Great Gatsby VFX mostra o que pode ser feito com a tela verde.

Algumas dicas para filmar:

  • Verifique se a pessoa não tem roupas ou objetos da mesma cor como pano de fundo, caso contrário, aparecerão como "buracos" no vídeo final. Até mesmo logotipos ou joias pequenos podem ser problemáticos.
  • Use iluminação consistente e uniforme e evite sombras: o objetivo é que menor intervalo possível de cores no plano de fundo que serão precisam ser transparentes.
  • Usar várias luzes difusas ajuda a evitar sombras e cores de fundo variações.
  • Evite fundos com brilho: as superfícies foscas difundem melhor a luz.

2. Criar vídeo alfa bruto a partir de vídeo de tela verde

As etapas a seguir descrevem uma maneira de criar um vídeo alfa bruto a partir de vídeos em tela verde:

  1. Depois de gravar um vídeo em tela verde, você pode usar uma ferramenta de código aberto, como o Liquidificador, para converter o vídeo a uma matriz de arquivos PNG com dados alfa. Use as cores do Liquider para remover a tela verde e torná-la transparente. Observe que PNG não é obrigatório: qualquer formato que preserve os dados do canal alfa pode ser usado.

  2. Converter a matriz de arquivos PNG em um vídeo YUVA bruto usando uma ferramenta de código aberto como ffmpeg:

    ffmpeg -i image%04d.png -pix_fmt yuva420p video.raw

    Como alternativa, codifique os arquivos diretamente em WebM usando um comando ffmpeg assim:

    ffmpeg -i image%04d.png output.webm

Se quiser adicionar áudio, você pode usar o ffmpeg para enviar por mux com um comando como isso:

ffmpeg -i image%04d.png -i audio.wav output.webm

3. Codificar vídeo Alfa para WebM

Vídeos alfa brutos podem ser codificados para WebM de duas maneiras.

  1. Com o ffmpeg: adicionamos suporte ao ffmpeg para codificar vídeos alfa do WebM.

    Use o ffmpeg com um vídeo de entrada que inclua dados Alfa, defina o formato de saída como WebM, e a codificação será feita automaticamente no formato correto, conforme a especificação. Observação: atualmente, você precisa ter certeza de obter a versão mais recente do ffmpeg na árvore git para que isso funcione.

    Exemplo de comando:

    ffmpeg -i myAlphaVideo.webm output.webm

  2. Como usar webm-tools:

    git clone https://chromium.googlesource.com/webm/libvpx

    webm-tools é um conjunto de ferramentas simples de código aberto relacionadas ao WebM, mantido pelos autores do Projeto WebM, incluindo uma ferramenta para criar vídeos WebM com transparência alfa.

    Execute o binário com --help para conferir a lista de opções com suporte do alpha_encoder.

4. Reprodução no Chrome

Para reproduzir o arquivo WebM codificado no Chrome, basta definir o arquivo como a origem de um de vídeo.

Como fizeram isso?

Conversamos com o engenheiro do Google, Vignesh Venkatasubramanian, sobre o trabalho dele na projeto. Ele resumiu os principais desafios envolvidos:

  • O bitstream VP8 não era compatível com o canal alfa. Então, tivemos que incorporar alfa sem corromper o bitstream VP8 e sem corromper os jogadores.
  • O renderizador do Google Chrome não foi capaz de renderizar vídeos com alfa.
  • O Chrome tem vários caminhos de renderização para diversos dispositivos de hardware/GPU. Todas o caminho de renderização precisou ser alterado para oferecer suporte à renderização de vídeos alfa.

Podemos pensar em muitos casos de uso interessantes para transparência alfa de vídeo: jogos, vídeos interativos, histórias colaborativas (adicione seu próprio vídeo a uma vídeo/imagem de fundo), vídeos com personagens ou enredos alternativos, apps da Web que usam componentes de vídeo de sobreposição.

Aproveite a produção de filmes! Avise nossa equipe se você criar algo incrível com a versão Alfa transparência

Recursos úteis