Giter Club home page Giter Club logo

webrtc-scalable-broadcast's Introduction

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.

webrtc-scalable-broadcast's People

Contributors

muaz-khan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

webrtc-scalable-broadcast's Issues

http to https in server.js?

Hi muza-khan,
server.js is based on http connection.
But chrome web-browsers and web-view in android requires https connection.
I tried server.js in node.js. But I'd like to how to setup a http to https connection(redirect?).
Thank you in-advance.

Chrome 48 and Audio

Hi

I just download last google Chrome v48
Do you think that bug of audio forward is now fixed ?

Thanks

Unable to run node server on https

Hello Sir i am trying your node server and it runs successfully on "HTTP" but when i change the protocol from http to https then it stops working.Actually i want to run this sample over the internet so i really want https to work So please get back to me Thanks!!

Cannot find module .node_moduleswebrtc-scalable-broadcastserver.js

I did install it with npm version 1.4.21:

cd /var/www/
npm install webrtc-scalable-broadcast

When I start

node .\node_modules\webrtc-scalable-broadcast\server.js

I get the error:

module.js:340
    throw err;
          ^
Error: Cannot find module '/var/www/.node_moduleswebrtc-scalable-broadcastserver.js'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:906:3

Do I have to install nodes v1.0.1?

Streaming Applications

Is it possible or going to be possible to use applications such as OBS for streaming? Or if not be able to manage the windows video or audio feeds? Is this a feature that is in the works? If so what kind of work will need to be done to integrate it?

screen sharing play

hello

i can do screensharing from windows machine and play those screen shared broadcasting in android is it possible ?

as i did try but getting error not able to play is there anyway ? in mobile chrome browser working and playing fine but in android apk not working even your demo also not work is there way to working ?

How server works

I would like someone to explain to me how the server works? I want to rewrite it in PHP because it does not know anything about nodejs ..

why could not trigger leave event when webrtc-scalable broadcast webpage is closed

hi expert muaz,
i test webrtc-scalable-broadcast,if find some bugs in 20# and 21# post question.i try to resolve it.but i don't know why could not trigger leave event when webrtc-scalable broadcast webpage is closed.i can see numberOfConnectedUsers++ when user enter room,but could not run numberOfConnectedUsers-- when leaving in RTCmutilconnection.js.how could i revised it.could you give me a lead? thanks very much.

bug report of webrtc-scalable-broadcast

hi,nice muaz-khan
i find a bug in share-files.html or maybe in rtcmulticonnection.js.
i make a connect network like this at first:
peer 1<--peer 2<--peer 3
peer2 request file from peer1
peer3 request file from peer2
then i close peer 3
at this time,i transfer png file from peer1 to peer2.but the peer2 could not show the png image,only show 100% with the progressbar.

also,i do many similar experiments to test it,it is same on different connect network.
i trace the code,and find the bugs in share-files.html:

...
        var div = helper.div;
        if (file.type.indexOf('image') != -1) {
            div.innerHTML = '<a href="' + file.url + '" download="' + file.name + '">Download <strong style="color:red;">' + file.name + '</strong> </a><br /><img src="' + file.url + '" title="' + file.name + '" style="max-width: 80%;">';
        } else if (file.type.indexOf('video/') != -1) {
            div.innerHTML = '<a href="' + file.url + '" download="' + file.name + '">Download <strong style="color:red;">' + file.name + '</strong> </a><br /><video src="' + file.url + '" title="' + file.name + '" style="max-width: 80%;" controls></video>';
        } else if (file.type.indexOf('audio/') != -1) {
            div.innerHTML = '<a href="' + file.url + '" download="' + file.name + '">Download <strong style="color:red;">' + file.name + '</strong> </a><br /><audio src="' + file.url + '" title="' + file.name + '" style="max-width: 80%;" controls></audio>';
        } else {
            div.innerHTML = '<a href="' + file.url + '" download="' + file.name + '">Download <strong style="color:red;">' + file.name + '</strong> </a><br /><iframe src="' + file.url + '" title="' + file.name + '" style="width: 80%;border: 0;height: inherit;margin-top:1em;"></iframe>';
        }

        if(connection.broadcastingConnection && connection.broadcastingConnection.numberOfConnectedUsers > 0) {
             connection.broadcastingConnection.send(file);
        }
...

if i close peer3,the connection.broadcastingConnection.numberOfConnectedUsers has not decreased 1,so in fact,the real connection.broadcastingConnection.numberOfConnectedUsers is 0 but your code here connection.broadcastingConnection.numberOfConnectedUsers is still 1.it is not correct.
so the bugs happen.
i don't know how to rectify it.could you help to remove the bugs?
by the way,i do the experiment on three tab of firefox.i have only one PC.i dont know whether the bugs will happen when i do the same experiment on three PC.
could you give me some ideas?thanks

Hi,why i could not see video/screen/audio using webrtc-scalable-broadcast

hi,expert,
i test demos of webrtc-scalable-broadcast on my server,i only can see the joined message or stream message from node server console.but i cant see the video/screen/audio in joined terminal browser.what is the setting of webrtc-scalable-broadcast for broadcast my video/screen/audio?could you give me a suggestion?thanks

Does this still work when participants are using mobile devices?

Here's my use case. I want to be able to listen to a presentation on one connection and provide real-time interpretation into a different language on a second connection. It's crucial that I keep bandwidth to an absolute minimum, because there could be many listeners -- but also because the listeners might be in the same venue as the speaker, sharing a single wi-fi connection. One-way, audio-only broadcast is the obvious way to go. The part I don't understand is whether the scaling will work directly, device-to-device.

Edit: Oops, I see now that it says "Android devices not tested." I would be happy to help test, if you give me detailed instructions.

how can i control which peer will be selected for a new joined partner.

hi,expert
which peer will be selected by later joined partner in this Scalable Broadcast sample.is the connectivity network graph like a single line or like graph in your sample
how can i control which peer will be selected for a new joined partner.
if i want the new joined partner connect only PC peer.how to revise the sample code.

another question,if the connectivity network graph like graph in your sample.
,peer 2 is broken,then peer 5,6,7,8 will also be broken.how to resolve the problem?
thanks.

server stops when browser access localhost:8888

I start server.js and and a console message is printed:
info - socket.io started
However when I access http://localhost:8888 in the browser an error occurs and the server stops.
with the following log:
C:\Users\Fernando\Dropbox\www\aaa\node_modules\webrtc-scalable-broadcast\server.js:12
path.exists(filename, function (exists) {
^
TypeError: undefined is not a function
at Server. (C:\Users\Fernando\Dropbox\www\aaa\node_modules\webrtc-scalable-broadcast\server.js:12:10)
at Manager.handleRequest (C:\Users\Fernando\Dropbox\www\aaa\node_modules\webrtc-scalable-broadcast\node_modules\socket.io\lib\manager.js:588:28)
at Server. (C:\Users\Fernando\Dropbox\www\aaa\node_modules\webrtc-scalable-broadcast\node_modules\socket.io\lib\manager.js:119:10)
at Server.emit (events.js:110:17)
at HTTPParser.parserOnIncoming as onIncoming
at HTTPParser.parserOnHeadersComplete (_http_common.js:111:23)
at Socket.socketOnData (_http_server.js:343:22)
at Socket.emit (events.js:107:17)
at readableAddChunk (_stream_readable.js:163:16)
at Socket.Readable.push (_stream_readable.js:126:10)

Maybe I am missing something?...

This used to work for me?

I was playing with your Scalable Broadcast back in May and it was kind of working. At least I was able to start a presenter and add viewers and actually see the video. But I stopped looking at it for various reasons. Now I am looking at v3. Or trying. I cannot get anything to work. After install, when I browse to "IP":9001 I get browser error on FireFox and Chrome...saying cannot access. Have I forgotten to install something? I have sent Muaz an email, but I know Muaz is very busy so if someone else can assist?

Thanks,

Ray

Multiple Broadcast Froze

I just started to look at WebRTC-Scalable-Broadcast. Initially I was skeptical of the concept but after thinking about it I figured I'd give it a try.

So I had the originator and 4 viewers up on my local LAN. Everything looked good. Lag was minimal.
However, after 10 minutes or so, all video froze. I have no idea why? I was browsing the internet for other reason and left the broadcast up. Where is the log file for this feature?

Oh, one more thing, once this happened, the camera light is still on. After doing another node server.js, nothing happens with the camera when I browse to IP:8888?

PS: I am very impressed with your work Muaz.
Thanks,
Ray

who teacher could give us a sample for screen+audio on firefox.

hi,our teacher,muaz
scaleable broadcast is a great job for us.i try my best to write my test code based on https://rtcmulticonnection.herokuapp.com/demos/Scalable-Broadcast.html for screen+audio funciton. i start from this sample,it is just because i want replace video stream with screen stream and i also want to save screen+audio stream to a webm file after stoping the streamming,it is similar with Scalable-Broadcast.html.i change
connection.session = {
audio: true,
video: true,
oneway: true
};
replace video:true with screen:true
and i could not get screen stream by firefox.
i am not familiar with webrtc.could any leader give me a sample for screen+audio.i am appreciated.
thanks

Select camera in android chrome

Hi

In chrome (android ) I can't select the camera of my phone.

Could you please add a button in order to switch front/rear camera?

regards
MaX

error:HTTPs i.e. SSL-based URI is mandatory to use screen capturing.

hi,muaz expert
i test WebRTC Scalable Broadcast in firefox browser.i select screen option.and when i joined,i get the error:
HTTPs i.e. SSL-based URI is mandatory to use screen capturing.
i think it means sample need https server.
then i revised the server.js.now i can use https.but i meet a new error
like these

navigator.mozGetUserMedia have been replaced by navigator.mediaDevices.getUserMedia RTCMultiConnection.js:3895:12
participant asked for availability RTCMultiConnection.js:2616:29
target user has no stream; it seems one-way streaming or data-only connection. RTCMultiConnection.js:3027:21
target user's SDP has? {
"OfferToReceiveVideo": false,
"OfferToReceiveAudio": false
} RTCMultiConnection.js:3038:1
accepting request from 1ifvblkl9eof20529 RTCMultiConnection.js:3060:13
sdp-constraints {
"OfferToReceiveAudio": false,
"OfferToReceiveVideo": false
} RTCMultiConnection.js:4207:1
optional-argument {
"optional": [
{
"DtlsSrtpKeyAgreement": true
},
{
"googImprovedWifiBwe": true
},
{
"googScreencastMinBitrate": 300
}
],
"mandatory": {}
} RTCMultiConnection.js:4221:1
rtc-configuration {
"iceServers": [
{
"url": "stun:stun.l.google.com:19302"
},
{
"url": "stun:stun.anyfirewall.com:3478"
},
{
"url": "turn:turn.bistri.com:80",
"credential": "homeo",
"username": "homeo"
},
{
"url": "turn:turn.anyfirewall.com:443?transport=tcp",
"credential": "webrtc",
"username": "webrtc"
}
],
"iceTransports": "all"
} RTCMultiConnection.js:4245:17
(getLocalDescription) peer createType is offer RTCMultiConnection.js:3956:17
RTCIceServer.url is deprecated! Use urls instead.
onSdpError: {}

what is wrong?
i think it is because i cant access google.com and other website showed above.but i cant change this.could expert give some advice to change my rtciceserver?
thanks

Problem when runnings under https

We built a ubuntu 14.04 server, and can run the demo on http on port 8888
but then get the warning that getUserMedia() needs to be secure.

We purchased an SSL certificate (GoDaddy TLS 1.2) and installed

Then we get website unexpectedly closed the connection.

In server.js I changed this line
var app = require('http').createServer(function (request, response)

to
var app = require('https').createServer(function (request, response)

and we get the error
ERR_SSL_VERSION_OR_CIPHER_MISMATCH

bug report of webrtc-scalable-broadcast

hi,expert
i find a bug in share-files.html or maybe in rtcmulticonnection.js.
i make a connect network like this at first:
peer 1<--peer 2<--peer 3
peer2 request file from peer1
peer3 request file from peer2
then i close peer 3
at this time,i transfer png file from peer1 to peer2.but the peer2 could not show the png image,only show 100% with the progressbar.

also,i do many similar experiments to test it,it is same on different connect network.
i trace the code,and find the bugs in share-files.html:

    ...
            var div = helper.div;
            if (file.type.indexOf('image') != -1) {
                div.innerHTML = '<a href="' + file.url + '" download="' + file.name + '">Download <strong style="color:red;">' + file.name + '</strong> </a><br /><img src="' + file.url + '" title="' + file.name + '" style="max-width: 80%;">';
            } else if (file.type.indexOf('video/') != -1) {
                div.innerHTML = '<a href="' + file.url + '" download="' + file.name + '">Download <strong style="color:red;">' + file.name + '</strong> </a><br /><video src="' + file.url + '" title="' + file.name + '" style="max-width: 80%;" controls></video>';
            } else if (file.type.indexOf('audio/') != -1) {
                div.innerHTML = '<a href="' + file.url + '" download="' + file.name + '">Download <strong style="color:red;">' + file.name + '</strong> </a><br /><audio src="' + file.url + '" title="' + file.name + '" style="max-width: 80%;" controls></audio>';
            } else {
                div.innerHTML = '<a href="' + file.url + '" download="' + file.name + '">Download <strong style="color:red;">' + file.name + '</strong> </a><br /><iframe src="' + file.url + '" title="' + file.name + '" style="width: 80%;border: 0;height: inherit;margin-top:1em;"></iframe>';
            }

-----------------------------------------------------------------------------------------------------
            if(connection.broadcastingConnection && connection.broadcastingConnection.numberOfConnectedUsers > 0) {
                 connection.broadcastingConnection.send(file);
            }
    ...

if i close peer3,the connection.broadcastingConnection.numberOfConnectedUsers has not decreased 1,so in fact,the real connection.broadcastingConnection.numberOfConnectedUsers is 0 but your code here connection.broadcastingConnection.numberOfConnectedUsers is still 1.it is not correct.
so the bugs happen.
i don't know how to rectify it.could you help to remove the bugs?
by the way,i do the experiment on three tab of firefox.i have only one PC.i dont know whether the bugs will happen when i do the same experiment on three PC.
could you give me some ideas?thanks

why this demo doesn't work on Chrome / IOS or Chrome / Android

Hi muaz,

I have deploy on my ubuntu server broadcast, It works perfectly on desktop.
But on mobile i can view broadcast on mobile (on Chrome / IOS or Chrome / Android).

Event, when i use chrome on ipad/galaxy, i can't view broadcast that create from desktop. PS: i've used
WebRTC Scalable Broadcast (https://rtcmulticonnection.herokuapp.com/demos/Scalable-Broadcast.html)

I hope you understand that i said and suggest me a solution to resolve it. I've read some solution from you, such as build hybrid app by phonegap or native app but how about the mobile app?

Thanks !

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.