WebRTC问题与生产应用程序中的文件传输

时间:2017-12-17 09:17:10

标签: javascript file webrtc file-transfer rtcdatachannel

您好我正在开发基于WebRTC的文件传输应用程序。我已使用Heroku在线部署了该应用程序。但是在接收端特别是文件传输似乎存在问题,我一直无法弄清楚。在localhost上完成传输和接收文件,但在生产中完成文件接收时出现问题。如果有任何帮助,使用的浏览器是Google Chrome。

这是文件接收代码:

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');
    }
}

下图显示了我在收到文件时遇到的问题:

Receiving side

非常感谢任何指导。

0 个答案:

没有答案