forked from muaz-khan/WebRTC-Experiment
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
WebRTC 1-1 Audio/Video/Screen sharing demo updated.
https://github.com/muaz-khan/WebRTC-Experiment/tree/master/realtime-pluginfree-calls Demo: https://www.webrtc-experiment.com/calls/
- Loading branch information
Showing
46 changed files
with
2,412 additions
and
407 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,33 +1,53 @@ | ||
| #### Simple [MultiRTC](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/MultiRTC) app built using [RTCMultiConnection.js](http://www.RTCMultiConnection.org/docs/) / [Demo](https://www.webrtc-experiment.com/RTCMultiConnection/MultiRTC/) | ||
| ## MultiRTC / A Demo application for [RTCMultiConnection.js](http://www.RTCMultiConnection.org/docs/)! | ||
|
|
||
| Note: This MultiRTC demo is using firebase; but you can use any signaling gateway by changing JUST single method i.e. "openSignalingChannel": | ||
| 1. Source Code: https://github.com/muaz-khan/WebRTC-Experiment/tree/master/MultiRTC | ||
| 2. Demo: https://www.webrtc-experiment.com:12034/ | ||
| 3. RTCMultiConnection.js: http://www.RTCMultiConnection.org/docs/ | ||
|
|
||
| https://github.com/muaz-khan/WebRTC-Experiment/blob/master/Signaling.md | ||
| ## Note: | ||
|
|
||
| In the `ui.main.js` file; goto line 75. It is using firebase to [check presence](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/Signaling.md#room-presence-detection) of the room; you can easily use any other signaling implementation there. | ||
| This [MultiRTC demo](https://www.webrtc-experiment.com/RTCMultiConnection/MultiRTC/) is using firebase; but you can use any signaling gateway by changing JUST single method i.e. [`openSignalingChannel`](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/Signaling.md): | ||
|
|
||
| = | ||
| In the [`ui.main.js`](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/MultiRTC-simple/ui.main.js) file; go to [line 75](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/MultiRTC-simple/ui.main.js#L75). It is using firebase to [check presence](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/Signaling.md#room-presence-detection) of the room; you can easily use any other signaling implementation there. | ||
|
|
||
| ### How it works? | ||
|
|
||
| 1. It opens [WebRTC](https://www.webrtc-experiment.com/) data connection same like Skype! | ||
| 2. Multiple users can join same room; text chat and share multiple files concurrently! | ||
| 3. Choose your own URL! Users from one room can't access data or join users from other rooms. | ||
| 4. Anyone can add any media stream any-time! Whether it is screen; or audio/video. | ||
| 5. An advance settings section allows you customize many RTCMultiConnection features in one place! | ||
|
|
||
| It is an All-in-One solution for [RTCMultiConnection.js](http://www.RTCMultiConnection.org/docs/)! | ||
|
|
||
| <img src="https://www.webrtc-experiment.com/images/MultiRTC.gif" /> | ||
|
|
||
| MultiRTC is an all-in-one demo application using RTCMultiConnection.js library. MultiRTC supports: | ||
| <a href="https://nodei.co/npm/multirtc/"> | ||
| <img src="https://nodei.co/npm/multirtc.png"> | ||
| </a> | ||
|
|
||
| 1. Multi-File sharing among multiple users! | ||
| 2. Multi-screen sharing among multiple users; in multi-directions! | ||
| 3. Audio and/or Video among multiple users; in multi-directions! | ||
| ``` | ||
| // Dependencies: | ||
| // 1) socket.io (npm install socket.io) | ||
| // 2) node-static (npm install node-static) | ||
| MultiRTC supports many complex renegotiation scenarios so that you can open text chat, same like skype; then you can add/remove medias (audio/video/screen) any time in any direction! | ||
| npm install multirtc | ||
| MultiRTC currently targets maximum 8-users per conferencing room; however, it can setup about 256 connections. | ||
| // to run it! | ||
| cd node_modules/multirtc/ && node signaler.js | ||
| ``` | ||
|
|
||
| = | ||
| Now, both socket.io and HTTPs servers are running at port `12034`: | ||
|
|
||
| ``` | ||
| https://localhost:12034/ | ||
| 1. https://github.com/muaz-khan/WebRTC-Experiment/tree/master/MultiRTC | ||
| 2. https://www.webrtc-experiment.com:12034/ | ||
| 3. https://www.webrtc-experiment.com/RTCMultiConnection/MultiRTC/ | ||
| // or | ||
| var socket = io.connect('https://localhost:12034/'); | ||
| ``` | ||
|
|
||
| = | ||
|
|
||
| ##### License | ||
|
|
||
| [RTCMultiConnection.js](http://www.RTCMultiConnection.org/) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) [Muaz Khan](https://plus.google.com/+MuazKhan). | ||
| [RTCMultiConnection.js](http://www.RTCMultiConnection.org/) WebRTC Library is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) [Muaz Khan](https://plus.google.com/+MuazKhan). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| { | ||
| "name": "multirtc", | ||
| "preferGlobal": true, | ||
| "version": "5.5.5", | ||
| "version": "5.6.7", | ||
| "author": { | ||
| "name": "Muaz Khan", | ||
| "email": "[email protected]" | ||
|
|
@@ -60,6 +60,6 @@ | |
| "url": "https://github.com/muaz-khan/WebRTC-Experiment/issues" | ||
| }, | ||
| "homepage": "http://www.RTCMultiConnection.org/", | ||
| "_id": "multirtc@5.5.5", | ||
| "_id": "multirtc@5.6.7", | ||
| "_from": "multirtc@" | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -53,6 +53,12 @@ | |
|
|
||
| <body onload="sh_highlightDocument();"> | ||
| <article> | ||
| <a href="https://github.com/muaz-khan/WebRTC-Experiment/blob/master/Signaling.md" style="position: fixed;bottom: 0;right: 0;display: block;width: 18%;"> | ||
| <img src="http://www.RTCMultiConnection.org/img/RTCMultiConnection-Logo.png" alt="RTCMultiConnection Log" style="width: 100%;border-top-left-radius: 30%;border: 1px solid red;"> | ||
| </a> | ||
|
|
||
| <div class="github-stargazers"></div> | ||
|
|
||
| <a href="http://www.RTCMultiConnection.org/" style="border-bottom: 1px solid #2844FA; font-size: 1.2em; position: absolute; text-decoration: none;right:0;top:0;">www.RTCMultiConnection.org</a> | ||
|
|
||
| <h1><a href="http://www.RTCMultiConnection.org/">RTCMultiConnection</a> FAQ / <a href="http://www.rtcmulticonnection.org/docs/">Documentation</a></h1> | ||
|
|
@@ -65,6 +71,61 @@ <h1><a href="http://www.RTCMultiConnection.org/">RTCMultiConnection</a> FAQ / <a | |
| <li> | ||
| <a href="http://www.RTCMultiConnection.org/docs/">RTCMultiConnection</a>'s signaling portion heavily relies on "<strong>channels</strong>"; A channel is a simple partitioning process for the connected clients. | ||
| </li> | ||
|
|
||
| <li id="RTCMultiConnection-Signaling"> | ||
| <h2>RTCMultiConnection Signaling Concepts:</h2> | ||
| <div class="image-container"> | ||
| <div class="image-parent"> | ||
| <a href="http://www.rtcmulticonnection.org/img/RTCMultiConnection-Signaling.svg"> | ||
| <img src="http://www.rtcmulticonnection.org/img/RTCMultiConnection-Signaling.svg"> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </li> | ||
|
|
||
| <li id="RTCMultiConnection-public-API-call-flow"> | ||
| <h2>RTCMultiConnection Public-API Call Flow Diagram:</h2> | ||
| <div class="image-container"> | ||
| <div class="image-parent"> | ||
| <a href="http://www.rtcmulticonnection.org/img/RTCMultiConnection-public-API-call-flow.svg"> | ||
| <img src="http://www.rtcmulticonnection.org/img/RTCMultiConnection-public-API-call-flow.svg"> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </li> | ||
|
|
||
| <li id="RTCMultiConnection-Modules-Diagram"> | ||
| <h2>RTCMultiConnection Modules Diagram:</h2> | ||
| <div class="image-container"> | ||
| <div class="image-parent"> | ||
| <a href="http://www.rtcmulticonnection.org/img/RTCMultiConnection-Modules-Diagram.svg"> | ||
| <img src="http://www.rtcmulticonnection.org/img/RTCMultiConnection-Modules-Diagram.svg"> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </li> | ||
|
|
||
| <li id="RTCMultiConnection-Structure"> | ||
| <h2>RTCMultiConnection Structure:</h2> | ||
| <div class="image-container"> | ||
| <div class="image-parent"> | ||
| <a href="http://www.rtcmulticonnection.org/img/RTCMultiConnection-Structure.png"> | ||
| <img src="http://www.rtcmulticonnection.org/img/RTCMultiConnection-Structure.png"> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </li> | ||
|
|
||
| <li id="RTCMultiConnection-Call-Flow-Diagram"> | ||
| <h2>RTCMultiConnection Call Flow Diagram:</h2> | ||
| <div class="image-container"> | ||
| <div class="image-parent"> | ||
| <a href="http://www.rtcmulticonnection.org/img/RTCMultiConnection-Call-Flow-Diagram.png"> | ||
| <img src="http://www.rtcmulticonnection.org/img/RTCMultiConnection-Call-Flow-Diagram.png"> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </li> | ||
|
|
||
| <li> | ||
| A channel is a signaling room contains two or more connected clients; data travels privately inside the room; which gives us flexibility in transmission and simplicity in management. | ||
|
|
@@ -396,6 +457,9 @@ <h2>How to handle "<strong>onNewSession</strong>" event?</h2> | |
| }; | ||
| </pre> | ||
| </li> | ||
|
|
||
|
|
||
|
|
||
| </ol> | ||
|
|
||
| <h2>Useful Links:</h2> | ||
|
|
@@ -423,6 +487,6 @@ <h2 id="feedback" style="padding: .2em .4em; border-bottom: 1px solid rgb(189, 1 | |
| <a href="mailto:[email protected]" target="_blank">Muaz Khan</a>: | ||
| <a href="https://twitter.com/WebRTCWeb" target="_blank">@WebRTCWeb</a> | ||
| </footer> | ||
| <script src="//www.webrtc-experiment.com/common.js"> </script> | ||
| <script src="//www.webrtc-experiment.com/commits.js"> </script> | ||
| </body> | ||
| </html> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -54,13 +54,43 @@ | |
| <article> | ||
| <a href="http://www.RTCMultiConnection.org/" style="border-bottom: 1px solid #2844FA; font-size: 1.2em; position: absolute; right: 0; text-decoration: none; top: 0;">↑ www.RTCMultiConnection.org</a> | ||
|
|
||
| <div class="github-stargazers"></div> | ||
| <h1><a href="http://www.RTCMultiConnection.org/docs/">RTCMultiConnection</a> Changes Log ----/ <a href="http://www.RTCMultiConnection.org/docs/">Docs</a> | <a href="http://www.RTCMultiConnection.org/FAQ/">FAQ</a> | <a href="https://www.webrtc-experiment.com:12034/">Demo: MultiRTC!</a></h1> | ||
|
|
||
| <br /><br /><br /> | ||
|
|
||
| <h2 id="v1.7"><a href="http://www.rtcmulticonnection.org/changes-log/#v1.7">v1.7</a> / Work-in-Progress!</h2> | ||
| <h2 id="v1.7"><a href="http://www.rtcmulticonnection.org/changes-log/#v1.7">v1.7</a> / Beta will be released at March 23, 2014!</h2> | ||
|
|
||
| <ol> | ||
| <li> | ||
| v1.7 is available for early testers: | ||
| <pre class="sh_javascript"> | ||
| https://www.webrtc-experiment.com/RTCMultiConnection-v1.7.js | ||
| </pre> | ||
| </li> | ||
|
|
||
| <li> | ||
| "<a href="http://www.rtcmulticonnection.org/docs/shareMediaFile/">shareMediaFile</a>" and "<a href="http://www.rtcmulticonnection.org/docs/onMediaFile/">onMediaFile</a>" added. (i.e. pre-recorded media support added): | ||
| <pre class="sh_javascript"> | ||
| // select WebM file to share as pre-recorded media! | ||
| document.querySelector('input[type=file]').onchange = function() { | ||
| connection.<a href="http://www.rtcmulticonnection.org/docs/shareMediaFile/">shareMediaFile</a>( this.files[0] ); | ||
| }; | ||
|
|
||
| // receive WebM files | ||
| connection.<a href="http://www.RTCMultiConnection.org/docs/onMediaFile/">onMediaFile</a> = function(e) { | ||
| // e.mediaElement (it is video-element) | ||
| // e.userid | ||
| // e.extra | ||
|
|
||
| yourExistingVideoElement.src = e.mediaElement.src; | ||
|
|
||
| // or | ||
| document.body.appendChild(e.mediaElement); | ||
| }; | ||
| </pre> | ||
| </li> | ||
|
|
||
| <li> | ||
| Mute/UnMute and "onstreamended" among multiple users, issues fixed. | ||
| </li> | ||
|
|
@@ -785,6 +815,6 @@ <h2 id="feedback" style="border-bottom: 1px solid rgb(189, 189, 189); padding: . | |
| <a href="mailto:[email protected]" target="_blank">Muaz Khan</a>: | ||
| <a href="https://twitter.com/WebRTCWeb" target="_blank">@WebRTCWeb</a> | ||
| </footer> | ||
| <script src="//www.webrtc-experiment.com/common.js"> </script> | ||
| <script src="//www.webrtc-experiment.com/commits.js"> </script> | ||
| </body> | ||
| </html> | ||
Oops, something went wrong.