• This repository has been archived on 04/Apr/2019
  • Stars
    star
    530
  • Rank 80,444 (Top 2 %)
  • Language
    JavaScript
  • Created over 9 years ago
  • Updated over 7 years ago

Reviews

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

Repository Details

This module simply initializes socket.io and configures it in a way that single broadcast can be relayed over unlimited users without any bandwidth/CPU usage issues. Everything happens peer-to-peer!

WebRTC Scalable Broadcast

Scalable WebRTC peer-to-peer broadcasting demo.

npm downloads

This module simply initializes socket.io and configures it in a way that single broadcast can be relayed over unlimited users without any bandwidth/CPU usage issues. Everything happens peer-to-peer!

RTCMultiConnection v3 and Scalable Broadcast

RTCMultiConnection v3 now naively supports scalable-broadcast:

DemoTitle TestLive ViewSource
Scalable Audio/Video Broadcast Demo Source
Scalable Screen Broadcast Demo Source
Scalable Video Broadcast Demo Source
Scalable File Sharing Demo Source

Demos

Note: These (below) are old demos. Above (RTCMultiConnection-v3) demos are preferred (and up-to-dated).

  1. index.html - share video or screen or audio over unlimited users using p2p methods.
  2. share-files.html - share files with unlimited users using p2p methods!

Browsers Support:

Browser Support
Firefox Stable / Aurora / Nightly
Google Chrome Stable / Canary / Beta / Dev

Browsers Comparison

host means the browser that is used to forward remote-stream.

Host Streams Receivers Issues
Chrome Audio+Video Chrome,Firefox Remote audio tracks are skipped.
Chrome Audio None Chrome can NOT forward remote-audio
Chrome Video Chrome,Firefox No issues
Chrome Screen Chrome,Firefox No issues
Firefox Audio+Video Chrome,Firefox No issues
Firefox Audio+Screen Chrome,Firefox No issues
Firefox Audio Chrome,Firefox No issues
Firefox Video Chrome,Firefox No issues
Firefox Screen Chrome,Firefox No issues
  1. First column shows browser name
  2. Second column shows type of remote-stream forwarded
  3. Third column shows browsers that can receive the remote forwarded stream
  4. Fourth column shows sender's i.e. host's issues

Chrome-to-Firefox interoperability also works!

Android devices are NOT tested yet. Opera is also NOT tested yet (though Opera uses same chromium code-base).

Currently you can't share audio in Chrome out of this big. In case of audio+video stream, chrome will skip remote-audio tracks forwarding. However chrome will keep receiving remote-audio from Firefox!

Firefox

Firefox additionally allows remote-stream-forwarding for:

  1. Streams captured from <canvas>
  2. Streams captured from <video>
  3. Streams captured or generated by AudioContext i.e. WebAudio API

Is stream keeps quality?

Obviously "nope". It will have minor side-effects (e.g. latency in milliseconds/etc.).

If you'll be testing across tabs on the same system, then you'll obviously notice quality lost; however it will NOT happen if you test across different systems.

WebRTC Scalable Broadcast

In the image, you can see that each NEW-peer is getting stream from most-recent peer instead of getting stream directly from the moderator.

npm install webrtc-scalable-broadcast

Now, goto node_modules>webrtc-scalable-broadcast:

cd node_modules
cd webrtc-scalable-broadcast

# and run the server.js file
node server.js

Or:

cd ./node_modules/webrtc-scalable-broadcast/
node ./server.js

Or install using WGet:

mkdir webrtc-scalable-broadcast && cd webrtc-scalable-broadcast
wget http://dl.webrtc-experiment.com/webrtc-scalable-broadcast.tar.gz
tar -zxvf webrtc-scalable-broadcast.tar.gz
ls -a
node server.js

Or directly download the TAR/archive on windows:

And now open: http://localhost:8888 or 127.0.0.1:8888.

If server.js fails to run:

# if fails,
lsof -n -i4TCP:8888 | grep LISTEN
kill process-ID

# and try again
node server.js

How it works?

Above image showing terminal logs explains it better.

For more details, to understand how this broadcasting technique works:

WebRTC Scalable Broadcast

Assuming peers 1-to-10:

First Peer:

Peer1 is the only peer that invokes getUserMedia. Rest of the peers will simply forward/relay remote stream.

peer1 captures user-media
peer1 starts the room

Second Peer:

peer2 joins the room
peer2 gets remote stream from peer1
peer2 opens a "parallel" broadcasting peer named as "peer2-broadcaster"

Third Peer:

peer3 joins the room
peer3 gets remote stream from peer2
peer3 opens a "parallel" broadcasting peer named as "peer3-broadcaster"

Fourth Peer:

peer4 joins the room
peer4 gets remote stream from peer3
peer4 opens a "parallel" broadcasting peer named as "peer4-broadcaster"

Fifth Peer:

peer5 joins the room
peer5 gets remote stream from peer4
peer5 opens a "parallel" broadcasting peer named as "peer5-broadcaster"

and 10th peer:

peer10 joins the room
peer10 gets remote stream from peer9
peer10 opens a "parallel" broadcasting peer named as "peer10-broadcaster"

Conclusion

  1. Peer9 gets remote stream from peer8
  2. Peer15 gets remote stream from peer14
  3. Peer50 gets remote stream from peer49

and so on.

License

Scalable WebRTC Broadcasting Demo is released under MIT licence . Copyright (c) Muaz Khan.

More Repositories

1

WebRTC-Experiment

WebRTC, WebRTC and WebRTC. Everything here is all about WebRTC!!
JavaScript
11,584
star
2

RecordRTC

RecordRTC is WebRTC JavaScript library for audio/video as well as screen activity recording. It supports Chrome, Firefox, Opera, Android, and Microsoft Edge. Platforms: Linux, Mac and Windows.
JavaScript
6,333
star
3

RTCMultiConnection

RTCMultiConnection is a WebRTC JavaScript library for peer-to-peer applications (screen sharing, audio/video conferencing, file sharing, media streaming etc.)
JavaScript
2,516
star
4

Chrome-Extensions

WebRTC chrome extensions for screen sharing, screen recording, file sharing, youtube+audio sharing, etc.
JavaScript
1,054
star
5

DetectRTC

DetectRTC is a tiny JavaScript library that can be used to detect WebRTC features e.g. system having speakers, microphone or webcam, screen capturing is supported, number of audio/video devices etc. https://www.webrtc-experiment.com/DetectRTC/
JavaScript
651
star
6

Ffmpeg.js

Ffmpeg.js demos, both for browsers and node.js
JavaScript
481
star
7

MultiStreamsMixer

MultiStreamsMixer is a JavaScript library that allows you pass multiple streams (e.g. screen+camera or multiple-cameras) and get single stream.
JavaScript
414
star
8

Canvas-Designer

Collaborative, extendable, JavaScript Canvas2D drawing tool, supports dozens of builtin tools, as well as generates JavaScript code for 2D animations.
JavaScript
359
star
9

RTCMultiConnection-Server

RTCMultiConnection socket.io server (npm install rtcmulticonnection-server)
JavaScript
266
star
10

getStats

getStats is a tiny JavaScript library using WebRTC getStats API to return peer connection stats i.e. bandwidth usage, packets lost, local/remote ip addresses and ports, type of connection etc.
JavaScript
256
star
11

Translator

Translator.js is a JavaScript library built top on Google Speech-Recognition & Translation API to transcript and translate voice and text. It supports many locales and brings globalization in WebRTC! https://www.webrtc-experiment.com/Translator/
HTML
126
star
12

FileBufferReader

FileBufferReader is a JavaScript library reads file and returns chunkified array-buffers. The resulting buffers can be shared using WebRTC data channels or socket.io.
JavaScript
66
star
13

getScreenId

getScreenId | Capture Screen on Any Domain! This script is a hack used to support single chrome extension usage on any HTTPs domain.
HTML
63
star
14

MultiRTC

A skype-like RTCMultiConnection demo application.
JavaScript
62
star
15

DataChannel

DataChannel.js is a JavaScript library useful to write many-to-many i.e. group file/data sharing or text chat applications. Its syntax is easier to use and understand. It highly simplifies complex tasks like any or all user rejection/ejection; direct messages delivery; and more.
JavaScript
58
star
16

Conversation.js

Conversation.js is inspired by skype; and it provides simple events-like API to manage conversations, enable/disable media devices; add/download files; and do anything supported by Skype. It allows you open data conversation between two or more users using their user-ids.
JavaScript
49
star
17

Firefox-Extensions

(discontinued) Firefox extension API are used to enable screen capturing flag for your own domains!
JavaScript
45
star
18

WebSync-Signaling

WebSync is used as signaling gateway with/for WebRTC-Experiments e.g. RTCMultiConnection.js, DataChannel.js, Plugin-free screen sharing, and video conferencing.
JavaScript
43
star
19

ConcatenateBlobs

Simply pass array of blobs. This javascript library will concatenate all blobs in single Blob object.
HTML
40
star
20

WebRTC-ASPNET-MVC

A simple WebRTC one-to-one demo written in September, 2012! It supports public rooms as well as password-protected private rooms! MS-SQL database is used as signaling gateway!
JavaScript
38
star
21

XHR-Signaling

XHR/XMLHttpRequest based WebRTC signaling implementation.
C#
37
star
22

Reliable-Signaler

A reliable socketlio/node.js based signaling implementation for DataChannel.js, RTCMultiConnection.js and WebRTC Experiments.
JavaScript
32
star
23

RTCMultiConnection-SignalR

SignalR project for RTCMultiConnection
JavaScript
21
star
24

Everything

Everything from Muaz Khan — HTML5, CSS3, JavaScript, WebRTC, WebGL, Canvas2D, SVG, etc.
JavaScript
18
star
25

Curvature

Curvature is a tool lets you design bezier curves using Canvas 2d APIs!
JavaScript
17
star