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