NALU Explorer - Công cụ trực quan hóa NAL Unit của luồng video H.264

Bối cảnh phát triển và ý tưởng triển khai

• Khi phát triển/gỡ lỗi codec video H.264, tôi muốn có thể kiểm tra trực quan cấu trúc NAL Unit
• Có thể phân tích bằng dòng lệnh FFmpeg, nhưng tôi muốn vừa nhấp vào từng NAL Unit vừa xem cùng hình ảnh khung hình thực tế
• Cần một trình phân tích Annex B chạy trực tiếp trên trình duyệt, và có thể tận dụng FFmpeg dựa trên WebAssembly để giải mã khung hình
• Đã tự phát triển thư viện h264-parser để phân tích tới SPS/PPS/Slice Header (được phát hành dưới dạng gói NPM)
• Đầu ra dựa trên cấu trúc cú pháp chuẩn H.264: hiển thị các trường theo cấu trúc phân cấp (indent), bám nguyên cây cú pháp phân tích của đặc tả ITU-T H.264

Cách hoạt động

• Phân tích Annex B: phát hiện start code 00 00 00 01 hoặc 00 00 01
• Phân tích tham số:
  • SPS/PPS: trích xuất tham số bằng parser
  • Slice Header: first_mb_in_slice, slice_type, pic_parameter_set_id v.v.
  • Tuân thủ cú pháp chuẩn: hiển thị nguyên cấu trúc đặc tả H.264 như nal_unit() → seq_parameter_set_rbsp() → vui_parameters()
• Giải mã khung hình:
  1. Tính phạm vi GOP chứa NAL Unit được chọn (tìm IDR trước/sau)
  2. Tái dựng Annex B cùng với header SPS/PPS

Tính năng chính

Phân tích

• Tách NAL Unit dựa trên Annex B Start Code
• Phân tích theo loại NAL Unit:
  • Type 7 (SPS): profile, level, độ phân giải, tốc độ khung hình v.v.
  • Type 8 (PPS): chế độ entropy coding, slice groups v.v.
  • Type 1/5 (Slice): slice_type, first_mb_in_slice, frame_num v.v.
  • Type 6 (SEI): siêu dữ liệu (phân tích còn hạn chế)
• Xuất cây cú pháp chuẩn H.264: hiển thị nguyên thứ tự đọc bitstream, cấu trúc phân cấp và phân tích có điều kiện (if block)
• RBSP Hex dump: có thể kiểm tra dữ liệu thô theo định dạng offset, hex bytes, ASCII

Ví dụ đầu ra phân tích SPS thực tế:

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

Giải mã khung hình

• Tự động tính phạm vi theo đơn vị GOP (tìm IDR trước/sau)
• Tự động tìm header SPS/PPS và chèn vào phía trước
• Trích xuất BMP bằng FFmpeg.wasm rồi render lên Canvas

Trích xuất dữ liệu

• Tải xuống từng NAL Unit riêng lẻ (Annex B Start Code + rawData)
• Tải xuống theo đơn vị GOP (SPS/PPS + các NAL Unit trong phạm vi GOP)
• Trực quan hóa NAL Unit theo dạng timeline (màu theo loại, tỷ lệ theo kích thước)

Giới hạn

• Chưa hỗ trợ Slice Data: chỉ phân tích tới Slice Header. Không phân tích vùng slice_data như dữ liệu macroblock, MVD, hệ số dư v.v.
• Chưa kiểm chứng định dạng AVC: đã triển khai mã phân tích dạng length-based nhưng chưa được kiểm thử
• Tải ban đầu của FFmpeg.wasm: lần chạy đầu cần tải thư viện khoảng ~10-20MB

Liên kết

• Bản demo trực tiếp: https://nalu.funnify.org
• Thư viện NPM: https://www.npmjs.com/package/h264-parser