• Stars
    star
    101
  • Rank 338,166 (Top 7 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 6 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A full-mesh WebRTC swarm built on top of fast-rtc-peer

fast-rtc-swarm

A full-mesh WebRTC swarm built on top of WebSockets & fast-rtc-peer

Installation

yarn add @mattkrick/fast-rtc-swarm

What is it

fast-rtc-peer offers a great API to connect 2 peers. If you'd like to connect more than 2 peers, you're on your own. That's why this exists. It uses a full mesh (vs. partial mesh) network so every client is connected to every other client. A full mesh is great for up to ~100 connections. After that, you'll probably want to move to a partial mesh & trade a little latency for memory.

How's it different from webrtc-swarm?

fast-rtc-swarm is different.

  • It's built on fast-rtc-peer, which is built on the new WebRTC v1.0 spec (transceivers instead of stage 2 tracks or stage 1 streams)
  • The signaling server doesn't have to be server sent events. It can be anything. (see reference implementation)
  • It doesn't bother the signaling server with a heartbeat. We can derive that info from the swarm by listening to disconnected on each peer. If timeouts are an issue, then add a WebSocket#ping on your server. Don't make the client do more work than necessary!
  • It only connects to 1 signaling server. Multiple servers is a proxy problem. Again, don't make the client work hard!
  • No unauthenticated-by-default signaling server CLI. I'm not gonna make it easier for you to write an insecure server :-)
  • No multiplexing streams. If you need a new data channel, open another one natively, not with expensive (and LARGE) stream packages.
  • It uses the fast-rtc protocol for the fastest connection possible

What makes it so fast?

The fast-rtc protocol completes a WebRTC handshake in only 2 round trips. Other implementations take 3 (or even 4!) It does this by keeping a peerBuffer of offers and candidates. Think of it like "pay-it-forward". You buy the person behind you a coffee, so they get a free coffee when they get to register & buy the person behind them a coffee.

Here's how it works:

Alice is the first peer to join the swarm:

  • She gives the server an OFFER that can be used by the next person to join
  • As CANDIDATES and additional OFFERS trickle in, she forwards them to the server
  • The server groups CANDIDATES and OFFERS in a single CHUNK, awaiting an ACCEPT
  • When someone ACCEPTS her CHUNK, the server REQUESTS another from her
  • As CANDIDATES and OFFERS continue to trickle in, they are forwarded to client that ACCEPTED the original chunk

When Bob joins the swarm:

  • He follows the same procedure as Alice
  • He takes one CHUNK from each client on the server
  • If Alice does not have a CHUNK readily available, Bob puts his name on her waiting list
  • On the client, Bob creates an ANSWER to each OFFER and forwards it to the signaling server
  • The signaling server forwards Bob's ANSWER to Alice
  • Alice uses Bob's ANSWER to initiate the connection

That's it! See reference implementation and the example below to see how to add it to your own server.

Usage

// client
import FastRTCSwarm from '@mattkrick/fast-rtc-swarm'

const socket = new WebSocket('ws://localhost:3000');
socket.addEventListener('open', () => {
  const swarm = new FastRTCSwarm()
  // send the signal to the signaling server
  swarm.on('signal', (signal) => {
    socket.send(JSON.stringify(signal))
  })
  // when the signal come back, dispatch it to the swarm
  socket.addEventListener('message', (event) => {
    const payload = JSON.parse(event.data)
    swarm.dispatch(payload)
  })
  // when the connection is open, say hi to your new peer
  swarm.on('dataOpen', (peer) => {
    console.log('data channel open!')
    peer.send('hi')
  })
  // when your peer says hi, log it
  swarm.on('data', (data, peer) => {
    console.log('data received', data, peer)
  })
})

API

Config: A superset of fast-rtc-peer's config. To add a TURN server to the default list of ICE candidates, see fast-rtc-peer.

  • roomId: a string to define the room all the peers are joining
  • peerBuffer: the number of additional offers to keep on the server (default 0)

Methods on FastRTCSwarm

  • addStreams(streamDict): similar to fast-rtc-peer's addStreams, but updates your tracks for future peers
  • broadcast(message): send a string or buffer to all connected peers
  • close(): destroy all peer connections
  • dispatch(signal): receive an incoming signal from the signal server
  • muteTrack(trackName): mute's the track for all peers & future peers

Events

  • swarm.on('open', (peer) => {}): fired when a peer connects
  • swarm.on('close', (peer) => {}): fired when a peer disconnects
  • swarm.on('data', (data, peer) => {}): fired when a peer sends data
  • swarm.on('signal', (signal, peer) => {}): fired when a peer creates an offer, ICE candidate, or answer.
  • swarm.on('stream', (stream, peer) => {}): fired when a peer creates or updates an audio/video track.
  • swarm.on('error', (error, peer) => {}): fired when a peer has a signaling error.
  • swarm.on('connection', (stream, peer) => {}): fired when a peer's ICE connection state changes

License

MIT

More Repositories

1

meatier

🍔 like meteor, but meatier 🍔
JavaScript
3,059
star
2

redux-optimistic-ui

a reducer enhancer to enable type-agnostic optimistic updates
JavaScript
693
star
3

cashay

💰 Relay for the rest of us 💰
JavaScript
453
star
4

trebuchet-client

A friendly siege weapon to get 2-way communication through tough firewalls and bad mobile networks
TypeScript
177
star
5

redux-operations

Solves challenging redux problems in a clean, understandable, debuggable fasion.
JavaScript
125
star
6

lolliclock

A material design timepicker based on clockpicker
JavaScript
40
star
7

fast-rtc-peer

a small RTC client for connecting 2 peers
TypeScript
34
star
8

fast-bitset

A fast bitset with some nice methods
JavaScript
34
star
9

cashay-playground

The playground for exploring what's possible with Cashay
JavaScript
33
star
10

EdmondsBlossom

Edmond's maximum weighted matching algorithm (Blossom algorithm) in O(n^3)
JavaScript
30
star
11

redux-socket-cluster

A socket-cluster state snatcher
JavaScript
30
star
12

dataloader-warehouse

A class for sharing dataloaders across GraphQL subscriptions
TypeScript
29
star
13

rich

A decentralized collaborative rich text editor powered by DOM mutations, CRDT, and WebRTC
TypeScript
22
star
14

sanitize-svg

a small script to prevent stored XSS attacks and detect script tags in SVGs
TypeScript
19
star
15

redux-operations-counter-example

An example of solving current redux shortcoming using redux-operations
JavaScript
16
star
16

graphql-trebuchet-client

A graphql client to get your subscriptions through tough firewalls and unreliable mobile networks
TypeScript
14
star
17

react-portal-hoc

A stupid HOC to make a stupid portal so you can make stupid modals
JavaScript
14
star
18

event-source-polyfill

A minimum immplementation of EventSource for IE11 and Edge
TypeScript
13
star
19

react-githubish-mentions

A wrapper for a textarea to offers autocomplete suggestions when triggered by @ or # or whatever
JavaScript
13
star
20

json-deduper

Compress JSON trees by deduplicating nested objects, strings, and numbers
TypeScript
11
star
21

react-hotkey-hoc

mousetrap wrapper for react
JavaScript
10
star
22

dynamic-serializer

crawls a JSON tree replacing dynamic values with a deterministic integer
JavaScript
9
star
23

react-async-hoc

a hoc for async globals
JavaScript
6
star
24

meteor-leaflet-maps

Leaflet, now with lazy loading & namespacing!
JavaScript
6
star
25

relay-linear-publish-queue

Publish changes in the order they're received.
TypeScript
4
star
26

surviveJS-redux

A redux version of the awesome surviveJS tutorial for react & webpack.
JavaScript
3
star
27

hungarian-on3

The hungarian (Kuhn-Munkres) algorithm solved in O(n^3) time
JavaScript
3
star
28

rethinkdb-ts-migrate

Migrations for rethinkdb-ts
TypeScript
3
star
29

meteor-vital-signs

JavaScript
2
star
30

meteorTooltips

Meteor tooltips that turn any template into a tooltip
JavaScript
2
star
31

visage

Signaling + SFU for turnkey WRTC (WIP)
TypeScript
2
star
32

event-target-polyfill

EventTarget polyfill for IE11 and Edge from https://developer.mozilla.org/en-US/docs/Web/API/EventTarget#Example
TypeScript
2
star
33

hepha

Aphrodite for global styles
JavaScript
1
star
34

performant-material-input

A feature-rich material design input box with hardware acceleration
CSS
1
star
35

todo-modern-subs

JavaScript
1
star