How to share files using WebRTC Data Channel (RTP/SCTP) APIs?

Getting started — You'll

1. Get access to file using input—type=file
2. Read file as Data-URL using FileReader API
3. Define chunk length i.e. 1000 chars — to make sure it should work on chrome
4. Get first chunk accordingly; transmit and continue...

First step: Getting access to file using INPUT-File element

document.querySelector('input[type=file]').onchange = function() {
    var file = this.files[0];
};

Second step: Reading file as Data-URL using FileReader API

var reader = new window.FileReader();
reader.readAsDataURL(file);
reader.onload = onReadAsDataURL;

Third step: Defining chunk length

var chunkLength = 1000;

Fourth step: Getting chunk and transmitting...

function onReadAsDataURL(event, text) {
    var data = {}; // data object to transmit over data channel

    if (event) text = event.target.result; // on first invocation

    if (text.length > chunkLength) {
        data.message = text.slice(0, chunkLength); // getting chunk using predefined chunk length
    } else {
        data.message = text;
        data.last = true;
    }

    dataChannel.send(data); // use JSON.stringify for chrome!

    var remainingDataURL = text.slice(data.message.length);
    if (remainingDataURL.length) setTimeout(function () {
        onReadAsDataURL(null, remainingDataURL); // continue transmitting
    }, 500)
}

Fifth step: Receive chunks; store in array and...

var arrayToStoreChunks = [];
dataChannel.onmessage = function (event) {
    var data = JSON.parse(event.data);

    arrayToStoreChunks.push(data.message); // pushing chunks in array

    if (data.last) {
        saveToDisk(arrayToStoreChunks.join(''), 'fake fileName');
        arrayToStoreChunks = []; // resetting array
    }
};

Sending/Receiving files using Firefox

document.querySelector('input[type=file]').onchange = function () {
    var file = this.files[0];
    dataChannel.send(file);
};

dataChannel.onmessage = function (event) {
    var blob = event.data; // Firefox allows us send blobs directly

    var reader = new window.FileReader();
    reader.readAsDataURL(blob);
    reader.onload = function (event) {
        var fileDataURL = event.target.result; // it is Data URL...can be saved to disk
        SaveToDisk(fileDataURL, 'fake fileName');
    };
};

SaveToDisk function — old syntax

function saveToDisk(fileUrl, fileName) {
    var save = document.createElement('a');
    save.href = fileUrl;
    save.target = '_blank';
    save.download = fileName || fileUrl;

    var evt = document.createEvent('MouseEvents');
    evt.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);

    save.dispatchEvent(evt);

    (window.URL || window.webkitURL).revokeObjectURL(save.href);
}

SaveToDisk function — new syntax

function saveToDisk(fileUrl, fileName) {
    var save = document.createElement('a');
    save.href = fileUrl;
    save.target = '_blank';
    save.download = fileName || fileUrl;

    var event = document.createEvent('Event');
    event.initEvent('click', true, true);

    save.dispatchEvent(event);
    (window.URL || window.webkitURL).revokeObjectURL(save.href);
}

Links

1. Share files using File.js
2. Share Files / Demo
3. RTCDataChannel APIs for Beginners
4. RTCMultiConnection.js — A library for everything!