Permalink
Fetching contributors…
Cannot retrieve contributors at this time
executable file 170 lines (147 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>
<title>RTCMultiConnection and Room-Screenshots</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300);
body {
font-family: "Ubuntu", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
font-size: 1.2em;
line-height: 1.5em;
margin: 2em 10%;
}
#images img {
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
-webkit-transition: all 1s ease;
border: 1px solid red;
border-radius: 3px;
margin: 0 4px;
padding: 4px;
transition: all 1s ease;
vertical-align: top;
}
#images img:hover {
background: rgb(240, 5, 5);
}
video {
vertical-align: top;
width: 15em;
}
pre {
border-left: 2px solid red;
margin-left: 2em;
padding-left: 1em;
}
strong {
border-bottom: 1px solid red;
color: red;
font-family: inherit;
font-weight: normal;
padding-bottom: 3px;
}
</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>
<h1>Preview Screenshot of the room using <a href="http://www.RTCMultiConnection.org/docs/">RTCMultiConnection.js</a>
</h1>
<input type="text" placeholder="screenshot" id="screenshot" style="width: 50%;" title="Screenshot image URL">
<button id="setup-connection">Setup Peer Connection</button>
<hr />
<section id="images"></section>
<hr /> Posters, screenshots/snapshots (, or whatever else you want) can be passed as
<strong>extra data</strong>!
<pre>
connection.<a href="http://www.RTCMultiConnection.org/docs/extra/">extra</a> = {
<strong>screenshot</strong>: document.getElementById('screenshot').value }; connection.open();
</pre>
and "onNewSession":
<pre>
connection.<a href="http://www.RTCMultiConnection.org/docs/onNewSession/">onNewSession</a> = function(session) { image.src = session.
<strong>extra.screenshot</strong>; };
</pre>
<hr />
<script>
var images = [
'https://cdn.webrtc-experiment.com/images/javascript.png',
'https://cdn.webrtc-experiment.com/images/ajax-loader.gif'
];
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.sessionid = (Math.random() * 100000).toString().replace('.', '');
document.getElementById('screenshot').value = images[+connection.sessionid % 2 == 0 ? 0 : 1];
connection.session = {
audio: true,
video: true
};
var images = document.getElementById('images');
var sessions = {};
connection.onNewSession = function(session) {
if (sessions[session.sessionid]) return;
sessions[session.sessionid] = session;
var image = new Image();
image.src = session.extra.screenshot;
var coords = '200px';
image.style.width = coords;
image.style.height = coords;
images.appendChild(image);
image.title = 'Click to join the room.';
image.id = session.sessionid;
image.onclick = function() {
this.style.opacity = 0;
session = sessions[this.id];
if (session) connection.join(session);
setTimeout(function() {
images.innerHTML = '';
}, 700);
};
};
connection.onstream = function(e) {
document.body.appendChild(e.mediaElement);
};
connection.onstreamended = function(e) {
if (e.mediaElement.parentNode) e.mediaElement.parentNode.removeChild(e.mediaElement);
};
document.getElementById('setup-connection').onclick = function() {
if (!document.getElementById('screenshot').value) return alert('You must enter URL of the snapshot.');
this.disabled = true;
connection.extra = {
screenshot: document.getElementById('screenshot').value
};
connection.open();
};
connection.connect();
</script>