![[ PeerJS ] WebRTC 를 편하게 다뤄보자](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F8V4Sh%2FbtrlvBtlRSl%2Fn7atEw0AxNEKz7uTGtRH00%2Fimg.png)
I. PeerJS
기술을 공부하는 사람으로서 WebRTC를 직접 구현하기에는 벅찬 감이 없지 않아 있다. 최신 기술이기도 하고 관련 레퍼런스뿐 아니라 해외 자료 또한 충분하지 않다. 간단히 WebRTC를 짚고 넘어가자면 '웹서버(중간자) 없이 데이터를 스트림'하는 API라고 볼 수 있다. 코로나 사태로 브라우저에서 실시간 커뮤니케이션이 필요해지게 됨에 따라 쓰이게 된 기술이다.
PeerJS는 WebRTC를 편하게 이용할 수 있게끔 제작된 간단한 라이브러리이다.
PeerJS - Simple peer-to-peer with WebRTC
The PeerJS library PeerJS simplifies WebRTC peer-to-peer data, video, and audio calls. PeerJS wraps the browser's WebRTC implementation to provide a complete, configurable, and easy-to-use peer-to-peer connection API. Equipped with nothing but an ID, a pee
peerjs.com
<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
.browserstringif (util.browser === 'Firefox') { /* OK to peer with Firefox peers. */ } The current browser. This property can be useful in determining whether or not two peers can connect. For example, as of now data connections are not yet interoperable b
peerjs.com
II. 자체 피어서버
또 한 가지 친절한 점은 피어 서버를 무료로 제공한다는 점이다. 물론 프로덕션으로는 부적합 하지만 개발용으론 충분히 사용할 수 있다. 만약 자체 서버를 구축하고 싶다면, 아래 링크를 참조하길 바란다.
https://github.com/peers/peerjs-server
GitHub - peers/peerjs-server: Server for PeerJS
Server for PeerJS. Contribute to peers/peerjs-server development by creating an account on GitHub.
github.com
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 */
});
'💻기술 > JavaScript' 카테고리의 다른 글
| [ ThreeJS ] OBJLoader object 위치 이동 (0) | 2022.04.21 |
|---|---|
| [ NodeJS ] javascript-obfuscator 자바스크립트 난독화 (0) | 2021.12.24 |
| [ PeerJS ] WebRTC 를 편하게 다뤄보자 (0) | 2021.11.18 |
| [ Javascript ] Solvedac API로 백준 사용자 정보 가져오기 (1) | 2021.09.29 |
