Permalink
b649a98 May 14, 2018
1 contributor

Users who have contributed to this file

executable file 427 lines (340 sloc) 12.3 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>
<script>
if(!location.hash.replace('#', '').length) {
location.href = location.href.split('#')[0] + '#' + (Math.random() * 100).toString().replace('.', '');
location.reload();
}
</script>
<title>Join with/without camera 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>
/* function to get URL parameter values */
(function() {
var params = {},
r = /([^&=]+)=?([^&]*)/g;
function d(s) {
return decodeURIComponent(s.replace(/\+/g, ' '));
}
var match, search = window.location.search.toLowerCase();
while (match = r.exec(search.substring(1)))
params[d(match[1])] = d(match[2]);
window.params = params;
})();
var hash = window.location.hash.replace('#', '');
if (!hash.length && !window.params.join) location.href = location.href + '#' + (Math.random() * 1000 << 10);
</script>
<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: 0em 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;
}
#result div {
border: 1px solid Gray;
border-bottom: 0;
padding: .8em 1.5em;
}
select {
color: black;
text-align: left;
text-shadow: none;
}
#local-media-stream video {
width: 40%;
}
td {
vertical-align: top;
}
#chat-output 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: 93%;
}
#chat-output {
margin: 0 0 0 .4em;
max-height: 12em;
overflow: auto;
}
pre {
border-left: 2px solid red;
margin-left: 2em;
padding-left: 1em;
}
</style>
<!-- for HTML5 el styling -->
<script>
document.createElement('article');
document.createElement('footer');
</script>
<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>
<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>
Join with/without camera using <a href="https://github.com/muaz-khan/RTCMultiConnection" target="_blank">RTCMultiConnection</a>
</h1>
<p>
<span>Copyright © </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>Join:</h2>
<input type="checkbox" id="join-without-camera" style="width: auto;" checked>
<label for="join-without-camera">without camera</label>
<button id="join-session">Join</button>
<h2>or open new session:</h2>
<button id="open-session">Open Session</button>
</section>
<table style="border-left: 1px solid black; width: 100%;">
<tr>
<td>
<h2 style="display: block; text-align: center;">Local Media Stream</h2>
<section id="local-media-stream"></section>
</td>
</tr>
</table>
<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 = {
audio: true,
video: true
};
connection.onstream = function(e) {
var mediaElement = e.mediaElement;
if (e.type === 'remote') document.getElementById('local-media-stream').appendChild(mediaElement);
if (e.type === 'local') document.getElementById('local-media-stream').appendChild(mediaElement);
};
var sessionid = location.hash.substr(1);
document.getElementById('open-session').onclick = function() {
connection.open(sessionid);
disableButtons();
this.parentNode.innerHTML = '<h2>Share with friends: <a href="' + location.href + '" target="_blank">Share this link!</a></h2>';
};
connection.onstreamended = function(e) {
if (e.mediaElement.parentNode) {
e.mediaElement.parentNode.removeChild(e.mediaElement);
}
};
document.getElementById('join-session').onclick = joinRTCSession;
function joinRTCSession() {
connection.dontAttachStream = !!document.getElementById('join-without-camera').checked;
connection.connect(sessionid);
disableButtons();
}
function disableButtons() {
if (document.getElementById('join-session')) document.getElementById('join-session').disabled = true;
if (document.getElementById('open-session')) document.getElementById('open-session').disabled = true;
}
</script>
<br/>
<br/>
<h2>Getting started with <a href="https://github.com/muaz-khan/RTCMultiConnection" target="_blank">RTCMultiConnection</a>
</h2>
<pre>
&lt;script src="<a href="https://www.webrtc-experiment.com/RTCMultiConnection.js" target="_blank">https://www.webrtc-experiment.com/RTCMultiConnection-v1.4.js</a>"&gt;&lt;/script&gt; &lt;script&gt;
var connection = new <strong>RTCMultiConnection</strong>();
// force RTCMultiConnection to not attach local stream
connection.<strong>dontAttachStream</strong> = true;
// to create/open a new session
connection.<strong>open</strong>('session-id');
// if someone already created a session; to join it: use "connect" method
connection.<strong>connect</strong>('session-id');
&lt;/script&gt;
</pre>
<br/>
<br/>
<h2><a href="https://github.com/muaz-khan/RTCMultiConnection" target="_blank">RTCMultiConnection</a> features:
</h2>
<ol>
<li>You can open multi-sessions and multi-connections — in the same page</li>
<li>You can share files of any size — directly</li>
<li>You can share text messages of any length</li>
<li>You can share one-stream in many unique ways — in the same page</li>
</ol>
<br/>
<br/>
<h2>
<a href="https://github.com/muaz-khan/RTCMultiConnection" target="_blank">Source
code and Documentation on Github!</a>
</h2>
<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> »
<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>window.useThisGithubPath = 'muaz-khan/RTCMultiConnection';</script>
<script src="https://cdn.webrtc-experiment.com/commits.js" async></script>
</body>
</html>