WebRTC One-to-Many Video-Broadcasting / Source Code

HOME © Muaz Khan . @WebRTCWeb . Github . Latest issues . What's New?

Setup a new meeting:

Local Media Stream

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.

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

// custom signaling channel
// you can use each and every signaling channel
// any websocket, socket.io, or XHR implementation
// any SIP server
// anything! etc.
meeting.openSignalingChannel = function(callback) {
    return io.connect().on('message', callback);

// 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');

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