WebRTC가 무엇일까? (용어, 샘플, openvidu)

정의

Web Real-Time Communication 📡

우리가 잘 알고있는 화상 통화, 화상 공유를 구현할 수 있는 오픈소스

비디오, 음성, 일반 데이터가 실시간으로 P2P방식으로 전송

JavaScript API로 제공

 

---

 

관련 용어

1. data streams 

말그대로 데이터들의 흐름

데이터의 양이 한정되어 있지 않고 끊임없이 생성되고 변하는 데이터의 흐름

 

2. Signaling

세션 제어 메세지, 네트워크 구성, 미디어 기능 등의 정보를 교환하는 과정

• 세션 제어 메세지: 통신을 초기화하거나 종료, 오류 보고
• 네트워크 구성: 컴퓨터의 IP주소와 포트가 무엇인지 파악
• 미디어 기능: 브라우저에서 처리할 수 있는 코덱과 해상도

P2P 통신이 일어나기 전 Signaling이 완료 되어야 한다!

 

3. ICE (Interactive Connectivity Establishment)

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

방화벽 (STUN으로 해결)

단말에 Public IP가 없다면 유일한 주소값을 할당해야 한다. (STUN으로 해결)

라우터가 peer간의 직접 연결을 허용하지 않을 때에 데이터를 relay(중계) 해야 하는 경우 (TURN으로 해결)

ICE는 위의 작업들을 수행하기 위해 STUN 또는 TURN 서버를 사용한다.

 

4. NAT (Network Address Transilation)

네트워크 주소 변환

단말에 Public IP 주소를 할당하기 위해 사용한다.

각 기기에도 자신만의 이름이 있다.

자신만의 이름을 Private IP라고 하자.

IP는 고정 IP, 유동 IP로 나뉘고 고유의 값일 수도 아닐 수도 있다.

따라서 다른 네트워크에서는 통용되지 않는다.

이 기기가 사설 바깥 쪽에 있는 네트워크에 접속해서 데이터를 주고 받기 위해서는 Public IP가 필요하다.

192.168.100.3:3855(Private Address)에 대해서 NAT는 외부에 142.12.131.7:6282(Public Address)로 매핑해서 전달한다.

NAT 방식은 여러가지가 있다. (Full Cone → Restricted Cone → Port Restricted Cone → Symmetric로 갈수록 보안↑)

Public IP는 요청을 보낼때마다 NAT에 의해 바뀌기 때문에 동일한 Public IP로 통신할 수 없는 문제점이 발생한다.

👉 STUN, TURN 서버를 사용!

 

5. STUN (Session Traversal Utilities for NAT) 서버

내 Public 주소를 알려주는 서버

peer간의 직접 연결을 막기 위해 현재 peer가 접근 가능한지 여부를 알려준다.

필요한 이유?

친구와 내가 쓰고 있는 Wifi가 다르다면 같은 방에 들어와 있어도 stream을 받을 수 없다.

Public 주소를 알아야 다른 네크워크에 있는 장치들이 서로를 찾을 수 있다.

이 때 해결 할 수 있는 것이 STUN 서버!

1. 클라이언트는 인터넷을 통해 자신의 Public 주소(IP와 PORT)를 요청 

2. STUN 서버는 클라이언트 Public 주소와 NAT, 방화벽 유형을 알려준다.

3. 클라이언트가 나 접근 가능? 불가능? 에 대한 답변을 STUN 서버로부터 받는다.

STUN은 연결 가능에 대한 정보만 제공해줄 뿐, 연결이 불가능 할 때 STUN이 해줄 수 있는 것은 없다. 👉 이 때 TURN 이용

대부분의 WebRTC는 STUN을 이용한 연결로도 성공적으로 수행한다.

 

6. TURN (Traversal Using Relays around NAT) 서버

NAT 보안 정책이 너무 엄격해 NAT을 우회하기 위해 쓴다.

peer들은 TURN 서버를 사용하여 서로 통신한다. 

TURN 서버는 공용 주소를 가지고 있으며 미디어를 relay(중계)한다.

따라서 리소스 낭비가 심해 오버헤드가 발생하므로 최후의 수단으로 사용해야 한다.

 

7. SDP (Session Description Protocol)

해상도, 형식, 코덱, 암호화 등 멀티미디어 컨텐츠의 연결을 설명하기 위한 표준

기기 간의 미디어를 공유하기 위한 설명을 위해 사용

 

---

 

WebRTC 샘플 API

WebRTC APIs

1. 미디어 장치에 액세스

getUserMedia()

• 기기(카메라 or 마이크)에 접근한다.
• alert로 기기 허용/거부 Permission이 뜬다.
• drawImage()를 통해 이미지를 캡처할 수도 있다.
• 이미지에 filter를 씌울 수도 있다.
• 오디오만 단독으로 사용할 수도 있고, 비디오 녹화 기능도 있다.

2. peer 연결 제어

RTCPeerConnection()

• 두 peer 간의 안정적이고 효율적인 통신을 관리한다.
• Chrome, Opera, Firefox에서 지원

3. peer에게 데이터 보내기

RTCDataChannel()

• text, file, data를 전송할 수 있다.

 

---

 

Kurento

WebRTC 미디어 서버

WebRTC 연결을 설정하기 위한 Signalling Server

 

그렇다면 미디어 서버가 무엇인가?

대규모 서비스에서 1:N 스트리밍을 하는데 P2P 방식을 사용해서 개발하기엔 무리가 있다.

가령, peer가 10만명이라면 스트리머의 클라이언트는 터질 것이다.

그래서 peer 중간에 미디어 서버가 필요하다.

 

미디어 서버 원리

🏠 방 생성

CREATE(방번호, 방에 대한 설정)

 

🎙️ 방송을 하기위한 준비

JOIN(방번호, PUBLISHER)

 

📺 방송 하기

CREATE OFFER: 방송해도됨?

PUBLISH: 방송 할게

하면 Kurento 서버로부터 stream이 날라오고 방송을 할 수 있게된다.

 

🙋‍♀️ 방에 참여

JOIN(방번호, SUBSCRIBER, FEED): FEED는 PUBLISHER의 아이디

CREATE ANSWER: 아까 OFFER로 들어온 방송 참여할게

START(방번호): 방송 볼게

하면 Kurento 서버로부터 stream이 날라오고 방송을 볼 수 있게된다.

 

---

 

OpenVidu

Kurento 기반의 중개 서버를 애플리케이션에 쉽게 추가할 수 있도록 완전한 기술 스택을 제공하는 플랫폼

 

 

 

 

 

https://alnova2.tistory.com/1110

https://gh402.tistory.com/38

https://millo-l.github.io/WebRTC-%EC%9D%B4%EB%A1%A0-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0/

https://www.youtube.com/watch?v=5U6QCttnazQ&list=WL&index=16