WebRTC React Signaling

Signaling Server

Signaling

Signaling이란 무엇으로 어떻게 대화할지 합의하는 과정이다. P2P 데이터 전송을 위한 Data channel을 설정하기 위해서는 먼저 신호 교환(signaling)을 통해 피어 간의 연결을 설정해야 한다. WebSocket과 같은 신호 교환 프로토콜을 사용하여 SDP(Session Description Protocol) 메시지를 사용한 음성, 영상, 코덱, IP, 포트 등의 정보를 교환할 수 있다.

WebSocket은 TCP 기반의 프로토콜로, 신뢰성 있는 양방향 통신을 제공하므로, 음성, 영상, 코덱, IP, 포트 등의 정보를 교환하는 데 사용된다.

SDP 메시지와 신호 교환 과정

  1. SDP 메시지 생성:
    피어 간의 연결을 설정하기 위해 각 피어는 자신의 미디어 설정(코덱, IP, 포트 등)을 포함하는 SDP 메시지를 생성한다. SDP메세지는오퍼(Offer)와 응답(Answer) 메시지로 구분된다.
  2. SDP 메시지 교환:
    생성된 SDP 메시지는 WebSocket과 같은 신호 교환 채널을 통해 서로 교환된다. 이 과정에서 ICE 후보 정보(IP와 포트)를 포함하여 네트워크 경로를 설정한다

WebSocket서버는 통화요청 및 Peer간 접속을 위한 정보를 전달하는 역할을 하며, STURN서버는 ICE 규격을 이용하여 상대방이 접속할 수 있게 지원한다. TURN서버는 Peer간 데이터 통신이 불가한 경우 데이터를 중계해 준다.

SDP(Session Description Protocol)

SDP는 피어 간의 미디어 세션 설정에 대한 정보를 담고 있는 프로토콜이다.

SDP 메시지 구조

세션 정보와 네트워크 관련 정보, 미디어의 유형과 스트림의 속성 등의 형식.

 1. v=: Version
 2. o=: Origin
 3. s=: Session Name
 4. i=: Session Information (Optional)
 5. u=: URL (Optional)
 6. e=: Email Address (Optional)
 7. p=: Phone Number (Optional)
 8. c=: Connection Information
 9. b=: Bandwidth Information (Optional)
10. t=: Timing
11. r=: Repeat Times (Optional)
12. z=: Time Zones (Optional)
13. k=: Encryption Keys (Optional)
14. a=: Attributes
15. m=: Media Descriptions

SDP의 구조에 따른 예시

개발자가 직접 작성하거나 읽는 것이 아닌, 라이브러리가 처리하는 양식이다.

v=0
o=- 123456 2 IN IP4 192.0.2.1
s=-
t=0 0
a=group:BUNDLE audio video
a=msid-semantic: WMS
m=audio 49170 RTP/SAVPF 111 103 104
c=IN IP4 192.0.2.1
a=rtcp:49172 IN IP4 192.0.2.1
a=candidate:0 1 UDP 2130706431 192.0.2.1 49170 typ host
a=ice-ufrag:F7gI
a=ice-pwd:x9cml/YzichV2+XlhiMu8g
a=fingerprint:sha-256 34:45:66:78:89:AB:CD:EF:01:23:45:67:89:AB:CD:EF:01:23:45:67:89:AB:CD:EF
a=setup:actpass
a=mid:audio
a=sendrecv
a=rtcp-mux
a=rtpmap:111 opus/48000/2
a=rtpmap:103 ISAC/16000
a=rtpmap:104 ISAC/32000
m=video 51372 RTP/SAVPF 100 116 117
c=IN IP4 192.0.2.1
a=rtcp:51374 IN IP4 192.0.2.1
a=candidate:0 1 UDP 2130706431 192.0.2.1 51372 typ host
a=ice-ufrag:F7gI
a=ice-pwd:x9cml/YzichV2+XlhiMu8g
a=fingerprint:sha-256 34:45:66:78:89:AB:CD:EF:01:23:45:67:89:AB:CD:EF:01:23:45:67:89:AB:CD:EF
a=setup:actpass
a=mid:video
a=sendrecv
a=rtcp-mux
a=rtpmap:100 VP8/90000
a=rtpmap:116 red/90000
a=rtpmap:117 ulpfec/90000

Signaling 동작 순서

발신측(peer A)

먼저, 자신의 접근 정보를 STUN서버에 요청한다. STUN서버로 부터 응답받은 정보(Offer)를 취합하여 통화 요청을 하기 위한 정보를 WebSocket서버를 통해 수신측에 전달한다.

수신측(peer B)

통화 요청을 받은 수신측은 발신측과 마찬가지로 STUN서버에 자신의 접근 정보(Answer)를 취합하여 WebSocket서버를 통해 통화요청을 수락한단 정보를 발신자에게 전달한다.

발신측과 수신측 모두 통화에 필요한 정보들이 공유되어 SRTP 프로토콜을 이용한 통화가 이루어진다.

WebRTC React Signaling