Skip to content

Latest commit

 

History

History

meeting

Folders and files

NameName
Last commit message
Last commit date

parent directory

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

README.md

WebRTC Meeting i.e. Video-Conferencing / Demo

  1. Mesh networking model is implemented to open 1:1 multiple peer connections i.e. interconnected peer connections
  2. Maximum peer connections limit in mesh-networking is 256 (on chrome)

1:1 multiple is explained here: WebRTC RTP Usage

First Step: Link the library

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="https://cdn.webrtc-experiment.com/CodecsHandler.js"></script>
<script src="https://cdn.webrtc-experiment.com/IceServersHandler.js"></script>
<script src="https://cdn.webrtc-experiment.com/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('meeting room name');

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

You can use check method like this:

document.getElementById('join-meeting').onclick = function() {
    meeting.check('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';

More details here: https://github.com/muaz-khan/WebRTC-Experiment/blob/master/Signaling.md

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.

Leave a meeting room

meeting.leave();

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 Meeting experiment works fine on following web-browsers:

Browser Support
Firefox All Releases
Google Chrome All Releases
Android Chrome/Firefox/Opera/Cordova/etc.
Safari version 11+ for both MacOSX and iOS10+
Edge version 16+

License

WebRTC Meeting is released under MIT licence . Copyright (c) Muaz Khan.