Déboguer les erreurs de lecture de contenus multimédias sur le Web

François Beaufort
François Beaufort

Le débogage des éléments multimédias HTML, tels que <video> et <audio>, peut être difficile, car les implémentations de décodeur varient en termes d'erreurs (les décodeurs matériels sont généralement les plus stricts), en particulier lorsqu'une lecture peut utiliser des fonctionnalités plus ésotériques d'un codec particulier. Heureusement pour nous, il existe une variété d'outils que nous pouvons utiliser pour vous aider.

Lors du débogage des erreurs de lecture de contenus multimédias, la première chose à vérifier est généralement l'attribut MediaError error de l'élément multimédia HTML. Cet attribut donne une indication générale sur la cause de l'erreur de lecture du contenu multimédia. La propriété MediaError.code renvoie une valeur numérique représentant le type d'erreur qui s'est produite sur un élément multimédia. L'autre propriété MediaError.message peut fournir une chaîne contenant des informations de diagnostic provenant du navigateur.

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

Ces propriétés sont particulièrement utiles pour l'analyse de la télémétrie. Elles ne fournissent pas toujours suffisamment d'informations pour déboguer les erreurs de lecture. Pour des raisons de confidentialité, le texte d'erreur complet doit parfois être omis.

Pour accéder à des informations complètes sur les erreurs, utilisez le panneau multimédia des outils pour les développeurs Chrome afin d'afficher les journaux multimédias. De nombreuses informations, telles que des événements, des avertissements et des messages d'erreur, vous donneront de nombreuses indications sur les erreurs de lecture des contenus multimédias.

<ph type="x-smartling-placeholder">
</ph> Capture d&#39;écran du panneau multimédia dans les outils pour les développeurs Chrome
Media Panel dans les outils pour les développeurs Chrome

Vous pouvez également utiliser l'application sans frais FFmpeg pour vérifier l'intégrité des fichiers multimédias à l'aide de la commande suivante:

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

Voici quelques erreurs que vous pouvez rencontrer en exécutant ces commandes avec un fichier vidéo dont le codec n'est pas valide:

[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

Le lecteur de structure MP4Box.js / ISOBMFF est un outil utile pour déboguer les problèmes de flux de bits. Pour l'utiliser, vous devez connaître le format MP4.

Enfin, certains outils professionnels d'analyse de flux vidéo, tels que VQAnalyzer, Elecard StreamEye et Codecian CodecVisa, peuvent s'avérer intéressants.