Fetching contributors…
Cannot retrieve contributors at this time
executable file 277 lines (228 sloc) 10.6 KB
> Muaz Khan -
> MIT License -
> Documentation -
<!DOCTYPE html>
<html id="home" lang="en">
if(!location.hash.replace('#', '').length) {
location.href = location.href.split('#')[0] + '#' + (Math.random() * 100).toString().replace('.', '');
<title>Multi-Session Establishment 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;
width: 40%;
input {
border: 1px solid #d9d9d9;
border-radius: 1px;
font-size: 1em;
select {
border: 1px solid #d9d9d9;
border-radius: 1px;
height: 50px;
margin-left: 1em;
margin-right: -12px;
padding: 1.1em;
vertical-align: 6px;
p {
padding: 1em;
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<header style="text-align: center;">
<a href="" target="_blank">RTCMultiConnection</a> Multi-Session Establishment ®
<a href="" target="_blank">Muaz Khan</a>
<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>
<blockquote style="background: #f3b7b7;border: 5px solid black;border-radius: 5px; padding: 10px;">
This demo is <span style="border: 1px dotted red; background: yellow; padding: 2px 5px;">out-dated i.e. deprecated (written in 2013)</span>.
Please try other demos: <a href=""></a>
<section class="experiment">
<h2>Open Four Unique Sessions</h2>
<button id="init-RTCMultiConnection">Open Multiple Sessions</button>
<br />
<br />
<h2>Select and join a session:</h2>
<select id="join-channel">
<button id="join-RTCMultiConnection">Join Session</button>
<section id="connection-body"></section>
var videoconferencing = new RTCMultiConnection('video-conferencing');
var oneway = new RTCMultiConnection('oneway');
var audioconferencing = new RTCMultiConnection('audio-conferencing');
var audiooneway = new RTCMultiConnection('audio-oneway');
videoconferencing.openSignalingChannel =
oneway.openSignalingChannel =
audioconferencing.openSignalingChannel =
audiooneway.openSignalingChannel = function(config) {
var channel = || || 'default-namespace';
var sender = Math.round(Math.random() * 9999999999) + 9999999999;
io.connect(SIGNALING_SERVER).emit('new-channel', {
channel: channel,
sender: sender
var socket = io.connect(SIGNALING_SERVER + channel); = channel;
socket.on('connect', function() {
if (config.callback) config.callback(socket);
socket.send = function(message) {
socket.emit('message', {
sender: sender,
data: message
socket.on('message', config.onmessage);
videoconferencing.body = oneway.body = audioconferencing.body = audiooneway.body = document.getElementById('connection-body');
videoconferencing.session = {
audio: true,
video: true
oneway.session = {
audio: true,
video: true,
oneway: true
audioconferencing.session = {
audio: true
audiooneway.session = {
audio: true,
oneway: true
document.getElementById('init-RTCMultiConnection').onclick = function() {
this.disabled = true;{
captureUserMediaOnDemand: false,
onMediaCaptured: function() {
var videoStream = videoconferencing.attachStreams[0];
oneway.dontAttachStream = true;
var audioStream = constructAudioStream(videoStream);
audioconferencing.dontAttachStream = true;
audiooneway.dontAttachStream = true;
document.getElementById('join-RTCMultiConnection').onclick = function() {
this.disabled = true;
var joinChannel = document.getElementById('join-channel').value;
if ( == joinChannel) {
if ( == joinChannel) {
if ( == joinChannel) {
if ( == joinChannel) {
function constructAudioStream(mediaStream) {
var context = new AudioContext();
var mediaStreamSource = context.createMediaStreamSource(mediaStream);
var destination = context.createMediaStreamDestination();
<section class="experiment">
<h2>Why multi-sessions?</h2>
<li>Sometimes you want to one-way broadcast your video for users who have no-camera or no-microphone</li>
<li>You may want to allow audio-conferencing along with video-conferencing in the same session / same stream!</li>
<li>You may want to open one-to-one ports between main-peer and the server to record speech or to further broadcast the stream
<li>You may want to allow end-users to anonymously join/view main-video session or chatting room</li>
<li>You may want to open one-to-one private session between chairperson and CEO! — in the same session; same page!
There are
<strong>many other</strong> use-cases of multi-sessions.
<section style="border: 1px solid rgb(189, 189, 189); border-radius: .2em; margin: 1em 3em;">
<h2 id="feedback" style="border-bottom: 1px solid rgb(189, 189, 189); padding: .2em .4em;">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>
<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>window.useThisGithubPath = 'muaz-khan/RTCMultiConnection';</script>
<script src="" async></script>