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 para ajudar.

Ao depurar erros de reprodução de mídia, a primeira coisa que geralmente verificamos é o atributo error MediaError 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 a análise de telemetria e nem sempre fornecem informações suficientes para depurar erros de reprodução. Por motivos de privacidade, às vezes o texto completo do erro precisa 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 painel de mídia no Chrome DevTools
Painel de mídia no Chrome DevTools.

Você também pode usar o aplicativo gratuito FFmpeg para verificar a integridade do arquivo de mídia com 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.