Permalink
Fetching contributors…
Cannot retrieve contributors at this time
executable file 145 lines (116 sloc) 4.31 KB
<!--
> Muaz Khan - github.com/muaz-khan
> MIT License - www.webrtc-experiment.com/licence
> Documentation - www.RTCMultiConnection.org
-->
<script>
if(!location.hash.replace('#', '').length) {
location.href = location.href.split('#')[0] + '#' + (Math.random() * 100).toString().replace('.', '');
location.reload();
}
</script>
<h1><a href="http://www.RTCMultiConnection.org/docs/">RTCMultiConnection</a> & Multi-Sessions Management</h1>
<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>
<hr />
<button id="open-connections">open-connections</button>
<input type="text" id="text-chat" placeholder="text chat" disabled>
<button id="stop-screen" disabled>stop-screen</button>
<button id="stop-audio-video" disabled>stop-audio-video</button>
<hr />
<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>
<script>
document.querySelector('#open-connections').onclick = function() {
audioVideoConnection.open();
dataOnlyConnection.open();
screenOnlyConnection.open();
this.disabled = true;
};
var channel = location.href.replace(/\/|:|#|%|\.|\[|\]/g, '');
var audioVideoConnection = new RTCMultiConnection(channel + 'audioVideoConnection');
var dataOnlyConnection = new RTCMultiConnection(channel + 'dataOnlyConnection');
var screenOnlyConnection = new RTCMultiConnection(channel + 'screenOnlyConnection');
// https://github.com/muaz-khan/WebRTC-Experiment/tree/master/socketio-over-nodejs
var SIGNALING_SERVER = 'https://socketio-over-nodejs2.herokuapp.com:443/';
audioVideoConnection.openSignalingChannel = dataOnlyConnection.openSignalingChannel = screenOnlyConnection.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);
};
audioVideoConnection.session = {
audio: true,
video: true
};
dataOnlyConnection.session = {
data: true
};
screenOnlyConnection.session = {
screen: true,
oneway: true
};
audioVideoConnection.onstream = screenOnlyConnection.onstream = function(e) {
document.body.appendChild(e.mediaElement);
};
function appendData(data) {
var h1 = document.createElement('h1');
h1.innerHTML = data;
document.body.appendChild(h1);
}
dataOnlyConnection.onopen = function() {
document.querySelector('#stop-audio-video').disabled = false;
document.querySelector('#stop-screen').disabled = false;
document.querySelector('#text-chat').disabled = false;
};
dataOnlyConnection.onmessage = function(e) {
appendData(e.data);
};
audioVideoConnection.connect();
dataOnlyConnection.connect();
screenOnlyConnection.connect();
document.querySelector('#text-chat').onkeyup = function(e) {
if (e.keyCode != 13) return;
dataOnlyConnection.send(this.value);
appendData(this.value);
this.value = '';
};
document.querySelector('#stop-audio-video').onclick = function() {
this.disabled = true;
audioVideoConnection.close();
};
document.querySelector('#stop-screen').onclick = function() {
this.disabled = true;
screenOnlyConnection.close();
};
</script>
<style>
html {
background: rgb(255, 252, 239);
}
audio,
video {
vertical-align: top;
width: 40%;
}
</style>