Giter VIP home page Giter VIP logo

nvdnkpr / rtcmulticonnection Goto Github PK

View Code? Open in Web Editor NEW

This project forked from muaz-khan/rtcmulticonnection

0.0 2.0 0.0 1.24 MB

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.

Home Page: http://www.rtcmulticonnection.org/

rtcmulticonnection's Introduction

/ Wiki Pages / Documentation / FAQ

WebRTC Library npm downloads

Quick-Demos for newbies:

  1. http://jsfiddle.net/zar6fg60/ (simplest)
  2. http://jsfiddle.net/c46de0L8/ (simple)

Changes log for current version: http://www.rtcmulticonnection.org/changes-log/#v2.0

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.

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

// latest file
https://cdn.webrtc-experiment.com/RTCMultiConnection-v2.2.0.js

// or a little bit more stable version: (v2.*.*)
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);
};
<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>
    <td>
        <a href="http://www.rtcmulticonnection.org/docs/getting-started/" target="_blank">
            <img src="https://www.rtcmulticonnection.org/img/getting-started.png" style="display:block; width:99px; height99px;" alt="Getting-Started">
            Getting Started
        </a>
    </td>
    
    <td>
        <a href="http://www.rtcmulticonnection.org/docs/" target="_blank">
            <img src="https://www.rtcmulticonnection.org/img/documentation.png" style="display:block; width:99px; height99px;" alt="Documentation">
            Documentation
        </a>
    </td>
    
    <td>
        <a href="http://www.rtcmulticonnection.org/changes-log/" target="_blank">
            <img src="https://www.rtcmulticonnection.org/img/whats-new.png" style="display:block; width:99px; height99px;" alt="Changes Log">
            Changes Log
        </a>
    </td>
    
    <td>
        <a href="http://www.rtcmulticonnection.org/FAQ/" target="_blank">
            <img src="https://www.rtcmulticonnection.org/img/FAQ.png" style="display:block; width:99px; height99px;" alt="FAQ">
            FAQ
        </a>
    </td>
</tr>
Demos Demos

Demos using RTCMultiConnection

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
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

Credits

Muaz Khan:

  1. Personal Webpage: http://www.muazkhan.com
  2. Email: [email protected]
  3. Twitter: https://twitter.com/muazkh and https://twitter.com/WebRTCWeb
  4. Google+: https://plus.google.com/+WebRTC-Experiment
  5. Facebook: https://www.facebook.com/WebRTC

License

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.