WebRTC issue with File transfer in production application

Question

Hello I am developing a WebRTC based file transfer application.I have deployed the application online using Heroku. But there seems to be a problem with file transfer specifically at the the receiving end which I have been unable to figure out. The file is transferred and received successfully when done on localhost but there is a problem with file reception when done in production. The browser used is Google Chrome if that's any help.

Here is the File reception code:

function dataChannelStateChanged() {
    if (dataChannel.readyState === 'open') {
        console.log("Data Channel open");
        dataChannel.onmessage = receiveDataChannelMessage;
    }
}

function receiveDataChannel(event) {
    console.log("Receiving a data channel");
    dataChannel = event.channel;
    dataChannel.onmessage = receiveDataChannelMessage;
}

function receiveDataChannelMessage(event) {
    console.log("From DataChannel: " + event.data);
    if (fileTransferring) {
        //Now here is the file handling code:
        fileBuffer.push(event.data);
        fileSize += event.data.byteLength;
        fileProgress.value = fileSize;

        //Provide link to downloadable file when complete
        if (fileSize === receivedFileSize) {
            var received = new window.Blob(fileBuffer);
            fileBuffer = [];

            downloadLink.href = URL.createObjectURL(received);
            downloadLink.download = receivedFileName;
            downloadLink.appendChild(document.createTextNode(receivedFileName + "(" + fileSize + ") bytes"));
            fileTransferring = false;

            //Also put the file in the text chat area
            var linkTag = document.createElement('a');
            linkTag.href = URL.createObjectURL(received);
            linkTag.download = receivedFileName;
            linkTag.appendChild(document.createTextNode(receivedFileName));
            var div = document.createElement('div');
            div.className = 'message-out';
            div.appendChild(linkTag);
            messageHolder.appendChild(div);
        }
    }
    else {
        appendChatMessage(event.data, 'message-out');
    }
}

The following image shows the problem i'm encountering when receiving the file:

Any guidance would be much appreciated.

Try `console.log("From DataChannel: " + JSON.stringify(event.data));` or `console.log("From DataChannel: ", event.data);` — Suraj Rao, Dec 17 '17 at 09:19
Just tried dosen't seem to work. The first option results in --> " From DataChannel : { } " and the second option results in --> " From DataChannel : ArrayBuffer(16384) " . What could be the possible solution for this? — Fateh AK, Dec 17 '17 at 11:21

hamidb80 · Answer 1 · 2022-02-11T08:15:55.963

-2

WEBRTC is based on UDP, it means there is no guarantee that your sequence of data transfers "in order" or successfully

use "webSocket" or a simple "http request" instead.

=============

UPDATE: see the first comment

edited Feb 11 '22 at 08:15

answered Feb 10 '22 at 14:42

hamidb80

302
3
16

1

DataChannels uses SCTP over UDP. By default it is lossless and ordered. See the paramaters in https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createDataChannel – Sean DuBois Feb 10 '22 at 17:39

WebRTC issue with File transfer in production application

1 Answers1