### Basic Peer Connection Example in HTML/JavaScript
Source: https://github.com/mitschabaude/simple-peer-light/blob/master/README.md
This HTML and JavaScript example demonstrates how to establish a basic peer-to-peer connection between two browsers using simple-peer-light. It includes setup for signaling, error handling, and data exchange. Users need to visit different URLs (one with #1 hash) to initiate the connection and exchange signaling data manually.
```html
```
--------------------------------
### Full Mesh Topology Example
Source: https://github.com/mitschabaude/simple-peer-light/blob/master/README.md
Illustrates how to connect multiple peers using a full-mesh topology, where each peer connects to every other peer.
```APIDOC
## Connecting More Than 2 Peers (Full Mesh Topology)
A full-mesh topology connects every peer directly to every other peer. This is suitable for a small number of peers.
**Broadcasting a message**: Iterate over all connected peers and call `peer.send()` on each.
**Scalability**: Full mesh topologies do not scale well for a large number of peers due to the quadratic increase in connections (n * (n-1) / 2).
### Example: Connecting 3 Peers
#### Peer 1
```js
// Connections to Peer 2 and Peer 3
var peer2 = new Peer({initiator: true});
var peer3 = new Peer({initiator: true});
peer2.on('signal', data => {
// Send signaling data to peer2
});
peer2.on('connect', () => {
peer2.send('hi peer2, this is peer1');
});
peer2.on('data', data => {
console.log('got message from peer2: ' + data);
});
peer3.on('signal', data => {
// Send signaling data to peer3
});
peer3.on('connect', () => {
peer3.send('hi peer3, this is peer1');
});
peer3.on('data', data => {
console.log('got message from peer3: ' + data);
});
```
#### Peer 2
```js
// Connections to Peer 1 and Peer 3
var peer1 = new Peer(); // Assuming Peer 1 is the initiator
var peer3 = new Peer({initiator: true});
peer1.on('signal', data => {
// Send signaling data to peer1
});
peer1.on('connect', () => {
peer1.send('hi peer1, this is peer2');
});
peer1.on('data', data => {
console.log('got message from peer1: ' + data);
});
peer3.on('signal', data => {
// Send signaling data to peer3
});
peer3.on('connect', () => {
peer3.send('hi peer3, this is peer2');
});
peer3.on('data', data => {
console.log('got message from peer3: ' + data);
});
```
#### Peer 3
```js
// Connections to Peer 1 and Peer 2
var peer1 = new Peer(); // Assuming Peer 1 is the initiator
var peer2 = new Peer(); // Assuming Peer 2 is the initiator
peer1.on('signal', data => {
// Send signaling data to peer1
});
peer1.on('connect', () => {
peer1.send('hi peer1, this is peer3');
});
peer1.on('data', data => {
console.log('got message from peer1: ' + data);
});
peer2.on('signal', data => {
// Send signaling data to peer2
});
peer2.on('connect', () => {
peer2.send('hi peer2, this is peer3');
});
peer2.on('data', data => {
console.log('got message from peer2: ' + data);
});
```
```
--------------------------------
### Install simple-peer-light using npm
Source: https://github.com/mitschabaude/simple-peer-light/blob/master/README.md
This command installs the simple-peer-light package using npm. This package is designed to work in the browser without modification, and a minified version is available for direct script usage.
```bash
npm install simple-peer-light
```
--------------------------------
### Stream Video/Voice with Simple Peer
Source: https://github.com/mitschabaude/simple-peer-light/blob/master/README.md
This example shows how to set up a peer-to-peer connection for real-time video and voice streaming using simple-peer-light. It involves requesting media access via `getUserMedia`, initiating a peer connection with the stream, and handling the incoming remote stream to display it. Note that `getUserMedia` requires an HTTPS connection.
```javascript
import Peer from 'simple-peer-light';
// get video/voice stream
avigator.mediaDevices
.getUserMedia({
video: true,
audio: true,
})
.then(gotMedia)
.catch(() => {});
function gotMedia(stream) {
var peer1 = new Peer({initiator: true, stream: stream});
var peer2 = new Peer();
peer1.on('signal', data => {
peer2.signal(data);
});
peer2.on('signal', data => {
peer1.signal(data);
});
peer2.on('stream', stream => {
// got remote video stream, now let's show it in a video tag
var video = document.querySelector('video');
if ('srcObject' in video) {
video.srcObject = stream;
} else {
video.src = window.URL.createObjectURL(stream); // for older browsers
}
video.play();
});
}
```
--------------------------------
### Destroy Connections with destroy() in simple-peer-light
Source: https://context7.com/mitschabaude/simple-peer-light/llms.txt
Shows how to use the `destroy()` method to cleanly close a peer connection and release resources in simple-peer-light. An optional error can be passed to emit an 'error' event before closing. This example also includes logic to auto-disconnect after inactivity.
```javascript
import Peer from 'simple-peer-light';
const peer = new Peer({ initiator: true });
let timeoutId;
peer.on('connect', () => {
console.log('Connected');
// Auto-disconnect after 5 minutes of inactivity
timeoutId = setTimeout(() => {
peer.destroy();
}, 5 * 60 * 1000);
});
peer.on('data', () => {
// Reset inactivity timer on activity
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
peer.destroy();
}, 5 * 60 * 1000);
});
peer.on('close', () => {
clearTimeout(timeoutId);
console.log('Connection closed and cleaned up');
});
// Force close with error
// peer.destroy(new Error('User disconnected'));
```
--------------------------------
### Get Connection Statistics with getStats() in simple-peer-light
Source: https://context7.com/mitschabaude/simple-peer-light/llms.txt
Demonstrates how to retrieve WebRTC connection statistics using the `getStats()` method in simple-peer-light. This method provides information on bandwidth, latency, and codec details. The example shows how to periodically fetch and log RTT, sent/received bytes, and video packet loss.
```javascript
import Peer from 'simple-peer-light';
const peer = new Peer({ initiator: true });
peer.on('connect', () => {
// Get stats periodically
setInterval(() => {
peer.getStats((err, stats) => {
if (err) {
console.error('Stats error:', err);
return;
}
stats.forEach(report => {
if (report.type === 'candidate-pair' && report.selected) {
console.log('Current RTT:', report.currentRoundTripTime, 'ms');
console.log('Bytes sent:', report.bytesSent);
console.log('Bytes received:', report.bytesReceived);
}
if (report.type === 'inbound-rtp' && report.kind === 'video') {
console.log('Video packets lost:', report.packetsLost);
console.log('Frames decoded:', report.framesDecoded);
}
});
});
}, 5000);
});
```
--------------------------------
### Connect 3 Peers in a Full-Mesh Topology (Peer 3)
Source: https://github.com/mitschabaude/simple-peer-light/blob/master/README.md
This JavaScript code illustrates Peer 3's setup in a 3-peer full-mesh network. It establishes connections to Peer 1 and Peer 2, handles signaling data exchange, and manages sending/receiving messages.
```javascript
// These are peer3's connections to peer1 and peer2
var peer1 = new Peer();
var peer2 = new Peer();
peer1.on('signal', data => {
// send this signaling data to peer1 somehow
});
peer1.on('connect', () => {
peer1.send('hi peer1, this is peer3');
});
peer1.on('data', data => {
console.log('got a message from peer1: ' + data);
});
peer2.on('signal', data => {
// send this signaling data to peer2 somehow
});
peer2.on('connect', () => {
peer2.send('hi peer2, this is peer3');
});
peer2.on('data', data => {
console.log('got a message from peer2: ' + data);
});
```
--------------------------------
### Exchange Signaling Data with simple-peer-light
Source: https://context7.com/mitschabaude/simple-peer-light/llms.txt
Illustrates the process of exchanging signaling data between two peers using the `signal()` method and the `'signal'` event. This is crucial for establishing the WebRTC connection. The example shows how to pass the offer from the initiator to the receiver and the answer back to the initiator, logging the signal types.
```javascript
import Peer from 'simple-peer-light';
const peer1 = new Peer({ initiator: true, trickle: false });
const peer2 = new Peer({ trickle: false });
// peer1 generates offer, pass it to peer2
peer1.on('signal', data => {
console.log('Peer1 signal:', data.type); // Output: "offer"
peer2.signal(data); // Pass offer to peer2
});
// peer2 generates answer, pass it back to peer1
peer2.on('signal', data => {
console.log('Peer2 signal:', data.type); // Output: "answer"
peer1.signal(data); // Pass answer to peer1
});
peer1.on('connect', () => {
console.log('Connection established!');
});
```
--------------------------------
### Connect 3 Peers in a Full-Mesh Topology (Peer 2)
Source: https://github.com/mitschabaude/simple-peer-light/blob/master/README.md
This JavaScript code illustrates Peer 2's setup in a 3-peer full-mesh network. It establishes connections to Peer 1 and Peer 3, handles signaling data exchange, and manages sending/receiving messages.
```javascript
// These are peer2's connections to peer1 and peer3
var peer1 = new Peer();
var peer3 = new Peer({initiator: true});
peer1.on('signal', data => {
// send this signaling data to peer1 somehow
});
peer1.on('connect', () => {
peer1.send('hi peer1, this is peer2');
});
peer1.on('data', data => {
console.log('got a message from peer1: ' + data);
});
peer3.on('signal', data => {
// send this signaling data to peer3 somehow
});
peer3.on('connect', () => {
peer3.send('hi peer3, this is peer2');
});
peer3.on('data', data => {
console.log('got a message from peer3: ' + data);
});
```
--------------------------------
### Connect 3 Peers in a Full-Mesh Topology (Peer 1)
Source: https://github.com/mitschabaude/simple-peer-light/blob/master/README.md
This JavaScript code illustrates Peer 1's setup in a 3-peer full-mesh network. It establishes connections to Peer 2 and Peer 3, handles signaling data exchange, and manages sending/receiving messages.
```javascript
// These are peer1's connections to peer2 and peer3
var peer2 = new Peer({initiator: true});
var peer3 = new Peer({initiator: true});
peer2.on('signal', data => {
// send this signaling data to peer2 somehow
});
peer2.on('connect', () => {
peer2.send('hi peer2, this is peer1');
});
peer2.on('data', data => {
console.log('got a message from peer2: ' + data);
});
peer3.on('signal', data => {
// send this signaling data to peer3 somehow
});
peer3.on('connect', () => {
peer3.send('hi peer3, this is peer1');
});
peer3.on('data', data => {
console.log('got a message from peer3: ' + data);
});
```
--------------------------------
### Receive Media Streams with 'stream' Event in JavaScript
Source: https://context7.com/mitschabaude/simple-peer-light/llms.txt
Explains how to handle the 'stream' event, which fires when a remote audio/video stream is received. The received stream can be attached to a