WebRTC 기본 흐름 요약

 # **주어**

[🖥️] **서버** = Raspberry Pi 또는 GStreamer 실행 장비

[🌐] **브라우저** = video.html 실행 중인 웹 클라이언트

[🔗] **시그널링 서버** = WebSocket 통신 중개자 (ex. `video.js`)

---

### ➡️ 시그널링 중심 1~6

(1) [🌐] 브라우저가 [🔗] 시그널링 서버에 **WebSocket 연결**을 요청함.

[🔗] 시그널링 서버는 **Offer, Answer, ICE 후보 정보를 주고받기 위한 중계 경로**를 준비함.

(2) [🌐] 브라우저가 **RTCPeerConnection 객체**를 생성함.

이 객체는 향후 WebRTC 연결 전반을 관리할 주체가 됨.

(3) [🌐] 브라우저가 **비디오 트랙 또는 데이터 채널**을 RTCPeerConnection에 추가함.

어떤 콘텐츠를 주고받을지 미리 정의하는 단계임.

(4) [🌐] 브라우저가 **Offer 객체**를 생성함.

사용할 코덱, 미디어 트랙 등의 연결 제안 정보가 포함됨.

(5) [🌐] 브라우저가 **생성한 Offer**를 **자기 자신(LocalDescription)**에 적용함.

이 과정을 setLocalDescription이라고 부름.

(6) [🌐] 브라우저가 **Offer**를 **시그널링 채널(WebSocket)**을 통해 상대방에게 전송함.

상대방이 이 Offer를 받고 연결 절차를 이어가게 됨.

---

### ➡️ WebRTC 중심 7~13

(7) [🖥️] 서버가 [🔗] 시그널링 서버로부터 **Offer**를 수신하고, **RTCPeerConnection 객체**를 생성함.

WebRTC 연결에 응답할 준비를 함.

(8) [🖥️] 서버가 **비디오 트랙(GStreamer 출력)**을 **RTCPeerConnection에 추가**함.

[🌐] 브라우저에게 전송할 미디어 스트림을 설정함.

(9) [🖥️] 서버가 **Answer 객체**를 생성하고, **자기 자신(LocalDescription)**에 적용함.

이후 Answer를 [🔗] 시그널링 서버를 통해 [🌐] 브라우저에게 전송함.

(10) [🌐] 브라우저가 [🔗] 시그널링 서버로부터 **Answer**를 수신하고, **RemoteDescription**에 적용함.

[🖥️] 서버의 연결 조건을 수락함.

(11) [🌐] 브라우저와 [🖥️] 서버가 각각 **ICE 후보(Candidate)**를 생성함.

서로 연결 가능한 네트워크 주소 목록을 준비함.

(12) [🌐] 브라우저와 [🖥️] 서버가 생성한 **ICE 후보 정보**를 [🔗] 시그널링 서버를 통해 **서로 교환**함.

(13) [🖥️] 서버가 **비디오 스트림**을 [🌐] 브라우저에게 전송함.

[🌐] 브라우저는 `<video>` 요소를 통해 **실시간 영상**을 수신하고 재생함.

# 다이어그램

[🌐 브라우저]

│

│ (1) WebSocket 연결 요청

│     • Offer, Answer, ICE 정보 중계 준비

│

│ (2) RTCPeerConnection 객체 생성

│ (3) 비디오 트랙/데이터 채널 추가

│ (4) Offer 생성

│ (5) Offer를 LocalDescription에 적용

│ (6) Offer 전송 → [🔗 시그널링 서버]

│

▼

[🔗 시그널링 서버]

│

│ (Offer, Answer, ICE 후보 정보 중계)

│

▼

[🖥️ 서버]

│

│ (7) Offer 수신 후 RTCPeerConnection 객체 생성

│ (8) 비디오 트랙(GStreamer 출력) 추가

│ (9) Answer 생성 후 LocalDescription에 적용

│     → Answer 전송 → [🔗 시그널링 서버]

│

▼

[🔗 시그널링 서버]

│

│ (Answer와 ICE 후보 정보 중계)

│

▼

[🌐 브라우저]

│

│ (10) Answer 수신 후 RemoteDescription 적용

│ (11) ICE 후보 생성 및 교환

│ (12) ICE 연결 수립 완료

│

▼

[🖥️ 서버] ──────→ [🌐 브라우저]

(13) 비디오 스트림 전송

• 브라우저는 <video> 요소로 실시간 영상 수신 및 재생

# **핵심 요약**

- *[🌐 브라우저]**는 먼저 시그널링 서버에 연결해 Offer를 생성 및 전송하고, Answer와 ICE 후보를 받아 연결을 완성함.

- *[🖥️ 서버]**는 Offer를 수신해 RTCPeerConnection을 구성하고, 비디오 트랙(예: GStreamer 출력)을 추가한 후 Answer를 생성해 응답함.

- *[🔗 시그널링 서버]**는 단순히 Offer, Answer, ICE 후보 정보를 중계하는 역할을 함.

- 최종적으로 서버는 브라우저로 비디오 스트림을 전송하고, 브라우저는 이를 실시간으로 재생함.