Switch branches/tags
Nothing to show
Find file History
muaz-khan meeting.js & screen.js fixed for Edge/Safari11/Firefox.
Other demos updated are:
1) RecordRTC.js
2) RTCMultiConnection.js
3) Canvas-Designer
4) Chrome-Extension (desktopCapture, p2p, and screen recoridng)
5) DetectRTC.js
6) getStats.js
7) getScreenId.js
8) MultiStreamsMixer.js
9) RTCMultiConnection-SignalR

and tons of other demos updated as well.
Latest commit 2352da4 May 12, 2018


WebRTC One-to-Many video-broadcasting / Demo

If 10 users join your broadcasted room, 40 RTP ports will be opened on your browser:

  1. 10 RTP ports for outgoing audio streams
  2. 10 RTP ports for outgoing video streams
  3. 10 RTP ports for incoming audio streams
  4. 10 RTP ports for incoming video streams


Difference between one-way broadcasting and one-to-many broadcasting

For 10 users session, in one-way broadcasting:

  1. 10 RTP ports for outgoing audio stream
  2. 10 RTP ports for outgoing video stream

i.e. total 20 outgoing RTP ports will be opened on your browser.

On each participant's side; only 2 incoming RTP ports will be opened.

Unlike one-way broadcasting; one-to-many broadcasting experiment opens both outgoing as well as incoming RTP ports for each participant.


First Step: Link the library

<script src="https://www.webrtc-experiment.com/one-to-many-video-broadcasting/meeting.js"></script>


Last Step: Start using it!

var meeting = new Meeting('meeting-unique-id');

// on getting local or remote streams
meeting.onaddstream = function(e) {
    // e.type == 'local' ---- it is local media stream
    // e.type == 'remote' --- it is remote media stream

// check pre-created meeting rooms
// it is useful to auto-join
// or search pre-created sessions

document.getElementById('setup-new-meeting').onclick = function() {
    meeting.setup('meeting room name');


Custom user-ids?

meeting.userid = 'username';


Custom signaling channel?

You can use each and every signaling channel:

  1. SIP-over-WebSockets
  2. WebSocket over Node.js/PHP/etc.
  3. Socket.io over Node.js/etc.
  4. XMPP/etc.
  5. XHR-POST-ing
meeting.openSignalingChannel = function(callback) {
    return io.connect().on('message', callback);

If you want to write socket.io over node.js; here is the server code:

io.sockets.on('connection', function (socket) {
    socket.on('message', function (data) {
        socket.broadcast.emit('message', data);

That's it! Isn't it easiest method ever!

Want to use Firebase for signaling?

// "chat" is your firebase id
meeting.firebase = 'chat';


Want to manually join rooms?

meeting.onmeeting = function(room) {
    var li = document.createElement('li');
    li.setAttribute('user-id', room.userid);
    li.setAttribute('room-id', room.roomid);
    li.onclick = function() {
        var room = {
            userid: this.getAttribute('user-id'),
            roomid: this.getAttribute('room-id')

onmeeting is called for each new meeting; and meet method allows you manually join a meeting room.


If someone leaves...

Participants' presence can be detected using onuserleft:

// if someone leaves; just remove his video
meeting.onuserleft = function(userid) {
    var video = document.getElementById(userid);
    if(video) video.parentNode.removeChild(video);



It is called both for local and remote media streams. It returns:

  1. video: i.e. HTMLVideoElement object
  2. stream: i.e. MediaStream object
  3. userid: i.e. id of the user stream coming from
  4. type: i.e. type of the stream e.g. local or remote
meeting.onaddstream = function(e) {
    // e.type == 'local' ---- it is local media stream
    // e.type == 'remote' --- it is remote media stream


Browser Support

This WebRTC One-to-Many video-broadcasting experiment works fine on following web-browsers:

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



WebRTC One-to-Many video-broadcasting is released under MIT licence . Copyright (c) 2013 Muaz Khan.