Audio+Video+TextChat+FileSharing.html

[liuyang274498]

hi all, I have integrated the TextChat+FileSharing in my application,when I send a *.docx ,my problem is the following: Uncaught RangeError: Offset is outside the bounds of the DataView at DataView.getUint8 () at unpack (FileBufferReader.js:807) at unpack (FileBufferReader.js:946) at deserialize (FileBufferReader.js:1118) at Object.unpack (FileBufferReader.js:1149) at FileBufferReader.ConvertToObject [as convertToObject] (FileBufferReader.js:474) at Object.onDataChannelMessage (RTCMultiConnection.js:2047) at RTCDataChannel.channel.onmessage (RTCMultiConnection.js:4155) FileBufferReader.js:1153 Uncaught SyntaxError: Unexpected token l in JSON at position 2 at JSON.parse () at MultiPeers.onDataChannelMessage (RTCMultiConnection.js:2383) at Object.onDataChannelMessage (RTCMultiConnection.js:2040) at RTCMultiConnection.js:2048 at Object.unpack (FileBufferReader.js:1151) at FileBufferReader.ConvertToObject [as convertToObject] (FileBufferReader.js:474) at Object.onDataChannelMessage (RTCMultiConnection.js:2047) at RTCDataChannel.channel.onmessage (RTCMultiConnection.js:4155) Thanks for your help.

[muaz-khan]

Need to rewrite FileBufferReader. Here is a quick solution to share files:

getDataURL(file, function(dataURL) {
    connection.send({
        fileName: file.name,
        fileType: file.type,
        dataURL: dataURL
    });
});

function getDataURL(file, callback) {
    var reader = new FileReader();
    reader.onload = function(event) {
        callback(event.target.result);
    };
    reader.readAsDataURL(file);
}

Here is how to receive above file:

connection.onmessage = function(event) {
    if (event.data.fileName) {
        var blob = dataURItoBlob(event.data.dataURL);
        var file = new File([blob], event.data.fileName, {
            type: event.data.fileType
        });
        var url = URL.createObjectURL(file);
        window.open(url);
        // invokeSaveAsDialog(file);
        return;
    }
};

function dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    var blob = new Blob([ab], {
        type: mimeString
    });
    return blob;
}

[ajingopi]

I am not receiving video files on the other end..!!

Solved..!! Thanks..!!

[asifalikhan]

Hi muaz. using this solution how to check progress of file? onFileStart(), onProgress(), onFileEnd().

[Ladoli]

@asifalikhan

You can somewhat simulate them by using dataURItoBlob.

function dataURItoBlob(dataURI) {

// <----- FILE START CODE ----->
    var byteString = atob(dataURI.split(',')[1]);
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
// <----- FILE PROGRESS CODE ----->
    }

    var blob = new Blob([ab], {
        type: mimeString
    });
// <----- FILE END CODE ----->
    return blob;
}

It would depend what you want to do with them. For instance, File start code could alert users file transfer is in progress. File progress could make a bar rise (length of bar determined by byteString.length perhaps) and File End just before everything is finished, Or you can even put File End code after you call the dataURItoBlob() in your code.