Permalink
Fetching contributors…
Cannot retrieve contributors at this time
executable file 277 lines (228 sloc) 10.6 KB
<!--
> Muaz Khan - github.com/muaz-khan
> MIT License - www.webrtc-experiment.com/licence
> Documentation - www.RTCMultiConnection.org
-->
<!DOCTYPE html>
<html id="home" lang="en">
<head>
<script>
if(!location.hash.replace('#', '').length) {
location.href = location.href.split('#')[0] + '#' + (Math.random() * 100).toString().replace('.', '');
location.reload();
}
</script>
<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="https://plus.google.com/+MuazKhan">
<meta name="author" content="Muaz Khan">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="https://cdn.webrtc-experiment.com/style.css">
<style>
audio,
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;
}
</style>
<script>
document.createElement('article');
document.createElement('footer');
</script>
<script src="https://cdn.webrtc-experiment.com/socket.io.js"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="https://cdn.webrtc-experiment.com/CodecsHandler.js"></script>
<script src="https://cdn.webrtc-experiment.com/IceServersHandler.js"></script>
<script src="https://cdn.webrtc-experiment.com/RTCMultiConnection.js"></script>
</head>
<body>
<article>
<header style="text-align: center;">
<h1>
<a href="http://www.RTCMultiConnection.org/docs/" target="_blank">RTCMultiConnection</a> Multi-Session Establishment ®
<a href="https://github.com/muaz-khan" target="_blank">Muaz Khan</a>
</h1>
<p>
<a href="https://www.webrtc-experiment.com/">HOME</a>
<span> &copy; </span>
<a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a> .
<a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a> .
<a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a> .
<a href="https://github.com/muaz-khan/WebRTC-Experiment/issues?state=open" target="_blank">Latest issues</a> .
<a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">What's New?</a>
</p>
</header>
<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>.
<br><br>
Please try other demos: <a href="https://github.com/muaz-khan/RTCMultiConnection">https://github.com/muaz-khan/RTCMultiConnection</a>
</blockquote>
<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">
<option>video-conferencing</option>
<option>oneway</option>
<option>audio-conferencing</option>
<option>audio-oneway</option>
</select>
<button id="join-RTCMultiConnection">Join Session</button>
<section id="connection-body"></section>
</section>
<script>
var videoconferencing = new RTCMultiConnection('video-conferencing');
var oneway = new RTCMultiConnection('oneway');
var audioconferencing = new RTCMultiConnection('audio-conferencing');
var audiooneway = new RTCMultiConnection('audio-oneway');
// https://github.com/muaz-khan/WebRTC-Experiment/tree/master/socketio-over-nodejs
var SIGNALING_SERVER = 'https://socketio-over-nodejs2.herokuapp.com:443/';
videoconferencing.openSignalingChannel =
oneway.openSignalingChannel =
audioconferencing.openSignalingChannel =
audiooneway.openSignalingChannel = function(config) {
var channel = config.channel || this.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);
socket.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;
videoconferencing.open({
captureUserMediaOnDemand: false,
onMediaCaptured: function() {
var videoStream = videoconferencing.attachStreams[0];
oneway.dontAttachStream = true;
oneway.attachStreams.push(videoStream);
oneway.open();
var audioStream = constructAudioStream(videoStream);
audioconferencing.dontAttachStream = true;
audioconferencing.attachStreams.push(audioStream);
audioconferencing.open();
audiooneway.dontAttachStream = true;
audiooneway.attachStreams.push(audioStream);
audiooneway.open();
}
});
};
document.getElementById('join-RTCMultiConnection').onclick = function() {
this.disabled = true;
var joinChannel = document.getElementById('join-channel').value;
if (videoconferencing.channel == joinChannel) {
videoconferencing.connect();
}
if (oneway.channel == joinChannel) {
oneway.connect();
}
if (audioconferencing.channel == joinChannel) {
audioconferencing.connect();
}
if (audiooneway.channel == joinChannel) {
audiooneway.connect();
}
};
function constructAudioStream(mediaStream) {
var context = new AudioContext();
var mediaStreamSource = context.createMediaStreamSource(mediaStream);
var destination = context.createMediaStreamDestination();
mediaStreamSource.connect(destination);
return destination.stream;
}
</script>
<section class="experiment">
<h2>Why multi-sessions?</h2>
<ol>
<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>
<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!
</li>
</ol>
There are
<strong>many other</strong> use-cases of multi-sessions.
</section>
<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>
<div>
<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>
</div>
<button id="send-message" style="font-size: 1em;">Send Message</button>
</section>
<section class="experiment own-widgets latest-commits">
<h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">Latest Updates</a>
</h2>
<div id="github-commits"></div>
</section>
</article>
<a href="https://github.com/muaz-khan/RTCMultiConnection" class="fork-left"></a>
<footer>
<a href="https://www.webrtc-experiment.com/" target="_blank">WebRTC Experiments!</a> and
<a href="http://www.RTCMultiConnection.org/docs/" target="_blank">RTCMultiConnection.js</a> ©
<a href="mailto:muazkh@gmail.com" target="_blank">Muaz Khan</a>:
<a href="https://twitter.com/WebRTCWeb" target="_blank">@WebRTCWeb</a>
</footer>
<!-- commits.js is useless for you! -->
<script>window.useThisGithubPath = 'muaz-khan/RTCMultiConnection';</script>
<script src="https://cdn.webrtc-experiment.com/commits.js" async></script>
</body>
</html>