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>