[실전-준비] WebRTC(Web Real-Time Communication) API

 

 

정의

• 웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 스트림하고, 임의의 데이터를 교환할 수 있도록 하는 기술 
• 서버를 최대한 거치지 않고 P2P(Peer-to-Peer Network)로 브라우저나 단말간에 데이터를 주고받는 기술의 웹 표준\
• Zoom, 구글 Meet, 페이스북 메신저 등에서 사용

 

 

특징 

• 웹에서 사용할 수 있는 유일한 P2P 기술로 각각의 기기가 서버의 도움 없이 연결되기 위해 연결을 도와주는 서버(Signaling)과 P2P 연결이 불가능한 상황을 대비한 릴레이 서버(TURN)가 필요함
• UDP(User Datagram Protocol) 기반의 스트리밍 기술
• WebRTC를 구성하는 일련의 표준들은 플러그인이나 제 3자 소프트웨어 설치 없이 종단 간 데이터 공유와 화상 회의가 가능
• WebRTC는 상호 연관된 API와 프로토콜로 구성되어 함께 작동
• 브라우저마다 다른 코덱 및 기타 미디어 기능에 대한 지원 수준이 다르므로 Google에서 제공하는 Adaptor.js 라이브러리를사용하는 것을 추천 → 크로스 브라우징 이슈 해결을 위해서 사용!
• 구글이 오픈소스로 처음 만들었고, W3C에서 초안을 제시한 기술 스펙으로 플러그인 설치 없이 실시간으로 통신할 수 있도록 설계된 API

 

 

사용법 

두 피어 간의 커넥션은 RTCPeerConnection 인터페이스를 통해 이루어짐 

커넥션이 이루어지고 열리면, 미디어 스트림(MediaStream)과 데이터 채널(DataChannel)이 커넥션에 연결할 수 있음

또한 임의의 바이너리 데이터(이미지, 텍스트, 파일 등)은 RTCDataChannel 인터페이스를 통해 피어들 간에 교환 가능

 

RTCPeerConnection

로컬 컴퓨터와 원격 피어 간의 WebRTC 연결

RTCDataChannel

연결된 두 피어간의 양방향 데이터 채널

 

RTCDataChannelEvent

RTCDataChannel을 RTCPeerConnection에 연결하는 동안 발생하는 이벤트

이 인터페이스와 함께 전송되는 유일한 이벤트는 datachannel

 

RTCSctpTransport

스트림 제어 전송 프로토콜(Stream Control Transmission Protocol)

 

 

P2P 절차

1. 각 브라우저가 P2P 커뮤니케이션에 동의

2. 서로의 주소를 공유

3. 보안 사항 및 방화벽 우회

4. 멀티미디어 데이터 실시간 교환

 

 

 

관련 개념 

시그널링(Signaling)

상대방과의 연결을 위해서는 상대방의 네트워크 정보와 상대방이 보내는 미디어 데이터 정보 등이 필요함

세션 제어 정보 : 통신의 초기화, 종료, 에러
네트워크 정보 : IP, PORT
미디어 정보 : SDP 형식으로 코덱, 해상도, 송수신 여부를 응답 모델(Offer ↔ Answer)을 통해 협상

 

이를 위해 진행하는 것이 시그널링

시그널링 서버를 구축하고 시그널링을 통해 Peer간 네트워크 및 미디어 관련 정보를 교환

 

NAT(Network Address Translation)

기본적으로 각 단말은 하나의 공인 IP를 여러개의 사설 IP로 쪼개 사용하고 있으며 외부와 통신할 때에는 공인 IP로 통신을 진행

NAT를 통해 내부 네트워크에 존재하는 사설 IP와 포트번호를 외부 네트워크와 통신할 때 사용하는 공인 IP 및 포트와 매핑하여 저장해놓음으로써 통신을 가능하게 해줌

 

TURN(Traveral Using Relays around NAT) 

몇몇의 라우터들은 peer들이 오직 이전에 연결한 적 있는 연결들만 허용. 이와 같은 Symmetric NAT 제한을 우회하기 위해 TURN 서버를 사용

 

ICE(Interactive Connectivity Establishment)

상대방과 연결하기 위한 최적을 경로를 알기 위한 과정을 제공하는 프레임워크

 

 

 

 

 

 

 

참고자료 

https://developer.mozilla.org/ko/docs/Web/API/WebRTC_API

https://wormwlrm.github.io/2021/01/24/Introducing-WebRTC.html

https://gh402.tistory.com/38

https://medium.com/@hyun.sang/webrtc-webrtc%EB%9E%80-43df68cbe511