[컴네/CN] WebRTC

웹기반 실시간 통신: 화상회의

플러그인 없이 웹 브라우저에서 음성/영상/P2P를 공유 가능하게 하는 Open Source project다.

 

화상회의는 보통 P2P 방식을 사용한다. 그런데 우리는 보통 노트북이나 스마트폰을 이용하여 화상회의를 진행하는데, 이러한 단말기들은 공유기 밑에서 연결되어 있다. 그러나 공유기는 사설 ip 주소로 직접 통신이 되지 않기 때문에 공인 ip 주소로 서로 다른 단말기가 통신하는데, 때문에 공유기와 NAT를 잘 알고 있어야 한다.

 

공유기를 통과하는 기술인 STUN, TURN, ICE와 NAT tarversal 기술은 필수적이다.

화상회의 시 각 단말기들은 공유기 밑이기 때문에 공유기를 포트포워딩하여 포트 번호를 동록해야 통과할 수 있다.

 

위 통신은 실제 웹에서 이뤄지기 때문에 연결 시에는 Socket.io(웹 소켓)를 사용하며 HTTP 위에서 작동하기 때문에 보안인 TLS가 필수이다.

 

WebRTC 프로토콜 스택

 

WebRTC의 실제 프로토콜은 위와 같다.

 

- DTLS

UDP를 위한 TLS로 Datagram TLS이다.

 

- SRTP(Secure Real Time Protocol)

오디오와 비디오를 안전하게 전송하는 프로토콜이다.

 

- SCTP

데이터 채널을 제어한다.

 

- ICE, STUN, TURN

공유기를 통과하는 기술로 웹 브라우저에서 필수로 알고 있어야 한다.

 

 

위 사진은 WebRTC로 가능한 언택트 서비스들로 실시간 상호 응답이 가능한 서비스이다.

 

WebRTC 구성요소: JavaScript API

- getUserMedia

오디오와 비디오 미디어는 브라우저에서 접근한다.

 

- RTCPeerConnection

데이터를 전송하기 위해서는 P2P 방식을 사용하기 때문에 상대방과 연결이 되어야 데이터를 송수신할 수 있다. 이때 피어를 연결할 때는 공유기를 통과하는 방식을 사용해야 한다.

 

피어간 오디오, 비디오의 통신을 활성화하는 것은 STUN이며, 이 외에도 신호처리, 코덱 관리, P2P 통신, 보안, 대역폭 관리 등을 수행한다.

 

- RTCDataChannel

Tunnel API를 통해 피어 간 양방향 임의 데이터 통신을 허용한다.

웹소켓과 동일한 API를 사용하며, 낮은 레이턴시를 가지고 있다.

 

SDP(Session Description Protocol)

 

SDP는 멀티미디어 데이터를 주고 받기 위해 데이터에 대한 포맷을 기술하는 protocol이다.

 

SDP를 통해 데이터를 전달 받는 쪽은 전달 받는 데이터의 메타 정보를 알 수 있다.

 

ip 주소, 오디오/비디오가 있고, ITP 정보나 ICE 정보 등 내가 사용하고 있는 비디오와 관련된 정보가 있다. 이러한 사항들을 상대방과 약속하고 통신을 시작한다.

 

미디어 디바이스 시작하기

WebRTC 표준은 컴퓨터나 스마트 폰에 연결된 카메라 및 마이크 액세스 API 제공한다.

const constraints = { 
	'video': true, 
    'audio': true
} 
navigator.mediaDevices.getUserMedia(constraints)
	.then(stream => {
		console.log('Got MediaStream:', stream);
	})
	.catch(error => {
		console.error('Error accessing media devices.', error);
	}
);

 

MediaDevices 인터페이스를 구현하는 navigator.mediaDevices 객체를 통해 JavaScript로 액세스할 수 있다.

 

피어 연결

단말기는 공유기 밑에 있다고 언급하였다. 공유기 밑에 있다는 말은 사설 ip로 통신한다는 의미로 사설 ip로 통신 시 상대방도 나도 10. 으로 시작하는 주소를 통과하여 정식(또는 공인) ip를 사용해야 한다.

 

NAT 통과 기술은 STUN, TURN, ICE가 있다.

특히 ICE 서버를 사용하면 외부의 공인 ip 주소가 등록되어서 사설 ip 주소를 쓰는 NAT를 통과하여 사용할 수 있다.

 

코드 상에서 한 줄로 NAT를 통과할 수 있다.

 

STUN, TURN

STUN

사설 네트워크에서 개인 컴퓨터는 사설 ip 주소를 가지고 있다.

이때 공유기에 공인 ip와 매핑해주는 기술을 NAT라고 하는데, 매핑해주는 역할을 공유기에서 하기 때문에 개인 컴퓨터는 공인 ip 주소를 모른다. 하지만 피어 간의 연결을 생성하기 위해서는 자신의 공인 ip를 상대방에게 전달을 해야하는데, 이때 사용할 수 있는 프로토콜이 STUN이다.

 

STUN은 외부에 둔 STUN 서버를 통해 자신의 공인 ip와 포트 번호를 조회할 수 있다.

 

TURN

일부 라우터는 symmetric NAT라는 기술을 채용하여, 이전에 연결한 peer들만 연결을 허용한다. 이로 인해 peer간의 직접 연결이 불가능해지며, 릴레이 서버를 두어 symmetric NAT를 우회하는 방법을 TURN이라한다.

 

TURN은 데이터를 전달하는 역할을 하는데, 우회하여 전송 시 공인 ip 주소는 STUN 서버로부터 받아온다.

 

어떤 경우에는 ip 주소만 알면 되지만, 어떤 경우는 데이터를 우회해서 전송해야 한다.

 

위와 같은 서버는 개발자가 만들 수 없고 공유기를 통과하는 TURN, STUN 서버가 있어야 사용할 수 있다. 이때 이 서버들은 별도의 통신사나 구글같은 컨텐츠 제공회사에서 별도로 만들어 제공해준다.

 

TURN 서버

TURN 서버는 피어간에 트래픽 릴레이 서버이다.

 

클라이언트가 동일한 로컬 네트워크에 위치하지 않을 경우 사용하는데 직접 소켓을 사용할 수 없는 경우 TURN 서버를 사용한다.

 

Traversal Using Relay NAT의 약어로 네트워크 트래픽을 중계하기위한 프로토콜이다.

 

TURN은 데이터 자체를 우회해서 공개해주는 서버의 역할을 한다.

 

ICE(Interactive Connectivity Establishment)

ICE는 브라우저가 Peer를 통한 연결을 가능하게 하는 프레임워크다. 

Peer간의 연결은 방화벽을 통과해야 하거나, public IP가 없는 경우 연결의 어려움이 생길 수 있다. 하지만 ICE에서 지원하는 signaling이라는 우회 과정을 통해서  peer간의 연결을 수행한다.

 

ICE는 두 단말이 서로 통신할 수 있는 최적의 경로를 찾을 수 있도록 도와주는 프레임워트로 STUN, TURN 서버를 사용하여 최적의 경로를 찾을 수 있다.

 

RTC 구현

RTC를 구현하기 위해서는 정식으로 https가 필요하다. 따라서 임의로 https를 사용하기 위해 셀프 사인 인증서를 사용한다.

 

브라우저 서버를 웹으로 띄우며 html 파일을 이용해 비디오를 가져올 수 있다.

 

서버

셀프 사인 인증서를 만든 모습이다.

 

서버의 index.js 코드이다. socket.io와 https 라이브러리를 사용하고 있다.

option에서는 셀프 사인 인증서를 통해 인증하고 있다.

 

클라이언트

rtc.html 파일이다. script의 src를 이용하여 비디오 화상회의를 진행할 수 있다?

 

 

위와 같은 구현은 어렵지는 않지만 진입 장벽이 높다.

구현을 위해서는 NAT, HTTPS를 알아야 하기 때문이다.

기본 프로토콜 자체가 암호화되어 있고 NAT를 필수로 통과해야 한다.

코드는 단순하지만 ICE, STUN, TURN, HTTPS 등을 공부해야 코드를 이해할 수 있다.

 

다양한 예제는 아래 사이트를 통해 확인할 수 있다.

 

• https://webrtc.org/getting-started/media-devices?hl=ko
• https://www.html5rocks.com/ko/tutorials/webrtc/infrastructure/
• https://codelabs.developers.google.com/codelabs/webrtc- web#0

---

참고 및 출처

https://yoooonghyun.gitbook.io/documents/multimedia/overview/webrtc

https://gh402.tistory.com/45