1f6e036 Jan 7, 2016
executable file 219 lines (191 sloc) 8.37 KB
> Muaz Khan -
> MIT License -
> Documentation -
<!DOCTYPE html>
<html lang="en">
<title>Multi-Broadcasters and Many Viewers using RTCMultiConnection ® Muaz Khan</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="author" type="text/html" href="">
<meta name="author" content="Muaz Khan">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="//">
video {
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
-webkit-transition: all 1s ease;
transition: all 1s ease;
vertical-align: top;
input {
border: 1px solid #d9d9d9;
border-radius: 1px;
font-size: 2em;
margin: .2em;
width: 20%;
.setup {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
font-size: 102%;
height: 47px;
margin-left: -9px;
margin-top: 8px;
position: absolute;
p {
padding: 1em;
li {
border-bottom: 1px solid rgb(189, 189, 189);
border-left: 1px solid rgb(189, 189, 189);
padding: .5em;
<!-- scripts used for WebRTC connections -->
<script src="//"></script>
<script src="//"></script>
<header style="text-align: center;">
<h1>Multi-Broadcasters and Many Viewers using <a href="">RTCMultiConnection.js</a>!</h1>
<a href="">HOME</a>
<span> &copy; </span>
<a href="" target="_blank">Muaz Khan</a> .
<a href="" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a> .
<a href="" target="_blank" title="Github Profile">Github</a> .
<a href="" target="_blank">Latest issues</a> .
<a href="" target="_blank">What's New?</a>
<div class="github-stargazers"></div>
<!-- just copy this <section> and next script -->
<section class="experiment">
<h2>Your Role?</h2>
<br />
<br />
<option>Anonymous Viewer</option>
<option>Room Moderator</option>
<br />
<div id="videos"></div>
<section class="experiment">
<h2>How it works?</h2>
<li>There can be random number of broadcasters.</li>
<li>All broadcasters will be interconnected!</li>
<li>All broadcasters can see/talk with each other!</li>
<li>There can be random number of anonymous viewers.</li>
<li>All viewers can watch/listen videos from all broadcasters!</li>
<h2>Real-life scenarios?</h2>
<li>5 CEOs can setup a presentation with many employees!</li>
<li>5 Teachers can teach many students in the same room!</li>
<li>Two ore more doctors can inspect two or more patients while LIVE teaching many students!</li>
<h2>How to use it?</h2>
<li>1st Tab: There MUST always be a room-moderator. Select "Room Moderator" and click "continue".</li>
<li>2nd Tab: Select "Anonymous Viewer" if you want to anonymously watch/listen all videos.</li>
<li>3rd Tab: Select "Broadcaster" if you want to setup two-way or multi-directional video chat with all other broadcasters.</li>
var select = document.querySelector('select');
var button = document.querySelector('button');
var videos = document.querySelector('#videos');
button.onclick = function() {
this.disabled = true;
var role = select.value;
window.connection = new RTCMultiConnection();
// dont-override-session allows you force RTCMultiConnection
// to not override default session of participants;
// by default, session is always overridden and set to the session coming from initiator!
connection.dontOverrideSession = true;
connection.session = {
audio: true,
video: true,
oneway: role == 'Anonymous Viewer'
connection.onstream = function(e) {
if (e.type == 'remote') {
// because "viewer" joined room as "oneway:true"
// initiator will NEVER share participants
// to manually ask for participants;
// call "askToShareParticipants" method.
// if you're moderator
// if stream-type is 'remote'
// if target user is broadcaster!
if (connection.isInitiator && e.type == 'remote' && !e.session.oneway) {
// call "shareParticipants" to manually share participants with all connected users!
dontShareWith: e.userid
connection.onNewSession = function(session) {
if (role == 'Anonymous Viewer') {
oneway: true
if (role == 'Broadcaster') {
if (role == 'Room Moderator'){
captureUserMediaOnDemand: false
<section class="experiment">
<h2 class="header" id="feedback">Feedback</h2>
<textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
<button id="send-message" style="font-size: 1em;">Send Message</button>
<small style="margin-left: 1em;">Enter your email too; if you want "direct" reply!</small>
<section class="experiment own-widgets latest-commits">
<h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="" target="_blank">Latest Updates</a>
<div id="github-commits"></div>
<a href="" class="fork-left"></a>
<a href="" target="_blank">WebRTC Experiments!</a> and
<a href="" target="_blank">RTCMultiConnection.js</a> ©
<a href="" target="_blank">Muaz Khan</a>:
<a href="" target="_blank">@WebRTCWeb</a>
<!-- commits.js is useless for you! -->
<script src="//" async>