NALU Explorer - Outil de visualisation des NAL Units d’un flux vidéo H.264

Contexte de développement et idée d’implémentation

• Lors du développement/débogage du codec vidéo H.264, le besoin était de vérifier visuellement la structure des NAL Units
• L’analyse via la ligne de commande de FFmpeg est possible, mais il fallait pouvoir cliquer sur chaque NAL Unit et l’examiner avec l’image réelle de la frame correspondante
• Un parseur Annex B fonctionnant directement dans le navigateur était nécessaire, et FFmpeg basé sur WebAssembly permet aussi le décodage des frames
• Développement de la bibliothèque maison h264-parser pour parser jusqu’aux SPS/PPS/Slice Header (publiée comme package NPM)
• Sortie basée sur la structure syntaxique standard H.264 : les champs sont affichés en structure hiérarchique (indentation) en suivant fidèlement l’arbre syntaxique de parsing de la spécification ITU-T H.264

Fonctionnement

• Parsing Annex B : détection des start codes 00 00 00 01 ou 00 00 01
• Parsing des paramètres :
  • SPS/PPS : extraction des paramètres via le parseur
  • Slice Header : first_mb_in_slice, slice_type, pic_parameter_set_id, etc.
  • Conformité à la syntaxe standard : affichage fidèle à la structure de la spécification H.264, de nal_unit() → seq_parameter_set_rbsp() → vui_parameters()
• Décodage des frames :
  1. calcul de la plage GOP à laquelle appartient la NAL Unit sélectionnée (recherche de l’IDR précédent/suivant)
  2. reconstruction d’Annex B avec les en-têtes SPS/PPS

Principales fonctionnalités

Parsing

• Séparation des NAL Units sur la base des Annex B Start Codes
• Parsing par type de NAL Unit :
  • Type 7 (SPS) : profile, level, résolution, frame rate, etc.
  • Type 8 (PPS) : mode de codage entropique, slice groups, etc.
  • Type 1/5 (Slice) : slice_type, first_mb_in_slice, frame_num, etc.
  • Type 6 (SEI) : métadonnées (parsing limité)
• Sortie de l’arbre syntaxique standard H.264 : parsing conditionnel (blocs if), structure hiérarchique et ordre de lecture du bitstream affichés tels quels
• Dump hexadécimal RBSP : permet d’examiner les données brutes au format offset, hex bytes et ASCII

Exemple réel de sortie de parsing SPS :

nal_unit()  
  forbidden_zero_bit: 0  
  nal_ref_idc: 3  
  nal_unit_type: 7  
    seq_parameter_set_rbsp()  
      profile_idc: 100  
      constraint_set0_flag: 0  
      constraint_set1_flag: 0  
      constraint_set2_flag: 0  
      constraint_set3_flag: 0  
      constraint_set4_flag: 0  
      constraint_set5_flag: 0  
      reserved_zero_2bits: 0  
...  

Décodage des frames

• Calcul automatique de la plage par GOP (recherche de l’IDR précédent/suivant)
• Recherche automatique des en-têtes SPS/PPS et insertion préalable
• Extraction en BMP via FFmpeg.wasm puis rendu sur Canvas

Extraction des données

• Téléchargement d’une NAL Unit individuelle (Annex B Start Code + rawData)
• Téléchargement par GOP (SPS/PPS + NAL Units de la plage GOP)
• Visualisation des NAL Units sous forme de timeline (couleurs par type, taille proportionnelle)

Limites

• Slice Data non pris en charge : parsing limité jusqu’au Slice Header. La zone slice_data comme les données de macroblocs, MVD ou coefficients de résidu n’est pas analysée
• Format AVC non validé : le code de parsing basé sur la longueur est implémenté, mais n’a pas été testé
• Chargement initial de FFmpeg.wasm : téléchargement d’une bibliothèque d’environ 10 à 20 Mo au premier lancement

Liens

• Démo en direct : https://nalu.funnify.org
• Bibliothèque NPM : https://www.npmjs.com/package/h264-parser