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:

  1. Share file directly — of any size
  2. Share text-message of any length
  3. 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>


Source code and Documentation on Github!



Feedback

Latest Updates