Permalink
Fetching contributors…
Cannot retrieve contributors at this time
executable file 186 lines (153 sloc) 4.99 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> & Session Management</h1>
<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>
<button id="share-audio-video" class="button">Audio+Video</button>
<button id="share-screen" class="button">Screen</button>
<button id="share-audio" class="button">Only Audio</button>
<button id="leave-conference" disabled>connection.leave( )</button>
<button id="close-conference" disabled>connection.close( )</button>
<div id="videos-container"></div>
<script>
document.getElementById('share-audio-video').onclick = function() {
connection.session = {
audio: true,
video: true
};
connection.open();
disableAllButtons();
};
document.getElementById('share-audio').onclick = function() {
connection.session = {
audio: true
};
connection.open();
disableAllButtons();
};
document.getElementById('share-screen').onclick = function() {
connection.session = {
screen: true,
oneway: true
};
connection.open();
disableAllButtons();
};
document.getElementById('close-conference').onclick = function() {
connection.close();
enableAllButtons();
disableCloseButtons();
};
document.getElementById('leave-conference').onclick = function() {
connection.leave();
enableAllButtons();
disableCloseButtons();
};
var videosContainer = document.getElementById('videos-container');
var roomsList = document.getElementById('rooms-list');
var connection = new RTCMultiConnection();
// https://github.com/muaz-khan/WebRTC-Experiment/tree/master/socketio-over-nodejs
var SIGNALING_SERVER = 'https://socketio-over-nodejs2.herokuapp.com:443/';
connection.openSignalingChannel = function(config) {
var channel = config.channel || connection.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);
};
connection.onstream = function(e) {
videosContainer.insertBefore(e.mediaElement, videosContainer.firstChild);
enableCloseButtons();
};
connection.onleave = function() {
disableCloseButtons();
};
connection.connect();
function disableAllButtons() {
var buttons = document.querySelectorAll('.button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].disabled = true;
}
}
function enableAllButtons() {
var buttons = document.querySelectorAll('.button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].disabled = false;
}
}
function enableCloseButtons() {
document.getElementById('close-conference').disabled = false;
document.getElementById('leave-conference').disabled = false;
}
function disableCloseButtons() {
document.getElementById('close-conference').disabled = true;
document.getElementById('leave-conference').disabled = true;
}
</script>
<style>
button,
input[type=button] {
-moz-border-radius: 3px;
-moz-transition: none;
-webkit-transition: none;
background: #0370ea;
background: -moz-linear-gradient(top, #008dfd 0, #0370ea 100%);
background: -webkit-linear-gradient(top, #008dfd 0, #0370ea 100%);
border: 1px solid #076bd2;
border-radius: 3px;
color: #fff;
display: inline-block;
font-family: inherit;
font-size: .8em;
font-size: 1.5em;
line-height: 1.3;
padding: 5px 12px;
text-align: center;
text-shadow: 1px 1px 1px #076bd2;
}
button:hover,
input[type=button]:hover {
background: rgb(9, 147, 240);
}
button:active,
input[type=button]:active {
background: rgb(10, 118, 190);
}
button[disabled],
input[type=button][disabled] {
background: none;
border: 1px solid rgb(187, 181, 181);
color: gray;
text-shadow: none;
}
</style>
<hr />
<ol style="font-size: 2em;">
<li>"leave" means [keep session active] even if session initiator leaves.</li>
<li>"close" means close entire session if session initiator leaves.</li>
</ol>