NALU Explorer - H.264 video akışı NAL Unit görselleştirme aracı

Geliştirme arka planı ve uygulama fikri

• H.264 video kodeği geliştirme/debug sürecinde NAL Unit yapısını görsel olarak incelemek istedim
• FFmpeg komut satırıyla analiz mümkün olsa da, her bir NAL Unit'e tıklayarak gerçek kare görüntüsüyle birlikte görmek istedim
• Tarayıcıda doğrudan çalışan bir Annex B ayrıştırıcısına ihtiyaç vardı ve WebAssembly tabanlı FFmpeg kullanılırsa kare çözme de mümkün
• Kendi h264-parser kütüphanemi geliştirerek SPS/PPS/Slice Header'a kadar ayrıştırma yaptım (NPM paketi olarak yayımlandı)
• H.264 standart sözdizimi yapısı tabanlı çıktı: ITU-T H.264 spesifikasyonundaki ayrıştırma sözdizimi ağacını aynen izleyerek alanları hiyerarşik yapı (girinti) ile gösterir

Çalışma şekli

• Annex B ayrıştırma: 00 00 00 01 veya 00 00 01 start code tespiti
• Parametre ayrıştırma:
  • SPS/PPS: ayrıştırıcı ile parametre çıkarımı
  • Slice Header: first_mb_in_slice, slice_type, pic_parameter_set_id vb.
  • Standart sözdizimine uyum: nal_unit() → seq_parameter_set_rbsp() → vui_parameters() gibi H.264 spesifikasyon yapısını olduğu gibi gösterir
• Kare çözme:
  1. Seçilen NAL Unit'in ait olduğu GOP aralığını hesaplama (önceki/sonraki IDR arama)
  2. SPS/PPS başlıklarıyla birlikte Annex B'yi yeniden oluşturma

Başlıca özellikler

Ayrıştırma

• Annex B Start Code tabanlı NAL Unit ayırma
• NAL Unit türüne göre ayrıştırma:
  • Type 7 (SPS): profile, level, çözünürlük, frame rate vb.
  • Type 8 (PPS): entropy coding mode, slice groups vb.
  • Type 1/5 (Slice): slice_type, first_mb_in_slice, frame_num vb.
  • Type 6 (SEI): metadata (ayrıştırma sınırlı)
• H.264 standart sözdizimi ağacı çıktısı: koşullu ayrıştırma (if blokları), hiyerarşik yapı ve bitstream okuma sırasını olduğu gibi gösterir
• RBSP Hex dump: raw veriyi offset, hex bytes ve ASCII formatında inceleme imkânı

Gerçek SPS ayrıştırma çıktısı örneği:

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

Kare çözme

• GOP bazında otomatik aralık hesaplama (önceki/sonraki IDR arama)
• SPS/PPS başlıklarını otomatik bulup öne ekleme
• FFmpeg.wasm ile BMP çıkarımı sonrası Canvas render

Veri çıkarımı

• Tekil NAL Unit indirme (Annex B Start Code + rawData)
• GOP bazında indirme (SPS/PPS + GOP aralığındaki NAL Unit'ler)
• Zaman çizelgesi biçiminde NAL Unit görselleştirme (türe göre renk, boyuta orantılı)

Sınırlamalar

• Slice Data desteği yok: Yalnızca Slice Header'a kadar ayrıştırır. Makroblok verisi, MVD, residual coefficients gibi slice_data alanını analiz etmez
• AVC formatı doğrulanmadı: Length-based ayrıştırma kodu uygulanmış olsa da test edilmedi
• FFmpeg.wasm ilk yükleme: İlk çalıştırmada ~10-20MB kütüphane indirilir

Bağlantılar

• Canlı demo: https://nalu.funnify.org
• NPM kütüphanesi: https://www.npmjs.com/package/h264-parser