RTCMultiConnection Demos

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

Last Updated On:

WebRTC Library npm downloads Build Status: Linux

Wiki Pages / Documentation / FAQ / Demos / Changes Log

# v3.0 is highly recommended to users
# who can afford node.js on their servers!
# it is many times reliable comparing v2.2.2 and earlier

npm install rtcmulticonnection

Latest version v3.0 is preferred over v2.2.2

Quick-Demos for newbies:

  1. Simplest: https://jsfiddle.net/zar6fg60/
  2. A little bit advance but simple: https://jsfiddle.net/c46de0L8/
Demos Demos Getting-Started Getting Started Documentation Documentation Changes Log Changes Log FAQ FAQ

RTCMultiConnection is a WebRTC JavaScript wrapper library runs top over RTCPeerConnection API to provide multi-session establishment scenarios. It also provides dozens of features as hybrid-less mesh networking model, a reliable presence detection and syncing system; complex renegotiation scenarios; and much more. It provides everything you've in your mind! Just understand the API and you'll enjoy using it! It is simple and its syntax is similar as WebSockets JavaScript API and RTCPeerConnection API.

It is MIT Licenced, which means that you can use it in any commercial/non-commercial product, free of cost.

Wiki Pages

bower install rtcmulticonnection

# or NPM!
npm install rtcmulticonnection

To use it:

<script src="./node_modules/rtcmulticonnection/RTCMultiConnection.js"></script>

There are some other NPM packages regarding RTCMultiConnection:

1. Link The Library

https://cdn.webrtc-experiment.com/RTCMultiConnection.js

2. Common Code

var MODERATOR_CHANNEL_ID = 'ABCDEF'; // channel-id
var MODERATOR_SESSION_ID = 'XYZ';    // room-id
var MODERATOR_ID         = 'JKL';    // user-id
var MODERATOR_SESSION    = {         // media-type
    audio: true,
    video: true
};
var MODERATOR_EXTRA      = {};       // empty extra-data

3. Code for Room Moderator (i.e. Initiator)

var moderator     = new RTCMultiConnection(MODERATOR_CHANNEL_ID);
moderator.session = MODERATOR_SESSION;
moderator.userid  = MODERATOR_ID;
moderator.extra   = MODERATOR_EXTRA;
moderator.open({
    dontTransmit: true,
    sessionid   : MODERATOR_SESSION_ID
});

4. Code for Room Participants

var participants = new RTCMultiConnection(MODERATOR_CHANNEL_ID);
participants.join({
    sessionid: MODERATOR_SESSION_ID,
    userid   : MODERATOR_ID,
    extra    : MODERATOR_EXTRA,
    session  : MODERATOR_SESSION
});

5. (optional) Handle how to get streams

// same code can be used for participants
// (it is optional) 
moderator.onstreamid = function(event) {
    // got a clue of incoming remote stream
    // didn't get remote stream yet

    var incoming_stream_id = event.streamid;

    YOUR_PREVIEW_IMAGE.show();

    // or
    YOUR_PREVIEW_VIDEO.show();
};

// same code can be used for participants
// it is useful
moderator.onstream = function(event) {
    // got local or remote stream
    // if(event.type == 'local')  {}
    // if(event.type == 'remote') {}

    document.body.appendChild(event.mediaElement);

    // or YOUR_VIDEO.src = event.blobURL;
    // or YOUR_VIDEO.src = URL.createObjectURL(event.stream);
};

// same code can be used for participants
// it is useful but optional
moderator.onstreamended = function(event) {
    event.mediaElement.parentNode.removeChild(event.mediaElement);
};

Simplest Demo

<hr /><button id="openRoom">Open Room</button>
      <button id="joinRoom">Join Room</button><hr />
<script src="https://cdn.webrtc-experiment.com/RTCMultiConnection.js"> </script>
<script>
document.getElementById('openRoom').onclick = function() {
    (new RTCMultiConnection).open();
};
document.getElementById('joinRoom').onclick = function() {
    (new RTCMultiConnection).connect();
};
</script>

RTCMultiConnection v2.2.2 Demos

Experiment Name Demo Source Code
AppRTC like RTCMultiConnection demo! Demo Source
MultiRTC! RTCMultiConnection all-in-one demo! Demo Source
Collaborative Canvas Designer Demo Source
Conversation.js - Skype like library Demo Source
All-in-One test Demo Source
Multi-Broadcasters and Many Viewers Demo Source
Select Broadcaster at runtime Demo Source
OneWay Screen & Two-Way Audio Demo Source
Stream Mp3 Live Demo Source
Socket.io auto Open/Join rooms Demo Source
Screen Sharing & Cropping Demo Source
Share Part of Screen without cropping it Demo Source
getMediaDevices/enumerateDevices Demo Source
Renegotiation & Mute/UnMute/Stop Demo Source
Video-Conferencing Demo Source
Video Broadcasting Demo Source
Many-to-One Broadcast Demo Source
Audio Conferencing Demo Source
Multi-streams attachment Demo Source
Admin/Guest audio/video calling Demo Source
Session Re-initiation Test Demo Source
Preview Screenshot of the room Demo Source
RecordRTC & RTCMultiConnection Demo Source
Explains how to customize ice servers; and resolutions Demo Source
Mute/Unmute and onmute/onunmute Demo Source
One-page demo: Explains how to skip external signalling gateways Demo Source
Password Protect Rooms: Explains how to authenticate users Demo Source
Session Management: Explains difference between "leave" and "close" methods Demo Source
Multi-Sessions Management Demo Source
Customizing Bandwidth Demo Source
Users ejection and presence detection Demo Source
Multi-Session Establishment Demo Source
Group File Sharing + Text Chat Demo Source
Audio Conferencing + File Sharing + Text Chat Demo Source
Join with/without camera Demo Source
Screen Sharing Demo Source
One-to-One file sharing Demo Source
Manual session establishment + extra data transmission Demo Source
Manual session establishment + extra data transmission + video conferencing Demo Source
takeSnapshot i.e. Take Snapshot of Local/Remote streams Demo Source
Audio/Video/Screen sharing and recording Demo Source
Broadcast Multiple-Cameras Demo Source
Remote Stream Forwarding Demo Source
WebRTC Scalable Broadcast Socketio/Nodejs Source

v2.2.2 is available here:

Credits & Contributors

Related Projects

If you've additional plugins, you can update this list.

License

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

Latest Updates

Latest Issues

Feedback

Enter your email too; if you want "direct" reply!