Programming/FULL STACK

[WebRTC] 기본적인 개념과 코드 설명

RosyPark 2020. 8. 19. 18:37

1. WebRTC? 

- 웹 브라우저 간에 플러그인 도움 없이 서로 통신할 수 있도록 설계된 API 

- WebRTC는 P2P 연결을 통해 직접 통신하지만 이를 중계해주는 과정 필요, 많은 양의 통신을 가지는 WebRTC 앱들은 심각한 부하를 다룰 수 있기 때문에 Signaling 서버가 필요함 => 각 디바이스들을 상호간에 동의된 서버(socket.io 혹은 websocket을 이용한 서버)에 연결

- 또한 WebRTC는 시그널링에 대한 부분을 지원하지 않기 때문에 서버에 대해 직접 구현이 필요 이때 Nodejs의 Socket.IO 패키지를 이용하기.

 

 

 

2. signaling 

- 시그널링 서버는 시그널링 데이터를 몰라도 된다

- 시그널링 데이터 = SDP 

- SDP를 교환 한 후 두 Peer들은 ICE candidate를 교환함 

- ICE candidate는 발신 피어 입장에서 통신을 할 수 있는 방법 설명 , 이때 ICE message는 두개의 컴퓨터를 서로 연결하기 위한 정보에다가 프로토콜( TCP or UDP), IP 주소, port number, connection type 제안, NAT도 제안 

 

* SDP(Session Desctiption Potocol)

- 멀티미디어 세션 파라미터를 협상하는 프로토콜

- 미디어에 대한 메타 데이터로 (1) 사용할 수 있는 코덱 (2) 어떤 프로토콜을 사용하느나 (3) 비트레이트는 뭔가 (4) 밴드 위드스는 얼마인가? => 즉 서로간의 네트워크 정보를 공유하는 것 

 

 

https://www.html5rocks.com/ko/tutorials/webrtc/infrastructure/

메시지 분석

1) v=0

SDP 프로토콜의 버전, SDP의 경우 0 

2) v=0


3) o=- 7614219274584779017 2 IN IP4 127.0.0.1

- SDP를 생성한 Owner/Creator

- Username, Session-ID, Session Version, Network Type, Address Type, Unicast Address 


4) s=-

- Session Name


5) t=0 0

- Timing : start-time, stop-time


6) a=group:BUNDLE audio video


7) a=msid-semantic: WMS


8) m=audio 1 RTP/SAVPF 111 103 104 0 8 107 106 105 13 126


9) c=IN IP4 0.0.0.0


10) a=rtcp:1 IN IP4 0.0.0.0


11) a=ice-ufrag:W2TGCZw2NZHuwlnf


12) a=ice-pwd:xdQEccP40E+P0L5qTyzDgfmW


13) a=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-level


14) a=mid:audio


15) a=rtcp-mux


16) a=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:9c1AHz27dZ9xPI91YNfSlI67/EMkjHHIHORiClQe


17) a=rtpmap:111 opus/48000/2

 

 

 

<정보 통신 교환 순서>

1. SDP 정보(=서로간의 네트워크 정보) 를 교환한다

2. ICE CANDIDATE 시행 --> 이떄 TURN서버와 STUN 서버를 교환

3. 서로 가능한 STUN서버와 TURN 서버 정보를 교환하고 두 Peer가 사용해 통신할 최적의 후보자를 찾아야 함 

 

4. STUN, TURN

 

 

STUN(Session Traversal Utilities for NAT)
- IETF RFC 5389에 정의된 네트워크 프로토콜/패킷 포맷, 네트워크 환경을 찾는 것

- 대부분 STUN을 이용하여 연결 성공적으로 함

- STUN 서버는 공용 인터넷 망에 위치, 라우터의 NAT뒤에 있는 peer가 공인 ip 주소를 요청할 때, 해당 주소를 확인하고 접근 가능한 ip port 정보를 알려주는 역할

 

 

 

 

TURN(Traversal Using Relays around NAT)

- Peer들간의 미디어 스트리밍을 릴레이하기 위해 사용함

- 서로 공용주소 가짐 

 

 

 

 

NAT(Network Address Translation) 

-  외부 네트웍에 알려진 것과 다른 IP 주소를 사용하는 내부 네트웍에서, IP 주소를 변환하는 것 
- 일반적으로, 한 회사는 자신의 내부 네트웍 주소를 하나 또는 그 이상의 공인 IP 주소로 사상 
- 들어오는 패킷들 상의 공인 IP 주소를 다시 사설 IP 주소로 변환 
--> 나가거나 들어오는 각 요구들은 주소 변환과정을 반드시 거쳐야 하기 때문에, 보안문제를 확실하게 하는데 도움 
- 주소 변환기능은 라우터나 방화벽에 설치됨

- 종류 2가지 Static NAT, Dynamic NAT 

 

 

 

 

 

4. STUN 서버와 TURN 서버 차이 

- STUN 서버 --> 외부 네트워크 주소를 얻는데 사용

- TURN 서버 --> P2P 연결이 실패할 경우 트래픽을 중계하는데 사용 

 

 

 

 

 

 

 

<출처> 

1. forest71 님 블로그 

forest71.tistory.com/211

 

1. 화상 채팅 예제로 익히는 WebRTC - 기본 예제

WebRTC는 구글에서 공유한 웹 기반 커뮤니케이션 라이브러리로, 별도의 설치 없이 웹 브라우저에서 화상채팅을 할 수 있는 기능을 제공한다. WebRTC는 화상채팅, 음성채팅 등을 쉽게 제작할 수 있도

forest71.tistory.com

2. http://www.terms.co.kr/NAT.htm

3. https://ko.wikipedia.org/wiki/%EC%84%B8%EC%85%98_%EA%B8%B0%EC%88%A0_%ED%94%84%EB%A1%9C%ED%86%A0%EC%BD%9C#cite_note-1

4. https://brunch.co.kr/@linecard/141