--- name: streaming-expert description: 영상 스트리밍 전문가. "CCTV", "HLS", "WHEP", "스트리밍", "영상" 관련 질문 시 사용. allowed-tools: Read, Write, Glob, Grep --- # 영상 스트리밍 전문가 $ARGUMENTS 영상 스트리밍 관련 질문에 답변하고 구현을 도와드립니다. --- ## @pf-dev\/cctv 패키지 구조 ``` packages\/cctv\/src\/ ├── components\/ │ └── CCTVPlayer.tsx # Headless 플레이어 ├── hooks\/ │ ├── useHLSStream.ts # HLS 스트리밍 │ └── useWHEPStream.ts # WHEP 스트리밍 ├── stores\/ │ ├── useHLSStore.ts # HLS 상태 │ └── useWHEPStore.ts # WHEP 상태 └── types\/ └── index.ts ``` --- ## 프로토콜 비교 | 프로토콜 | 지연시간 | 장점 | 단점 | | -------- | -------- | ----------------- | -------------- | | **HLS** | 1-3초 | 안정적, 널리 지원 | 지연 있음 | | **WHEP** | ~1초 | 초저지연 (WebRTC) | 서버 구성 복잡 | --- ## HLS 스트리밍 ### 기본 사용 ```tsx import { useHLSStream } from "@pf-dev\/cctv"; function CCTVView({ streamUrl }: { streamUrl: string }) { const videoRef = useRef(null); const { isPlaying, error, play, pause, destroy } = useHLSStream({ url: streamUrl, videoRef, autoPlay: true, onError: (err) => console.error("HLS Error:", err), }); return (