Permalink
Fetching contributors…
Cannot retrieve contributors at this time
executable file 424 lines (340 sloc) 12.1 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>
<title>Manual session establishment + extra data transmission + video conferencing using RTCMultiConnection + video conferencing ® 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">
<style>
@import url(https://fonts.googleapis.com/css?family=Inconsolata);
html {
background: #eee;
}
body {
font-family: "Inconsolata", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
font-size: 1.2em;
line-height: 1.2em;
margin: 0;
}
article,
footer {
display: block;
max-width: 900px;
min-width: 360px;
width: 80%;
}
article {
background: #fff;
border: 1px solid;
border-color: #ddd #aaa #aaa #ddd;
margin: 2.5em auto 0 auto;
padding: 2em;
}
h1 {
margin-top: 0;
}
article p:first-of-type {
margin-top: 1.6em;
}
article p:last-child {
margin-bottom: 0;
}
footer {
margin: 0 auto 2em auto;
text-align: center;
}
footer a {
color: #666;
font-size: inherit;
padding: 1em;
text-decoration: none;
text-shadow: 0 1px 1px #fff;
}
footer a:hover,
footer a:focus {
color: #111;
}
h1,
h2 {
border-bottom: 1px solid black;
display: inline;
font-weight: normal;
line-height: 36px;
padding: 0 0 3px 0;
}
a {
color: #2844FA;
text-decoration: none;
}
a:hover,
a:focus {
color: #1B29A4;
}
a:active {
color: #000;
}
:-moz-any-link:focus {
border: 0;
color: #000;
}
::selection {
background: #ccc;
}
::-moz-selection {
background: #ccc;
}
button,
select {
-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;
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;
}
strong {
color: rgb(204, 14, 14);
font-family: inherit;
font-weight: normal;
}
select {
color: black;
text-shadow: none;
}
td {
vertical-align: top;
}
#chat-output div,
#file-progress div {
border: 1px solid black;
border-bottom: 0;
padding: .1em .4em;
}
input {
border: 1px solid black;
font-family: inherit;
margin: .1em .3em;
outline: none;
padding: .1em .2em;
width: 97%;
}
#chat-output,
#file-progress {
margin: 0 0 0 .4em;
max-height: 12em;
overflow: auto;
}
pre {
border-left: 2px solid red;
margin-left: 2em;
padding-left: 1em;
}
.video-container {
background: white;
border: 2px solid black;
border-radius: 0.2em;
display: inline-block;
margin: 2em .2em;
padding: .1em;
vertical-align: top;
}
.video-container h2 {
border: 0;
border-top: 1px solid black;
display: block;
margin: 0;
text-align: center;
}
</style>
<!-- for HTML5 el styling -->
<script>
document.createElement('article');
document.createElement('footer');
</script>
<script src="//cdn.webrtc-experiment.com/firebase.js">
</script>
<script src="//cdn.webrtc-experiment.com/RTCMultiConnection-v1.2.js">
</script>
</head>
<body>
<article>
<a href="https://www.webrtc-experiment.com/" style="border-bottom: 1px solid #2844FA; font-size: 1.2em; position: absolute; right: 0; text-decoration: none; top: 0;">↑
WEBRTC EXPERIMENTS</a>
<h1>Manual session establishment + extra data transmission + video conferencing</h1>
<p>
<span>Copyright © 2013</span>
<a href="https://github.com/muaz-khan" target="_blank">Muaz Khan</a>
<span>&lt;</span><a href="http://twitter.com/muazkh" target="_blank">@muazkh</a>
<span>&gt;.</span>
</p>
<section class="plusone-gplus">
<div class="g-plusone" data-href="https://www.webrtc-experiment.com/"></div>
</section>
<section>
<h2>New Session:</h2>
<button id="start-new-session">Start New Video Session</button>
</section>
<table style="border-left: 1px solid black; width: 100%;">
<tr>
<td id="local-video-container">
<h2>Local video container</h2>
</td>
<td id="remote-videos-container" style="background: white; border-left: 1px solid black;">
<h2>Remote videos container
</h2>
</td>
</tr>
<tr>
<td colspan="2">
<table id="sessions-list" style="width: 100%;"></table>
</td>
</tr>
</table>
<script>
//window.username = Math.random() * 9999 << 9999;
var connection = new RTCMultiConnection('session-id-0123456789');
var sessionsList = document.getElementById('sessions-list');
connection.onNewSession = function(session) {
var alreadyExists = document.getElementById(session.userid);
if (alreadyExists) return;
if (!window.sessions) window.sessions = {};
window.sessions[session.userid] = session;
var tr = document.createElement('tr');
tr.innerHTML = '<td>' + session.extra.username + '</td>';
var td = document.createElement('td');
var button = document.createElement('button');
button.setAttribute('id', session.userid);
button.innerHTML = 'join';
td.appendChild(button);
tr.appendChild(td);
sessionsList.insertBefore(tr, sessionsList.firstChild);
button.onclick = function() {
if (!window.username) window.username = prompt('Please enter your username') || 'Anonymous';
var session = window.sessions[this.id];
// connection.join(session, extra)
connection.join(session, {
username: window.username
});
document.getElementById('start-new-session').disabled = true;
sessionsList.style.display = 'none';
};
};
document.getElementById('start-new-session').onclick = function() {
if (!window.username) window.username = prompt('Please enter your username') || 'Anonymous';
// connection.open( session-id, extra );
connection.open({
extra: {
username: window.username
},
interval: 1000
});
document.getElementById('start-new-session').disabled = true;
sessionsList.style.display = 'none';
};
connection.onstream = function(stream) {
if (stream.type === 'local') {
var video = getVideo(stream.mediaElement, {
username: window.username
});
document.getElementById('local-video-container').appendChild(video);
}
if (stream.type === 'remote') {
var video = getVideo(stream.mediaElement, stream.extra);
var remoteVideosContainer = document.getElementById('remote-videos-container');
remoteVideosContainer.appendChild(video, remoteVideosContainer.firstChild);
video.title = stream.extra.username;
}
stream.mediaElement.width = innerWidth / 3.4;
};
function getVideo(video, extra) {
var div = document.createElement('div');
div.className = 'video-container';
div.appendChild(video);
if (extra) {
var h2 = document.createElement('h2');
h2.innerHTML = extra.username;
div.appendChild(h2);
}
return div;
}
</script>
<br/>
<br/>
<h2 id="go">Go ahead and try!</h2>
<p>Pass "session-id" only-over the constructor:</p>
<pre>
var connection = new RTCMultiConnection('session-id');
</pre>
<p>When calling "open" method; pass an argument like this:</p>
<pre>
connection.open({ // "extra" object allows you pass extra data like username, number of participants etc. extra: { boolean: true, integer: 0123456789, array: [], object: {} }, // it is the broadcasting interval — default value is 3 seconds interval: 3000 });
</pre>
<p>Use "onNewSession" method to show each new session in a list so end users can manually join any session they prefer:
</p>
<pre>
connection.onNewSession = function(session) { // use "session.extra" to access "extra" data };
</pre>
<p>To manually join a preferred session any time; use "join" method instead of "connect" method:</p>
<pre>
connection.join(session, extra); // e.g. string connection.join(session, 'username'); // e.g. object connection.join(session, { username: 'mine user name' });
</pre>
<p>"extra" data can be accessed using "connection.onstream" method:</p>
<pre>
connection.onstream = function(stream){ var video = stream.mediaElement; // it is extra data passed from remote peer if(stream.type === 'remote') { var extra = stream.
<strong>extra</strong>; video.poster =
<strong>extra</strong>.username; } };
</pre>
<br/>
<br/>
<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>
</article>
<footer>
<p>
<a href="https://www.webrtc-experiment.com/" target="_blank">WebRTC Experiments!</a
<a href="https://plus.google.com/100325991024054712503" rel="author" target="_blank">Muaz Khan</a>,
<span>2013 </span
<a href="mailto:muazkh@gmail.com" target="_blank">Email</a
<a href="http://twitter.com/muazkh" target="_blank">@muazkh</a
<a href="https://github.com/muaz-khan" target="_blank">Github</a>
</p>
</footer>
<script src="//cdn.webrtc-experiment.com/commits.js">
</script>
</body>
</html>