Permalink
Fetching contributors…
Cannot retrieve contributors at this time
executable file 332 lines (290 sloc) 10.1 KB
<!--
> Muaz Khan - github.com/muaz-khan
> MIT License - www.webrtc-experiment.com/licence
> Documentation - www.RTCMultiConnection.org
-->
<!DOCTYPE html>
<html lang="en">
<head>
<script>
if(!location.hash.replace('#', '').length) {
location.href = location.href.split('#')[0] + '#' + (Math.random() * 100).toString().replace('.', '');
location.reload();
}
</script>
<title>Renegotiation 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">
<script>
var hash = window.location.hash.replace('#', '');
if (!hash.length) {
location.href = location.href + '#' + ((Math.random() * new Date().getTime()).toString(36).toUpperCase().replace(/\./g, '-'));
location.reload();
}
</script>
<style>
* {
-webkit-user-select: none;
font-family: 'Segoe UI Light';
}
html {
overflow: hidden;
}
.local-video-container {
background: rgb(253, 104, 104);
border: 2px solid red;
border-bottom-left-radius: 5%;
border-bottom-right-radius: 5%;
float: left;
overflow: hidden;
text-align: center;
width: 40%;
}
video {
width: 100%;
}
.remote-videos-container {
background: rgb(104, 170, 253);
border: 2px solid rgb(5, 129, 160);
border-bottom-left-radius: 5%;
border-bottom-right-radius: 5%;
float: left;
overflow: hidden;
text-align: center;
width: 58%;
}
.video-container {
background: white;
display: inline-block;
overflow: hidden;
vertical-align: top;
}
.video-container h2 {
border: 0;
border-top: 1px solid black;
display: block;
margin: 0;
text-align: center;
}
.video-container button {
margin: .2em;
position: absolute;
z-index: 200;
}
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: 1.3em;
line-height: 1.3;
padding: 5px 12px;
text-align: center;
text-shadow: 1px 1px 1px #076bd2;
}
button:hover {
background: rgb(9, 147, 240);
}
button:active {
background: rgb(10, 118, 190);
}
button[disabled] {
background: none;
border: 1px solid rgb(187, 181, 181);
color: gray;
text-shadow: none;
}
footer {
background: white;
border-top: 2px solid black;
bottom: 0;
left: 0;
max-height: 200px;
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
right: 0;
}
input[type=text] {
-webkit-user-select: initial;
font-size: 1.4em;
width: 100%;
}
#messages div {
border-bottom: 1px solid black;
font-size: 1.4em;
padding: .4em .8em;
}
</style>
<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>
<button id="new-session">
Open New Session</button>
<input type="checkbox" id="audio-renegotiation" checked>
<label for="audio-renegotiation">
Renegotiate Audio</label>
<input type="checkbox" id="video-renegotiation" checked>
<label for="video-renegotiation">
Renegotiate Video</label>
<input type="checkbox" id="screen-renegotiation">
<label for="screen-renegotiation">
Renegotiate Screen</label>
<input type="checkbox" id="one-way">
<label for="one-way">
Is One Way?</label>
<a href="https://www.webrtc-experiment.com/">Goto "WebRTC Experiments & Demos" Homepage</a>
<div id="local-video-container" class="local-video-container">
</div>
<div id="remote-videos-container" class="remote-videos-container">
</div>
<h2>
How it works?</h2>
<p>
Renegotiation means using pre-created peer connections to add additional streams by renegotiating offer/answer session descriptions.</p>
<p>
In this demo; at first time; only data connection is opened. Later on, same peer connections are used to renegotiate audio, video or screen streams.</p>
<p>
It is runtime insertion of streams!</p>
<br />
<br />
<p>
Remeber, it is a testing demo for <a href="https://github.com/muaz-khan/WebRTC-Experiment/blob/master/RTCMultiConnection/RTCMultiConnection-v1.4.js" target="_blank">RTCMultiConnection-v1.4.js</a> library. Documentation <a href="http://www.RTCMultiConnection.org/docs/" target="_blank">available here</a>.</p>
<!--
begins -->
<script>
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.session = {
data: true
};
connection.onopen = function(e) {
inputMessage.disabled = false;
connection.send('Hi, I\'m ' + e.userid);
// only session initiator can add streams for renegotiation
if (connection.isInitiator)
connection.addStream({
audio: !!document.getElementById('audio-renegotiation').checked,
video: !!document.getElementById('video-renegotiation').checked,
screen: !!document.getElementById('screen-renegotiation').checked,
oneway: !!document.getElementById('one-way').checked
});
};
connection.onmessage = function(e) {
appendDIV(e.data);
};
var remoteVideosContainer = document.getElementById('remote-videos-container');
connection.onstream = function(e) {
video = getVideo(e);
if (e.type === 'local') document.getElementById('local-video-container').appendChild(video);
if (e.type === 'remote') remoteVideosContainer.appendChild(video, remoteVideosContainer.firstChild);
};
connection.onstreamended = function(e) {
if (e.mediaElement.parentNode && e.mediaElement.parentNode.parentNode) e.mediaElement.parentNode.parentNode.removeChild(e.mediaElement.parentNode);
};
connection.connect();
document.getElementById('new-session').onclick = function() {
connection.open();
this.disabled = true;
};
</script>
<script>
function getVideo(e) {
var div = document.createElement('div');
div.className = 'video-container';
div.id = e.userid || 'You';
var button = document.createElement('button');
button.innerHTML = 'Mute';
button.id = e.streamid;
button.onclick = function() {
button = this;
button.disabled = true;
var streamid = button.id;
if (button.innerHTML == 'Mute') {
connection.streams[streamid].mute();
button.innerHTML = 'UnMute';
} else {
connection.streams[streamid].unmute();
button.innerHTML = 'Mute';
}
setTimeout(function() {
button.disabled = false;
}, 200);
};
div.appendChild(button);
var button2 = document.createElement('button');
button2.innerHTML = 'Stop';
button.style.marginTop = '2.5em';
button2.id = e.streamid;
button2.onclick = function() {
button2 = this;
this.disabled = true;
var streamid = this.id;
connection.streams[streamid].stop();
};
div.appendChild(button2);
div.appendChild(e.mediaElement);
var h2 = document.createElement('h2');
h2.innerHTML = e.userid || 'You';
div.appendChild(h2);
return div;
}
</script>
<footer>
<div id="messages"></div>
<input type="text" id="input-message" disabled>
</footer>
<script>
var messages = document.getElementById('messages');
var inputMessage = document.getElementById('input-message');
inputMessage.onkeypress = function(e) {
if (e.keyCode != 13) return;
appendDIV(this.value);
connection.send(this.value);
this.value = '';
};
function appendDIV(message) {
var div = document.createElement('div');
div.innerHTML = message;
messages.appendChild(div);
inputMessage.focus();
}
</script>
</body>
</html>