Skip to content

Latest commit

 

History

History

WebRTC-File-Sharing

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 

FileBufferReader.js is recommended:

WebRTC File Sharing using SCTP Data Channels / Demo

This WebRTC Experiment is using SCTP-based data channels to share files across browsers (chrome & firefox).

A reusable "standalone" library that can be used in any WebRTC or non-WebRTC application to share files.

// https://www.webrtc-experiment.com/File.js

var progressHelper = {};
var outputPanel = document.body;

var fileHelper = {
    onBegin: function (file) {
        var div = document.createElement('div');
        div.title = file.name;
        div.innerHTML = '<label>0%</label> <progress></progress>';
        outputPanel.insertBefore(div, outputPanel.firstChild);
        progressHelper[file.uuid] = {
            div: div,
            progress: div.querySelector('progress'),
            label: div.querySelector('label')
        };
        progressHelper[file.uuid].progress.max = file.maxChunks;
    },
    onEnd: function (file) {
        progressHelper[file.uuid].div.innerHTML = '<a href="' + file.url + '" target="_blank" download="' + file.name + '"<' + file.name + '</a>';
    },
    onProgress: function (chunk) {
        var helper = progressHelper[chunk.uuid];
        helper.progress.value = chunk.currentPosition || chunk.maxChunks || helper.progress.max;
        updateLabel(helper.progress, helper.label);
    }
};

function updateLabel(progress, label) {
    if (progress.position == -1) return;
    var position = +progress.position.toFixed(2).split('.')[1] || 100;
    label.innerHTML = position + '%';
}

// To Send a File
File.Send({
    file: file,
    channel: peer,
    interval: 100,
    chunkSize: 1000, // 1000 for RTP; or 16k for SCTP
                     // chrome's sending limit is 64k; firefox' receiving limit is 16k!
	
    onBegin: fileHelper.onBegin,
    onEnd: fileHelper.onEnd,
    onProgress: fileHelper.onProgress
});

// To Receive a File
var fleReceiver = new File.Receiver(fileHelper);
peer.onmessage = function (data) {
    fleReceiver.receive(data);
};

A reusable "standalone" library that can be used on any webpage to setup WebRTC SCTP connections (in minutes!).

Documentation of this library available here:

https://github.com/muaz-khan/WebRTC-Experiment/tree/master/file-sharing

=

Browser Support

WebRTC WebRTC File Sharing experiment works fine on following web-browsers:

Browser Support
Firefox Stable / Aurora / Nightly
Google Chrome Stable / Canary / Beta / Dev
Android Chrome Beta

=

License

WebRTC WebRTC File Sharing experiment is released under MIT licence . Copyright (c) Muaz Khan.