Skip to content

Latest commit

 

History

History
 
 

one-to-many-video-broadcasting

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 
index.html
index.html
 
 
meeting.js
meeting.js
 
 

README.md

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
    document.body.appendChild(e.video);
};

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

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')
        };
        meeting.meet(room);
    };
};

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);
};

=

onaddstream

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
    document.body.appendChild(e.video);
};

=

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

=

License

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