NALU Explorer - Alat visualisasi NAL Unit untuk stream video H.264

Latar belakang pengembangan dan ide implementasi

• Saat mengembangkan/debug codec video H.264, ada kebutuhan untuk memeriksa struktur NAL Unit secara visual
• Analisis memang bisa dilakukan lewat command line FFmpeg, tetapi saya ingin melihatnya sambil mengklik tiap NAL Unit bersama gambar frame yang sebenarnya
• Dibutuhkan parser Annex B yang berjalan langsung di browser, dan dengan memanfaatkan FFmpeg berbasis WebAssembly, decoding frame juga dimungkinkan
• Mengembangkan library h264-parser sendiri untuk mem-parsing hingga SPS/PPS/Slice Header (dirilis sebagai paket NPM)
• Output berbasis struktur sintaks standar H.264: menampilkan field dalam struktur hierarkis (indent) dengan mengikuti langsung pohon sintaks parsing pada spesifikasi ITU-T H.264

Cara kerja

• Parsing Annex B: mendeteksi start code 00 00 00 01 atau 00 00 01
• Parsing parameter:
  • SPS/PPS: mengekstrak parameter dengan parser
  • Slice Header: first_mb_in_slice, slice_type, pic_parameter_set_id, dll.
  • Sesuai sintaks standar: menampilkan struktur spesifikasi H.264 apa adanya seperti nal_unit() → seq_parameter_set_rbsp() → vui_parameters()
• Decoding frame:
  1. Menghitung rentang GOP tempat NAL Unit yang dipilih berada (mencari IDR sebelumnya/berikutnya)
  2. Menyusun ulang Annex B bersama header SPS/PPS

Fitur utama

Parsing

• Pemisahan NAL Unit berbasis Annex B Start Code
• Parsing per tipe NAL Unit:
  • Type 7 (SPS): profile, level, resolution, frame rate, dll.
  • Type 8 (PPS): entropy coding mode, slice groups, dll.
  • Type 1/5 (Slice): slice_type, first_mb_in_slice, frame_num, dll.
  • Type 6 (SEI): metadata (parsing terbatas)
• Output pohon sintaks standar H.264: menampilkan parsing kondisional (blok if), struktur hierarkis, dan urutan pembacaan bitstream apa adanya
• RBSP Hex dump: data mentah dapat diperiksa dalam format offset, hex bytes, dan ASCII

Contoh output parsing SPS nyata:

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

Decoding frame

• Perhitungan rentang otomatis per GOP (mencari IDR sebelumnya/berikutnya)
• Pencarian otomatis header SPS/PPS dan penyisipan di awal
• Ekstraksi BMP dengan FFmpeg.wasm lalu dirender ke Canvas

Ekstraksi data

• Unduh NAL Unit individual (Annex B Start Code + rawData)
• Unduh per GOP (SPS/PPS + NAL Units dalam rentang GOP)
• Visualisasi NAL Unit dalam bentuk timeline (warna per tipe, proporsional terhadap ukuran)

Keterbatasan

• Slice Data belum didukung: hanya parsing sampai Slice Header. Area slice_data seperti data macroblock, MVD, koefisien residual, dll. tidak dianalisis
• Format AVC belum tervalidasi: kode parsing berbasis length sudah diimplementasikan, tetapi belum diuji
• Pemuatan awal FFmpeg.wasm: saat pertama dijalankan perlu mengunduh library ~10-20MB

Tautan

• Demo langsung: https://nalu.funnify.org
• Library NPM: https://www.npmjs.com/package/h264-parser