[SSAFYcial] WebRTC를 알아보자!

라니·2024년 1월 30일

SSAFY SSAFYcial WEBRTC 공통프로젝트 싸피

WebRTC란?

Signaling

ICE (Interactive Connectivity Establishment)

STUN (Session Traversal Utilities for NAT)

TURN (Traversal Using Relays around NAT)

WebRTC APIs

✅ 요약

📋 References

SSAFYcial

목록 보기

11/16

안녕하세요! 어느덧 공통프로젝트도 4주차에 접어들고 있습니다🫢

싸피의 2학기 첫번째 프로젝트인 공통 프로젝트에서 저는 <웹 기술> 트랙을 선택해서 WebRTC를 적용한 협동 배틀 퍼즐게임🧩을 개발하고 있는데요!
그래서 오늘은 이번 프로젝트의 핵심 기술인 WebRTC가 무엇인지 알아가보는 시간을 갖도록 하겠습니다.😎

WebRTC란?

WebRTC(Web Real-Time Communication)은 서버를 최대한 거치지 않고 P2P(Peer-to-Peer Network)로 브라우저나 단말 간에 데이터를 주고받는 기술의 웹 표준입니다. WebRTC를 구성하는 일련의 표준들은 플러그인이나 제 3자 소프트웨어 설치 없이 종단 간 데이터 공유를 가능하게 합니다.

WebRTC는 각각의 기기가 서버의 도움 없이 연결되기 위해 연결을 도와주는 Signaling 서버가 필요하고
P2P 연결이 불가능한 상황을 대비한 TURN 서버가 필요합니다.

Signaling

RTCPeerConnection 통신에 사용할 프로토콜, 채널, 미디어 코덱 및 형식, 데이터 전송 방법, 라우팅 정보와 NAT 통과 방법을 포함한 통신 규격을 교환하기 위해 두 장치의 제어 정보를 교환하는 과정

쉽게 말해 클라이언트간 실시간 미디어를 주고받기 위해 사전작업을 하는 것 입니다.

ICE (Interactive Connectivity Establishment)

브라우저가 peer를 통한 연결이 가능하도록 하게 해주는 프레임워크

Peer A에서 Peer B까지 단순하게 연결하는 것으로는 작동하지 않는 것에 대한 이유는 많이 있습니다. 연결을 시도하는 방화벽을 통과해야하기도 하고, 단말에 퍼블릭 IP가 없다면 유일한 주소값을 할당해야할 필요도 있으며 라우터가 peer간의 직접연결을 허용하지 않을 때에는 데이터를 릴레이해야할 경우도 있습니다.

ICE는 이러한 작업을 수행하기 위해 STUN과 TURN 서버 둘다 혹은 하나의 서버를 사용합니다.

STUN (Session Traversal Utilities for NAT)

자신의 공개 주소(public address)를 발견하거나 peer간의 직접 연결을 막는 등의 라우터의 제한을 결정하는 프로토콜

WebRTC 연결 시작 전 STUN 서버 향해 요청을 보내면, STUN서버는 NAT 뒤에 있는 Peer들이 서로 연결할 수 있도록 공인 IP와 포트를 찾아줍니다.

두 단말이 같은 NAT 환경에 있지 않을 경우, 또는 NAT 보안정책이 엄격하다는 등의 이유에 따라 STUN이 완벽한 해결책이 되지는 않을 수 있습니다.

TURN (Traversal Using Relays around NAT)

TURN 서버와 연결하고 모든 정보를 그 서버에 전달하는 것으로 Symmetric NAT(연결된 적 있는 서버만 연결 허용) 제한 혹은 방화벽 문제를 우회하는 것

네트워크 미디어를 중개하는 서버를 이용하는 방법이므로 P2P가 아니라 명백히 overhead가 발생합니다. 이는 다른 대안이 없을 경우에만 사용하는 최후의 수단입니다.

WebRTC APIs

getUserMedia
: 브라우저가 카메라 및 마이크의 output capture로 음성 및 비디오 스트리밍 할 수 있음
RTCPeerConnection
: local 컴퓨터와 remote peer 간의 WebRTC 연결을 나타냄. 두 peer 간의 효율적인 데이터 스트리밍을 처리하는데 사용됨
RTCDataChannel
: 연결된 두 peer간의 양방향 data channel을 나타냄

더 많은 WebRTC 관련 API들은
https://developer.mozilla.org/ko/docs/Web/API/WebRTC_API
여기 mozilla 문서에서 확인할 수 있습니다!

✅ 요약

실시간 소통을 시작할 때 나(peer1)와 peer2는 서로의 브라우저 정보를 얻기 위해 NAT firewall을 우회해 STUN, TURN 서버가 필요
Offer에 ICE candidates를 넣어 SDP를 통해 peer2에게 전송
peer2에게 ICE candidates와 함께 response(Answer)받음
두 브라우저가 negotiate & create a channel(secure, encrypted)
실시간 통신을 통해 비디오, 오디오, 텍스트 등의 데이터 공유