WebRTC API 간단하게 정리하기

들어가며

최근 이직한 회사에서 WebRTC를 사용하는 프로젝트에 참여하게 되어 WebRTC에 대해 공부한 내용을 아주 간략하게 정리하려고 한다.

WebRTC

웹 브라우저 간에 플러그인의 도움 없이 서로 통신할 수 있도록 설계된 API 이다. (위키백과 참조) 당장 구글 크롬 개발자 도구를 켜고 RTCPeerConnection을 입력하면 RTCPeerConnection() { [native code] } 메시지가 출력된다. 별도의 라이브러리 없이 브라우저에 내장된 함수이기 때문이다.

1. WebRTC를 구성하는 3가지 API

1. getUserMedia()

음성과 영상을 캡처

이 메서드는 MediaDevices 인터페이스에 정의되어 있다. getUserMedia() 에서 반환된 MediaStream을 WebRTC를 통해 다른 peer로 전달되어 처리된다. WebRTC의 시작이라 볼 수 있겠다.

2. RTCPeerConnection()

사용자간에 오디오 및 비디오를 스트리밍함

로컬 컴퓨터와 원격 피어 사이의 WebRTC 연결을 나타낸다. 원격 피어에 연결하고 연결을 유지 관리 및 모니터링하고 더 이상 필요하지 않은 연결을 닫는 방법을 제공한다.

• https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection

3. RTCDataChannel()

사용자간에 데이터를 스트리밍함

인터페이스는 임의의 데이터의 양방향 peer to peer 전송을 위해 사용될 수있는 네트워크의 채널을 나타낸다. 모든 데이터 채널은RTCPeerConnection에 관련되며 각 피어 연결은 이론적으로 최대 65,534 개의 데이터 채널을 가질 수 있다. (실제 한도는 브라우저마다 다를 수 있음)

• https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel

2. Signaling

WebRTC를 통해 브라우저간에 스트리밍 데이터를 통신할 수 있지만 이를 조정하고 제어하는 메커니즘이 별도로 필요하다. 이걸 시그널링이라고 부르는데 WebRTC에는 별도로 정의되어 있지 않아 WebRTC 외부의 방법을 사용한다. (Socket.IO가 그 예이다.)

참조 : 시그널링에 대한 설명

• https://www.html5rocks.com/en/tutorials/webrtc/infrastructure/

3. STUN & TURN

STUN : Session Traversal Utilities for NAT TURN : Traversal Using Relays around NAT

WebRTC는 P2P로 작동하도록 설계되었으므로 사용자는 가능한 가장 직접적인(가까운?) 경로로 연결할 수 있다. 그러나 WebRTC는 실제 네트워킹에 대처하기 위해 구축되어 있다. 클라이언트 응용 프로그램은 NAT 게이트웨이 와 방화벽 을 통과해야하며 직접 연결에 실패 할 경우 피어 투 피어 네트워킹이 필요하다. 이 프로세스의 일부로 WebRTC API는 STUN 서버를 사용하여 컴퓨터의 IP 주소를 가져오고 피어 투 피어 통신이 실패 할 경우 TURN 서버가 릴레이 서버로 작동하게 된다.

시그널링에 대한 설명

• https://www.html5rocks.com/en/tutorials/webrtc/infrastructure/

STUN & TURN에 대한 좋은 설명

• https://alnova2.tistory.com/1110

정리

WebRTC에 대한 내용은 말도 안되게 방대한것에 비해 너무 짧게 정리한것같다. 실제로 찾아보면 STUN 과 TURN 관련 글만해도 한참 나오는데 우선 이렇게라도 정리해놓고자 한다.

참조한 링크

• WebRTC 홈페이지
  • https://webrtc.org/
• 예제 코드까지 충실하게 설명되어 있는 구글 코드랩 링크
  • https://codelabs.developers.google.com/codelabs/webrtc-web/#0
• 기타 링크
  • https://en.wikipedia.org/wiki/WebRTC#Examples
  • https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API
  • https://developer.mozilla.org/ko/docs/Web/API/MediaDevices/getUserMedia