영상 스트리밍 처리과정

스트리밍 구조

사용자가 데이터를 한꺼번에 받지 않고, 순차적으로 실시간에 가깝게 받아보는 시스템의 전체 구성

“스트리밍 구조”는 단순히 영상만이 아니라,"데이터(특히 미디어)가 지속적으로 흐르는 시스템 구조"를 말합니다.

일반 HTTP vs 스트리밍

"스트리밍"은 단순 HTTP처럼 한 번에 요청/응답하는 구조가 아니라,데이터가 계속 흘러가는(지속 전달되는) 구조를 의미해요.

그리고 이 흐름은 "실시간성"과 아주 밀접한 관계를 맺고 있습니다.

항목일반	HTTP	스트리밍
구조	요청 → 응답 → 끝	연결 후 지속적으로 데이터 전송
데이터 흐름	한 번에 받음	조각/이벤트 단위로 나눠서 받음
연결 방식	단발성 (short-lived)	장기 연결 or 연속 요청
예시	게시글 API, 로그인	영상, 채팅, 주식, 실시간 지도 등

 

사용예시

• 영상 스트리밍 (YouTube, CCTV)
• 오디오 스트리밍 (Spotify)
• 실시간 이벤트 (카카오T 기사 위치, 증권 차트, 채팅 등)
• 실시간 센서 데이터 (IoT, 교통량, 군중 밀집도)

항목	영상 스트리밍	오디오 스트리밍	실시간 이벤트	실시간 센서 데이터
사용 목적	영상 실시간/온디맨드 전송	음악/오디오 실시간 or 빠른 버퍼 기반 전송	사용자 간 실시간 상태 공유, 실시간 반응	다수의 기기에서 수집되는 실시간 측정값 처리
전송 방식	HLS, DASH, WebRTC 초저지연용)	HTTP Progressive Download, HLS, 일부는 DASH	WebSocket, SSE, MQTT, gRPC stream	MQTT, Kafka, WebSocket, CoAP
사용 기술	FFmpeg, Nginx, Wowza, MediaLive, CDN	AAC/MP3 압축, FFmpeg, DRM, HTTP Range 요청	Redis Pub/Sub, Kafka, STOMP, Socket.IO	AWS IoT, EMQX, Apache Kafka, InfluxDB
클라이언트	hls.js, video.js, MediaSource API	Web Audio API, <audio> 태그, 전용 앱	JS WebSocket API, React-query + WS 등	JS + WebSocket, 실시간 대시보드, MQTT Client
특징	segment + playlist 구조, 큰 트래픽을 견디기 위한 CDN 필수	전체 음원 중 일부만 가져와 들으며 로딩 → 실시간성이 약간 낮음	"지속 연결" 방식 사용, 텍스트/JSON 단위 전송, 트래픽 낮음	매우 가벼운 메시지 구조, 초저지연 필요, 대규모 동시 전송에 특화

 

영상처리단계 

RTSP → HLS: 구성요소(Dependency) 중심 단계 정리

단계구성	요소	역할 / 설명	비고
1️⃣	RTSP 카메라	실시간 영상 스트림을 제공 (rtsp://...)	소스 (h264 인코딩된 스트림)
2️⃣	FFmpeg	RTSP 스트림 수신 → HLS 포맷(.ts + .m3u8)으로 인코딩	핵심 변환기, 디코딩 후 다시 인코딩 가능
3️⃣	저장소 (디스크)	.ts 세그먼트와 .m3u8 재생목록 저장	FFmpeg 출력 위치
4️⃣	웹 서버 (NGINX / CDN)	클라이언트가 .m3u8과 .ts를 요청할 수 있도록 제공	정적 파일 서빙
5️⃣	프론트엔드 (hls.js)	.m3u8 파싱하고 <video>에 재생	브라우저 측 스트리머

 

FFmpeg (응용 프로그램)

FFmpeg는 거의 모든 영상/음성 포맷을 변환, 처리, 스트리밍할 수 있는 오픈소스 멀티미디어 툴킷.

 

1. 거의 모든 포맷 지원

• ✅ 입력: .mp4, .avi, .mkv, .flv, .mov, .ts, .webm, .gif, .rtsp, .m3u8, ...
• ✅ 출력: 위와 동일 + raw, hls, dash, 이미지 프레임 (.jpg, .png) 등
• ✅ 코덱: H.264, H.265, VP9, AAC, MP3, Opus, ... (디코딩/인코딩 모두)

2. 운영체제 독립적

• 🖥️ Windows, 🐧 Linux, 🍎 macOS 모두 지원

# RTSP → HLS 변환 예제
ffmpeg -i rtsp://192.168.0.10:554/stream1 \
  -c:v libx264 -f hls -hls_time 4 /var/www/html/output.m3u8

 

3. 주요 용도

용도	예시
🎬 포맷 변환	.avi → .mp4, .webm → .gif
📉 해상도 변경	-vf scale=1280:720
🧵 스트리밍 변환	RTSP → HLS, RTMP → DASH
🎙️ 오디오 추출	-vn -acodec copy
🧩 프레임 추출	-r 1 -f image2 img-%03d.jpg
💡 썸네일 생성	-ss 00:00:01 -vframes 1 thumb.jpg

 

HLS (영상 프로토콜)

• HLS는 내부적으로 **HTTP 요청/응답(GET)**을 이용해서 .m3u8 (playlist) 파일과 .ts (video segment) 파일을 순차적으로 다운로드해서 재생합니다.
• HLS 같은 미디어 스트리밍 프로토콜은 "브라우저 자체"가 지원하지 않으면, JavaScript 라이브러리에 의존해야 합니다. 때문에 자신이 원하는 방식의 통신을 위한 프로토콜에 맞추어 설계하여야함

통신 순서

• 1. 클라이언트 → HTTP GET → playlist.m3u8 요청
• 2. 서버 → playlist.m3u8 응답 (.ts 목록이 들어 있음)
• 3. 클라이언트 → HTTP GET → segment1.ts
• 4. 클라이언트 → HTTP GET → segment2.ts