Depurar erros de reprodução de mídia na Web

François Beaufort
François Beaufort

Depurar elementos de mídia HTML, como <video> e <audio>, pode ser difícil, já que as implementações do decodificador variam no que consideram erros (os decodificadores de hardware geralmente são os mais rigorosos), especialmente quando a reprodução pode usar recursos mais esotéricos de um codec específico. Felizmente, há várias ferramentas que podemos usar.

Ao depurar erros de reprodução de mídia, a primeira coisa que geralmente verificamos é o atributo MediaError error no elemento de mídia HTML. Esse atributo é uma dica de alto nível do que causou o erro de reprodução de mídia. A propriedade MediaError.code retorna um valor numérico que representa o tipo de erro que ocorreu em um elemento de mídia. A outra propriedade MediaError.message pode fornecer uma string com algumas informações de diagnóstico do navegador.

const video = document.querySelector('video');
video.addEventListener('error', () => {
  console.log('Error code: ' + video.error.code);
  console.log('Error message: ' + video.error.message);
});

Essas propriedades são mais úteis para análise de telemetria e nem sempre fornecem informações suficientes para depurar erros de reprodução. Por motivos de privacidade, algumas vezes o texto completo do erro deve ser omitido.

Para acessar as informações completas do erro, use o Media Panel do Chrome DevTools para ver os registros de mídia. Você encontrará muitas informações, como eventos, avisos e mensagens de erro, que darão boas dicas sobre os erros de reprodução de mídia.

Captura de tela do Media Panel no Chrome DevTools
Media Panel no Chrome DevTools.

Também é possível usar o aplicativo sem custo financeiro FFmpeg para verificar a integridade de arquivos de mídia graças a este comando:

ffmpeg -err_detect explode -i <file> -f null -

Estes são alguns erros que você pode encontrar com esses comandos para um arquivo de vídeo com codec inválido:

[mov,mp4,m4a,3gp,3g2,mj2 @ 0x7fc62df05380] Could not find codec parameters for stream 0 (Video: none (zzzz / 0x7A7A7A7A), none(smpte170m/smpte170m/bt709, progressive), 320x240, 4 kb/s): unknown codec
Consider increasing the value for the 'analyzeduration' (0) and 'probesize' (5000000) options
[matroska,webm @ 0x7fd45b705380] Unknown EBML doctype '0000'
[matroska,webm @ 0x7f8d17904d40] Element at 0x8b ending at 0x10400000095 exceeds containing master element ending at 0x9b
Truncating packet of size 9069 to 94

O MP4Box.js / ISOBMFF Box Structure Viewer é uma ferramenta útil para depurar problemas de bitstream. No entanto, é necessário já entender MP4 para usar.

Por fim, algumas ferramentas profissionais de análise de stream de vídeo, como VQAnalyzer, Elecard StreamEye e Codecian CodecVisa, podem valer a pena.