일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- KakaoMap
- uint8array
- uint16array
- react
- node
- http live streaming
- swagger-typescript-api
- Raycasting
- M3U8
- REST API
- Redux
- three.js
- jszip
- html2canvas
- babel
- Flutter
- web track
- Prism.js
- Image Resize typescript
- code editor
- Game js
- Three-fiber
- Excel
- webrtc
- hls.js
- HLS
- Babel standalone
- segment
- userevent_tracker
- typescript
- Today
- Total
Never give up
CCTV with NVR and DVR(Feat. RTSP) 본문
회사에서 진행한 프로젝트 중 CCTV와 연결하는 프로젝트가 있었습니다
맡은 역할은 프론트엔드쪽 WebRTC 연결부분이었지만
전반적인 부분을 이해하고자 간단하게 스터디 한 부분을 남겨볼까 합니다
먼저 NVR과 DVR에 대해 알아보도록 하겠습니다
- NVR(Network Video Recorder) : 카메라에서 디지털 신호로 변환된 영상을 네트워크를 통해 전송 후 저장
- DVR(Digital Video Recorder) : 카메라에서 전송하는 아날로그 영상을 디지털로 변환하여 저장

먼저 공동점은 다음과 같습니다
- CCTV 카메라에서 수집한 영상 저장 및 관리
- 실시간 녹화, 일정 시간 후 자동삭제 지원
- 인터넷 연결을 통한 원격 모니터링
- 사용자 인증, 암호 설정 등 보안 기능
차이점은 다음과 같습니다
- 카메라
NVR : LAN 케이블을 이용한 IP 카메라 사용
DVR : BNC 케이블을 이용한 아날로그 카메라 사용 - 화질 및 성능
NVR : 고해상도 영상 지원(데이터 압축 효율이 높음)
DVR : 아날로그 신호의 한계로 FHD이하 - 인터넷 및 원격 접근
NVR : 네트워크 기반이라 원격 접속이 쉽고, 클라우드 연동이 원할
DVR : 원격 접속이 필요한 경우, 별도의 네트워크 장비 필요
(장비 부분은 개발자가 쓸 때 NVR을 사용하는게 압도적으로 유리할거 같습니다)
다음으로 개발자가 궁극적으로 필요한 부분은
어떻게 CCTV영상을 실시간으로 보여줄 수 있을지 일텐데
일반적으로 제공하는 방식은 2가지입니다
1. MJPEG : Motion JPEG
- 각 영상 프레임을 JPEG 이미지로 압축하여 전송하는 방식
- 단순 카메라 스트리밍이나 저대역폭 환경에서 사용
- 오디오 지원 안함
- 단방향 통신
- 사용 프로토콜 : HTTP(TCP/IP)
- 사용 방식 : http://<IP_ADDRESS>/mjpeg
2. RTSP : Real-Time Streaming Protocol
- 실시간 스트리밍을 위한 프로토콜 사용
- H.264, H.265와 같은 압축 코덱을 사용해 조금 더 나은 품질과 낮은 대역폭 유지 가능
- 오디오 지원함(AAC: Advanced Audio Coding)
- 양방향 통신 지원
- 사용 방식 : rtsp://<IP_ADDRESS>:<PORT>/path
각각 대역폭을 비교해보면 720p, 30fps 기준
- MJPEG : 2~5 Mbps
- RTSP : H264 – 1.5~3 Mbps / H265 – 1~1.5 Mbps / AAC – 64kbps ~ 128 kbps
MJPEG을 사용할때는 별도의 변환 없이 image 태그의 src를 사용하면 됩니다
<img src="http://<IP_ADDRESS>/mjpeg" />
다만 상대적으로 고대역을 필요로 하고, 단방향, 오디오 미지원같은 문제가 있습니다
따라서 음성이 필요하거나, 양방향 통신(영상 + 음성 통화)가 필요한 경우 RTSP를 사용해야됩니다
그런데 HTML에서는 기본적으로 rtsp를 지원하지 않습니다
그래서 변환서버를 사용해야되는데
서버 로드랑, 대역폭 관리, 오디오 사용 가능여부등에 따라 구현방식이 조금 달라집니다
기본적으로 2가지를 권장하는데 FFmpeg을 이용해 RTP 혹은 M3U8로 변환 합니다
RTP는 WebRTC의 프로토콜 부분, M3U8은 HLS를 사용할 때 사용하는 파일 포맷입니다
여기서 저지연이 필요하면 WebRTC, 고지연 저~고화질 지원을 한다면 HLS를 선택하면 되겠습니다
각각 FFmpeg을 이용한 변환 하는 방법은 다음과 같습니다


필자의 프로젝트에서는 관리자와 유저가 CCTV를 이용해서 통화하는 부분이 있어서
WebRTC를 이용해서 진행했습니다
여기서 peer가 bowser나 app이 아닌 영상 변환 서버가 조금 다른 부분이지만
연결방식은 web, app이랑 다르지 않습니다
'WebRTC' 카테고리의 다른 글
WebRTC - 5. Outro (gif, github link) (4) | 2022.10.08 |
---|---|
WebRTC - 4. Flutter WebRTC (2) | 2022.10.08 |
WebRTC - 3. React WebRTC (0) | 2022.10.08 |
WebRTC - 2. Signaling server with node express (0) | 2022.10.08 |
WebRTC - 1. intro (1) | 2022.10.08 |