# Show GN: NALU Explorer - H.264 비디오 스트림 NAL Unit 시각화 도구

> Clean Markdown view of GeekNews topic #23736. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=23736](https://news.hada.io/topic?id=23736)
- GeekNews Markdown: [https://news.hada.io/topic/23736.md](https://news.hada.io/topic/23736.md)
- Type: show
- Author: [caromdreamer](https://news.hada.io/@caromdreamer)
- Published: 2025-10-18T10:38:33+09:00
- Updated: 2025-10-18T10:38:33+09:00
- Original source: [nalu.funnify.org](https://nalu.funnify.org)
- Points: 7
- Comments: 0

## Summary

**H.264 비디오 디버깅**과 **NAL Unit 구조 파악**을 위해 개발된 이 도구는 Annex B 포맷 스트림을 브라우저에서 즉시 분석하고, 각 NAL Unit을 트리 구조 및 실제 비디오 프레임과 함께 시각화할 수 있습니다. 자체 개발한 **h264-parser** 엔진을 통해 **SPS, PPS, Slice Header** 등 핵심 파라미터를 H.264 표준 신택스 트리에 맞춰 상세하게 표시하며, **FFmpeg.wasm**을 활용해 선택 구간의 프레임을 실시간으로 디코딩 및 렌더링할 수 있습니다. 각 NAL Unit을 개별 또는 GOP 단위로 추출하거나, 데이터를 **RBSP Hex** 등 원시 포맷으로 점검할 수 있어 비디오 개발자와 리버스 엔지니어링 작업에 실용적인 도구로 주목받고 있습니다.

## Topic Body

#### 개발 배경 및 구현 아이디어  
  
- H.264 비디오 코덱 개발/디버깅 시 NAL Unit 구조를 시각적으로 확인하고 싶었음  
- FFmpeg 커맨드라인으로 분석은 가능하지만, 각 NAL Unit을 클릭하면서 실제 프레임 이미지와 함께 보고 싶었음  
- 브라우저에서 바로 동작하는 Annex B 파서가 필요했고, WebAssembly 기반 FFmpeg을 활용하면 프레임 디코딩도 가능함  
- 자체 `h264-parser` 라이브러리를 개발하여 SPS/PPS/Slice Header까지 파싱 (NPM 패키지로 공개)  
- **H.264 표준 신택스 구조 기반 출력**: ITU-T H.264 스펙의 파싱 신택스 트리를 그대로 따라 계층 구조(indent)로 필드 표시  
  
#### 작동 방식  
  
- **Annex B 파싱**: `00 00 00 01` 또는 `00 00 01` start code 탐지  
- **파라미터 파싱**:  
  - SPS/PPS: 파서로 파라미터 추출  
  - Slice Header: `first_mb_in_slice`, `slice_type`, `pic_parameter_set_id` 등  
  - **표준 신택스 준수**: `nal_unit()` → `seq_parameter_set_rbsp()` → `vui_parameters()` 등 H.264 스펙 구조 그대로 표시  
- **프레임 디코딩**:   
  1. 선택된 NAL Unit이 속한 GOP 범위 계산 (이전/다음 IDR 탐색)  
  2. SPS/PPS 헤더와 함께 Annex B 재구성  
  
#### 주요 기능  
  
##### 파싱  
  
- Annex B Start Code 기반 NAL Unit 분리  
- NAL Unit 타입별 파싱:  
  - **Type 7 (SPS)**: profile, level, resolution, frame rate 등  
  - **Type 8 (PPS)**: entropy coding mode, slice groups 등  
  - **Type 1/5 (Slice)**: slice_type, first_mb_in_slice, frame_num 등  
  - **Type 6 (SEI)**: 메타데이터 (파싱 제한적)  
- **H.264 표준 신택스 트리 출력**: 조건부 파싱(`if` 블록), 계층 구조, 비트스트림 읽기 순서 그대로 표시  
- **RBSP Hex 덤프**: offset, hex bytes, ASCII 포맷으로 raw 데이터 확인 가능  
  
**실제 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  
...  
```  
  
  
##### 프레임 디코딩  
  
- GOP 단위 자동 범위 계산 (이전/다음 IDR 탐색)  
- SPS/PPS 헤더 자동 검색 및 선행 삽입  
- FFmpeg.wasm으로 BMP 추출 후 Canvas 렌더링  
  
##### 데이터 추출  
  
- 개별 NAL Unit 다운로드 (Annex B Start Code + rawData)  
- GOP 단위 다운로드 (SPS/PPS + GOP 범위 NAL Units)  
- 타임라인 형태로 NAL Unit 시각화 (타입별 색상, 크기 비례)  
  
#### 한계  
  
- **Slice Data 미지원**: Slice Header까지만 파싱. 매크로블록 데이터, MVD, 잔차 계수 등 `slice_data` 영역은 분석하지 않음  
- **AVC 포맷 미검증**: Length-based 파싱 코드는 구현되어 있으나 테스트되지 않음  
- **FFmpeg.wasm 초기 로딩**: 첫 실행 시 ~10-20MB 라이브러리 다운로드  
  
#### 링크  
  
- **라이브 데모**: https://nalu.funnify.org  
- **NPM 라이브러리**: https://www.npmjs.com/package/h264-parser

## Comments



_No public comments on this page._