WebRTC, JS, node.js App working locally through remote server but not different connections

Question

I have recently started to look at inter-browsers communications, and got paricularly interested in webRTC. I am trying at the moment to build a file transfer through a Data Channel with the beginner oriented library provided here :

• https://github.com/muaz-khan/WebRTC-Experiment/tree/master/DataChannel .

My application is visible here : https://shirase-ttt.jit.su/Dropzone.html

It does a basic file transfer on drop of a file. The problem is, it works between 2 tabs of your own browser (Chrome tested only, but different locations). But as soon as you try it between 2 different internet connections/locations, it stop working. The channel is established but the file isn't sent. I have no idea where I should start looking, the code seems fine, as it works locally (test yourself, see steps below) but I can't swear I haven't made a mistake, would anybody help?

Steps for testing :

• Open https://shirase-ttt.jit.su/Dropzone.html on 2 tabs of your browser / 2 browsers.

• Tab1 creates a channel name and clicks Connect.

• Tab2 enters the same channel name and clicks join.

• After a few seconds, you should see all the Channel info in the console. From this point on, you can drop a small file in the box of any client, and see it downloading through the console of the second client. I use a ~100kb image, which takes about 15seconds to dl. It is quite impressive.

I then tested with a friend remotely. After establishing the channel. You see the file being sent, but nothing is received.

The code :

Client : https://github.com/xShirase/RTC-Exploring/blob/master/Dropzone.html

Server : https://github.com/xShirase/RTC-Exploring/blob/master/ttt.js

on the server, only lines 1-34 are relevant, the rest is for different works. Yes, I have tried stripping it naked. No, it doesn't change anything.

Any ideas are welcome. Thanks. I'm thinking it may be an issue with the hosting, maybe https redir messing up things? I don't know, to be honest. Which is why I write here.

Also, I have another request. The web is at the moment undergoing a revolution in many ways. we have the chance to find ourselves at the very beginning of the curve, where everything is still to do, but enough is done to have some fun. So I'd like to put up a team of people, not professionals, but who are eager to learn as much as they can and do as much as they can to push in the right direction. The point I'm personally at is : Good understanding of sockets, good scripting skills, not pro enough I guess, and lots of ideas. I wanna explore webRTC, understand it properly as it evolves, and participate to this evolution. I'm sure I'm not the only one, so to anyone interested and with similar motivations, let's learn faster by working in groups. Contact me.

Disclaimer : The second part of this post may not be in the right website, I'm not sure. But it's where it can be seen, and that's what I'm looking for. Nothing professional or any obligations of any kind, just code, test ideas, that sort of things. If anyone has issues with that part, edit, flag, downvote, or maybe talk first ;-)

Thanks.

Answer 1

It is NAT traversing issue. DataChannel.js used " only " STUN. Now, it is fixed because using two TURN servers, too. If it is still failing for your; try to use " your own " TURN server.

STUN = {
    url: !moz ? 'stun:stun.l.google.com:19302' : 'stun:23.21.150.121'
};

TURN1 = {
    url: 'turn:73922577-1368147610@108.59.80.54',
    credential: 'b3f7d809d443a34b715945977907f80a'
};

TURN2 = {
    url: 'turn:webrtc%40live.com@numb.viagenie.ca',
    credential: 'muazkh'
};

iceServers = {
    iceServers: options.iceServers || [STUN]
};

if (!moz && !options.iceServers) {
    iceServers.iceServers[1] = TURN1;
    iceServers.iceServers[2] = TURN2;
}