Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/leaysgur/simple-p2p
The simple RTCPeerConnection wrapper module for modern web browsers.
https://github.com/leaysgur/simple-p2p
p2p webrtc
Last synced: 24 days ago
JSON representation
The simple RTCPeerConnection wrapper module for modern web browsers.
- Host: GitHub
- URL: https://github.com/leaysgur/simple-p2p
- Owner: leaysgur
- License: mit
- Created: 2019-07-22T04:49:00.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-08-01T05:43:44.000Z (over 3 years ago)
- Last Synced: 2024-04-23T06:43:11.182Z (7 months ago)
- Topics: p2p, webrtc
- Language: TypeScript
- Homepage:
- Size: 120 KB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# simple-p2p
The simple module to achieve WebRTC P2P communication for modern browsers.
- Chrome 75+
- Firefox 68+
- Safari 12.1.1+
## Install
```
npm i simple-p2p
```
Type defenitions are included.
## API overview
See [API](./API.md) for details.
### Set up Transport
```js
import { createTransport } from "simple-p2p";
const transport = createTransport({
iceServers: [{ urls: "stun:stun.l.google.com:19302" }]
});
// you need to do signaling by yourself
signaling.on("signal", data => transport.handleNegotiation(data));
transport.on("negotiation", data => signaling.signal(data));
await transport.startNegotiation();
// wait for transport open
await new Promise(r => transport.once("open", r));
```
### Send media
```js
const { mediaHandler } = transport;
const track = await navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => stream.getTracks()[0]);
// returns MediaSender instance
const mediaSender = await mediaHandler.sendTrack(track);
// replace track which has same kind
const newTrack = await navigator.mediaDevices.getDisplayMedia({ video: true })
.then(stream => stream.getTracks()[0]);
await mediaSender.replace(newTrack);
// end sending track
await mediaSender.end();
```
### Receive media
```js
// when remote sendTrack() has called,
mediaHandler.on("receiver", mediaReceiver => {
const { track, kind } = mediaReceiver;
// render media elements to DOM
const $media = document.createElement(kind);
$media.srcObject = new MediaStream([track]);
document.body.appendChild($media);
// remove from DOM
mediaReceiver.on("end", () => $media.remove());
});
```
### Use Data channel
```js
const { dataHandler } = transport;
// when remote createChannel() has called,
dataHandler.on("channel", channel => {});
// returns RTCDataChannel instance
const channel1 = await dataHandler.createChannel();
const channel2 = await dataHandler.createChannel("unreliable", { ordered: false });
channel1.addEventListener("message", msg => {});
channel1.send("Hello");
```