Web RTC란?

이번에 인턴을 하게 되면서 라즈베리 파이에서 촬영되고 있는 동영상을 실시간으로 송출하는 앱을 만들어 달라는 과제를 받게 되었다. 

현재의 문제점 

- ⭐️ 영상 딜레이가 심하다 ⭐️

- 영상 화질이 별로다 

와 같은 문제점들이 있었다. 그래서 이 부분들을 해결하는 것이 나의 과제였고 영상 화질이 별로인 것은 촬영 영상은 괜찮으나 crop이 잘못되고 있어서 앱 구현할 때 해상도를 조정하면 될 것 같다고 생각이 들어서 수월하게 해결할 것 같았는데 가장 중요한 문제는 영상 딜레이가 심하다는 것 이었다. 그래서 이걸 어떻게 구현할 수 있다고 고민을 해보다가 펫캠 어플을 오마주해서 개발하면 괜찮지 않을까? 라는 생각이 들었고 조사해본 결과 Web RTC라는 기술이 있다는 것을 알게 되었다 

Web RTC란? 

웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 포착하고 마음대로 스트림 할 뿐 아니라 임의의 데이터도 교환할 수 있도록 하는 기술을 의미한다. 

쉽게 이야기 하자면 화상 통화와 실시간 스트리밍, 파일 공유, 스크린 공유 등이 WebRTC를 기반한다. 

핵심 구성 요소

⚪️ mainstream

: 사용자의 카메라와 마이크에서 가져오는 영상 및 음성 스트림

navigator.mediaDevices.getUserMedia({ video: true, audio: true })

⚪️ RTCPeerConnection

: 브라우저 간의 실시간 미디어 스트림을 송수신할 수 있도록 해주는 객체

• ICE(Interactive Connectivity Establishment) 후보 수집
• SDP(Session Description Protocol) 교환
• STUN/TURN 서버를 통해 NAT를 넘어서 P2P 연결 시도

const peer = new RTCPeerConnection();
peer.addTrack(videoTrack, stream);

+) RTCDataChannel도 있는데 데이터를 보낼일은 없는 프로젝트라 패스한다. 

장&단점

장점 

⚪️ Latency(지연)가 짧음
⚪️ 별 다른 소프트웨어 없이 실시간 커뮤니케이션 가능
⚪️ 무료 + 개발하는데 접근성 낮음 👍 (접근성 낮은 것 아닌 것 같다.. 혼자 서버 프론트 다해야 할 것 같다...)

단점

🔴 크로스 브라우징 문제 : 웬만한건 다 해결이 되었지만 IE와 같은 최신 버전이 아니면 사용이 불가능(react-native로 구현할거라 큰 문제는 안될 것 같음)
>> adapter.js가 있어야 브라우저 호환성을 제공할 수 있음

🔴 STUN / TURN 서버 필요

: peer to peer통신을 위해서는 사용자의 IP 주소를 알아야함 (peer to peer이 아니라 일방향으로 영상을 받고 회사 ip를 통해서만 접속할거라  괜찮을 듯)

단점이 상쇄될 듯한 프로젝트라서 Web RTC를 이용해보기로 결정했다. 

주요 개념

NAT(Network Adress Translation)

: 집이나 회사와 같은 LAN 내부 장치는 Private IP를 사용하지만 인터넷에서는 Public IP가 필요해서 NAT 장치는 Private ↔ Public IP 변환을 수행하며 트래픽 포트 맵핑

단점
: P2P 연결 시 공인 IP가 불안정하게 변할 수 있어 직접 연결이 어려움

ICE(Interactive Connectivity Establishment)

: Peer 간 가장 적합한 연결 경로를 자동으로 찾아주는 프레임워크
>> NAT가 통신을 위해 필요한 모든 포트를 열어두고 두 엔드 포인트 모두 연결이 가능한 IP주소, 포트에 대한 정보를 ICE가 가진다. 

STUN(Session Traversal Utilities for NAT)

: Peer가 자신의 공인 IP와 포트를 알아내는 데 사용됨 >> STUN 서버에 요청하면 응답을 통해 IP/포트를 알려줌

단점
:  동일 유형의 NAT 간에는 작동이 안 될 수 있음

TURN(Traversal Using Relays around NAT)

: STUN만으로는 해결되지 않는 경우*에는 중계 서버를 통해 트래픽을 전달
* 예시) symmetric NAT나 폐쇄적인 방화벽 환경

시그널링

: WebRTC는 브라우저 간에 직접 연결을 맺기 위해 서로의 연결 정보를 교환하는 과정 필요

필요한 정보

• SDP (Session Description Protocol) : 내가 지원하는 코덱, 미디어 형식, IP 주소, 포트 등 연결 정보
• ICE Candidate : P2P 연결을 위해 사용할 수 있는 네트워크 후보 정보

결론

NAT: 내부 IP와 공인 IP 간 변환 장치
STUN: 내 공인 IP/포트를 알아내는 서버
ICE: 최적의 P2P 연결 경로를 찾는 전략
TURN: 연결 안 될 때 중계해 주는 서버 (비용·부담 있음)

이렇게 정리할 수 있고 앞으로 이걸 구현해야 하는데 react-native는 그렇다치고 server 파트는 어떻게 해야할지 그 부분이 더 걱정 인 것 같다 😫😭