File Sharing + Text Chat using RTCMultiConnection
© Muaz Khan . @WebRTCWeb . Github . Latest issues . What's New?
Open Data Channel
or join:
Text Chat |
Share Files |
Getting started with RTCMultiConnection
<script src="https://cdn.webrtc-experiment.com/RTCMultiConnection.js"></script> <script>
var connection = new RTCMultiConnection();
connection.session = { data: true }; // to create/open a new session
connection.open('session-id'); // if someone already created a session; to join it: use "connect" method
connection.connect('session-id'); // to send text/data or file
connection.send(file || data || 'text');
</script>
Remember, A-to-Z, everything is optional! You can set
session-id in constructor or in
open/
connect methods. It is your choice!
Features:
- Share file directly — of any size
- Share text-message of any length
- Share data directly
Additional:
<script> // to be alerted on data ports get open
connection.onopen = function(e) {} // to be alerted on data ports get new message
connection.onmessage = 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 = '<label>0%</label> <progress></progress>';
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 = '<a href="' + file.url + '" target="_blank" download="' + file.name + '">' + file.name + '</a>'; }; function updateLabel(progress, label) { if (progress.position == -1) return; var position = +progress.position.toFixed(2).split('.')[1] || 100;
label.innerHTML = position + '%';
}
</script>
Errors Handling
<script> // error to open data ports
connection.onerror = function(e) {} // data ports suddenly dropped
connection.onclose = function(e) {}
</script>