- ×
Peer-to-peer data in the browser
Filed under dataShow AllPeerJS: Simple peer-to-peer with WebRTC
https://t.me/joinchat/VWI0UBxnG7f7_DV7
PeerJS provides a complete, configurable, and easy-to-use peer-to-peer API built on top of WebRTC, supporting both data channels and media streams.
Live Example
Here's an example application that uses both media and data connections: https://glitch.com/~peerjs-video. The example also uses its own PeerServer.
Setup
Include the library
with npm:
npm install peerjs
with yarn:
yarn add peerjs
// The usage - import Peer from 'peerjs';
Create a Peer
const peer = new Peer('pick-an-id'); // You can pick your own id or omit the id if you want to get a random one from the server.
Data connections
Connect
const conn = peer.connect('another-peers-id'); conn.on('open', () => { conn.send('hi!'); });
Receive
peer.on('connection', (conn) => { conn.on('data', (data) => { // Will print 'hi!' console.log(data); }); conn.on('open', () => { conn.send('hello!'); }); });
Media calls
Call
navigator.mediaDevices.getUserMedia({video: true, audio: true}, (stream) => { const call = peer.call('another-peers-id', stream); call.on('stream', (remoteStream) => { // Show stream in some <video> element. }); }, (err) => { console.error('Failed to get local stream', err); });
Answer
peer.on('call', (call) => { navigator.mediaDevices.getUserMedia({video: true, audio: true}, (stream) => { call.answer(stream); // Answer the call with an A/V stream. call.on('stream', (remoteStream) => { // Show stream in some <video> element. }); }, (err) => { console.error('Failed to get local stream', err); }); });
Running tests
npm test
Browsers support
Firefox
Chrome
Safari
last 4 versions last 4 versions 12.1+ Safari
- Safari supports only string data when sending via DataConnection. Use JSON serialization type if you want to communicate with Safari. By default, DataConnection uses Binary serialization type.
FAQ
Q. I have a message
Critical dependency: the request of a dependency is an expression
in browser's consoleA. The message occurs when you use PeerJS with Webpack. It is not critical! It relates to Parcel https://github.com/parcel-bundler/parcel/issues/2883 We'll resolve it when updated to Parcel V2.
Links
Documentation / API Reference
PeerServer
Discuss PeerJS on our Telegram Channel
Changelog
Contributors
This project exists thanks to all the people who contribute.
Backers
Thank you to all our backers! [Become a backer]
Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
License
PeerJS is licensed under the MIT License.