[ PeerJS ] WebRTC 를 편하게 다뤄보자

 

I. PeerJS

 

기술을 공부하는 사람으로서 WebRTC를 직접 구현하기에는 벅찬 감이 없지 않아 있다. 최신 기술이기도 하고 관련 레퍼런스뿐 아니라 해외 자료 또한 충분하지 않다. 간단히 WebRTC를 짚고 넘어가자면 '웹서버(중간자) 없이 데이터를 스트림'하는 API라고 볼 수 있다. 코로나 사태로 브라우저에서 실시간 커뮤니케이션이 필요해지게 됨에 따라 쓰이게 된 기술이다. 

 

PeerJS는 WebRTC를 편하게 이용할 수 있게끔 제작된 간단한 라이브러리이다. 

https://peerjs.com

PeerJS - Simple peer-to-peer with WebRTC

 

<script src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>

 

간단하게 CDN으로 불러올 수 있다. 

공식 문서가 친절한건 아니지만 P2P 대한 충분한 이해도와 짜깁기 할 수 있는 능력(?) 이 있다면 어렵지 않게 구현할 수 있다. API 레퍼런스는 아래 링크에서 찾아볼 수 있다. 

 

https://peerjs.com/docs.html#api

PeerJS Documentation

 

 

II. 자체 피어서버

 

또 한 가지 친절한 점은 피어 서버를 무료로 제공한다는 점이다. 물론 프로덕션으로는 부적합 하지만 개발용으론 충분히 사용할 수 있다. 만약 자체 서버를 구축하고 싶다면, 아래 링크를 참조하길 바란다.

https://github.com/peers/peerjs-server

GitHub - peers/peerjs-server: Server for PeerJS

 

 

III. 턴 서버

 

WebRTC의 경우 별도의 턴 서버 없이는 로컬 호스트 외의 외부 클라이언트와 통신할 수 없다. 이를 해결하기 위해서는 TURN, STUN 서버를 지정해주어야 하는데 다음과 같이 지정할 수 있다.

 

var peer = new Peer({
  config: {'iceServers': [
    { url: 'stun:stun.l.google.com:19302' },
    { url: 'turn:homeo@turn.bistri.com:80', credential: 'homeo' }
  ]} /* Sample servers, please use appropriate ones */
});