WebRTC - 개요

WebRTC에 대해서 알아봅시다

작성자

홍세민

홍세민

MarcusHong

정의

WebRTC (Web Real-Time Communication)는 웹 브라우저 간에 플러그인의 도움 없이 서로 통신할 수 있도록 설계된 API이다. W3C에서 제시된 초안이며, 음성 통화, 영상 통화, P2P 파일 공유 등으로 활용될 수 있다. (https://ko.wikipedia.org/wiki/WebRTC)

별도의 플러그인 없이 브라우저간 데이터를 P2P로 통신할 수 있는 기술이다 플러그인을 개발, 배포하는 일은 쉬운일이 아니다. 무엇보다 유저들에게 플러그인을 설치하라고 유도하는 것은 정말 어려운 일이다. 라이센스 비용없이 사용할 수 있다는 것은 정말 매력적인 점이다.

2017년에 iOS에서도 지원을 하면서 거의 모든 브라우저에서 사용가능하다. (IE 제외)(https://caniuse.com/#feat=rtcpeerconnection) 다만, Edge는 RTCDataChannel을 지원하지 않아서, 음성, 비디오만 전송가능하다.

P2P간 데이터 전송이므로, 특수한 상황에서의 TURN 서버 사용(서로 간의 IP정보를 찾지 못해 중계서버가 데이터를 릴레이해야 할 경우)를 제외하면, 인프라 부담이 크지않다.

두 피어 간의 커넥션은 RTCPeerConnection인터페이스를 통해 이루어진다. 커넥션이 이루어지고 열리면, 미디어 스트림들 (MediaStream) 과 데이터 채널(RTCDataChannel)들을 커넥션에 연결할 수 있다.

개발 구성요소

  1. Signaling Server
  2. Peer to peer 간 데이터를 전달할 중계서버. WebSocket, rest api, long pulling 등 어떤 것을 선택하더라도 상관없이 SDP(Session Description Protocol)만 전달가능하면 된다.
  3. 실시간 화상통신을 구현할 예정이므로, socket.io를 사용한다.

  4. WEB

  5. 브라우저에서 WebRTC API와 socket.io API를 사용해 화상통신을 구현한다.

  6. room과 id를 사용해서 채팅방과 유저를 구분한다.

  7. express.js를 사용한다.

  8. STUN/TURN Server

  9. STUN: P2P 연결을 위한 네트워크 정보 획득을 하기 위한 서버

  10. TURN: P2P 연결이 실패했을 경우 전체 데이터를 중계하는 PROXY 서버

  11. 여기서는 테스트 목적이므로, google 의 무료 sturn 서버를 사용

  12. TURN서버 구축 참고 https://github.com/coturn/coturn, http://www.creytiv.com/restund.html

  13. Twilio

  14. 프로젝트 초기에는 TURN서버를 구축하기보다는 twilio와 같은 이미 구축된 서비스를 이용하는 것이 편리하다.

  15. 국내만 서비스를 한다면 모르겠지만, twilio를 사용하면 worldwide 서비스가 가능하다.

Tags : webrtc 

comments powered by Disqus