Permalink
Fetching contributors…
Cannot retrieve contributors at this time
executable file 300 lines (255 sloc) 12 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>File Sharing + Text Chat 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">
<link rel="stylesheet" href="https://cdn.webrtc-experiment.com/style.css">
<style>
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;
}
</style>
<!-- for HTML5 el styling -->
<script>
document.createElement('article');
document.createElement('footer');
</script>
<script src="https://cdn.webrtc-experiment.com/FileBufferReader.js"></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>
<header>
<h1>File Sharing + Text Chat using <a href="http://www.RTCMultiConnection.org/">RTCMultiConnection</a>
</h1>
<p>
<span> &copy; </span>
<a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a> .
<a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a> .
<a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a> .
<a href="https://github.com/muaz-khan/WebRTC-Experiment/issues?state=open" target="_blank">Latest issues</a> .
<a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">What's New?</a>
</p>
</header>
<div class="github-stargazers"></div>
<section>
<h2>Open Data Channel</h2>
<input type="text" id="channel" value="channel" style="font-size: 1.1em; text-align: right; width: 4em;" title="channel name - use your own channel name">
<button id="init-RTCMultiConnection">Open</button>
<h2>or join:</h2>
<button id="join-RTCMultiConnection">Join</button>
</section>
<table style="border-left: 1px solid black; width: 100%;">
<tr>
<td>
<h2 style="display: block; font-size: 1em; text-align: center;">Text Chat</h2>
<div id="chat-output"></div>
<input type="text" id="chat-input" style="font-size: 1.2em;" placeholder="chat message" disabled>
</td>
<td style="background: white; border-left: 1px solid black;">
<h2 style="display: block; font-size: 1em; text-align: center;">Share Files</h2>
<input type="file" id="file" disabled>
<div id="file-progress"></div>
</td>
</tr>
</table>
<script>
document.getElementById('channel').value = Math.round(Math.random() * 60535) + 500000;
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
};
// [optional] onmessage/onopen is for sending/receiving data/text
connection.onmessage = function(e) {
appendDIV(e.data);
};
connection.onopen = function() {
if (document.getElementById('chat-input')) document.getElementById('chat-input').disabled = false;
if (document.getElementById('file')) document.getElementById('file').disabled = false;
if (document.getElementById('init-RTCMultiConnection')) document.getElementById('init-RTCMultiConnection').disabled = true;
};
document.getElementById('init-RTCMultiConnection').onclick = function() {
connection.open(document.getElementById('channel').value || 'channel');
document.getElementById('join-RTCMultiConnection').disabled = true;
document.getElementById('init-RTCMultiConnection').disabled = true;
};
document.getElementById('join-RTCMultiConnection').onclick = function() {
connection.connect(document.getElementById('channel').value || 'channel');
document.getElementById('join-RTCMultiConnection').disabled = true;
document.getElementById('init-RTCMultiConnection').disabled = true;
};
document.getElementById('file').onchange = function() {
var file = this.files[0];
connection.send(file);
};
var chatOutput = document.getElementById('chat-output');
connection.body = document.getElementById('file-progress');
function appendDIV(data) {
var div = document.createElement('div');
div.innerHTML = data;
chatOutput.insertBefore(div, chatOutput.firstChild);
div.tabIndex = 0;
div.focus();
}
document.getElementById('chat-input').onkeypress = function(e) {
if (e.keyCode !== 13 || !this.value) return;
appendDIV(this.value);
connection.send(this.value);
this.value = '';
this.focus();
};
</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://cdn.webrtc-experiment.com/RTCMultiConnection.js" target="_blank">https://cdn.webrtc-experiment.com/RTCMultiConnection.js</a>"&gt;&lt;/script&gt; &lt;script&gt;
var connection = new <strong>RTCMultiConnection</strong>();
connection.<strong>session</strong> = { data: 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'); // to send text/data or file
connection.<strong>send</strong>(file || data || 'text');
&lt;/script&gt;
</pre>
Remember, A-to-Z, everything is optional! You can set
<strong>session-id</strong> in constructor or in
<strong>open</strong>/
<strong>connect</strong> methods. It is your choice!
<br/>
<br/>
<h2>Features:</h2>
<ol>
<li>Share file directly &#8212; of any size</li>
<li>Share text-message of any length</li>
<li>Share data directly</li>
</ol>
<br/>
<br/>
<h2>Additional:</h2>
<pre>
&lt;script&gt; // to be alerted on data ports get open
connection.<strong>onopen</strong> = function(e) {} // to be alerted on data ports get new message
connection.<strong>onmessage</strong> = function(e) {} var progressHelper = {}; // to make sure file-saver dialog is not invoked.
connection.autoSaveToDisk = false;
connection.onFileProgress = function (chunk, uuid) {
var helper = progressHelper[chunk.uuid];
helper.progress.value = chunk.currentPosition || chunk.maxChunks || helper.progress.max;
updateLabel(helper.progress, helper.label);
};
connection.onFileStart = function (file) {
var div = document.createElement('div');
div.title = file.name;
div.innerHTML = '&lt;label&gt;0%&lt;/label&gt; &lt;progress&gt;&lt;/progress&gt;';
document.body.appendChild(div);
progressHelper[file.uuid] = { div: div, progress: div.querySelector('progress'), label: div.querySelector('label') };
progressHelper[file.uuid].progress.max = file.maxChunks;
};
connection.onFileEnd = function (file) {
progressHelper[file.uuid].div.innerHTML = '&lt;a href="' + file.url + '" target="_blank" download="' + file.name + '"&gt;' + file.name + '&lt;/a&gt;'; }; function updateLabel(progress, label) { if (progress.position == -1) return; var position = +progress.position.toFixed(2).split('.')[1] || 100;
label.innerHTML = position + '%';
}
&lt;/script&gt;
</pre>
<br/>
<br/>
<h2>Errors Handling</h2>
<pre>
&lt;script&gt; // error to open data ports
connection.<strong>onerror</strong> = function(e) {} // data ports suddenly dropped
connection.<strong>onclose</strong> = function(e) {}
&lt;/script&gt;
</pre>
<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>
<section class="experiment own-widgets latest-commits">
<h2 class="header" id="updates" style="color: red;padding-bottom: .1em;"><a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master">Latest Updates</a>
</h2>
<div id="github-commits"></div>
</section>
</article>
<footer>
<p>
<a href="https://www.webrtc-experiment.com/licence/">MIT License</a> © <a href="https://plus.google.com/+MuazKhan" rel="author" target="_blank">Muaz Khan</a>
<a href="mailto:muazkh@gmail.com" target="_blank">muazkh@gmail.com</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>