PubNub webrtc only working on local network

3
votes

Ive asked a question about this before but without any luck.. Im having problems following this tutorial https://www.pubnub.com/blog/2014-10-21-building-a-webrtc-video-and-voice-chat-application/ . Ive written the code and it works flawlessly on local network, but when i try to connect with a remote client(i.e. not on the same network) the code doesnt work anymore. It just shows a black screen where the video from the client should be.

phone.receive(function(session){
    session.connected(function(session){
        $("#vid-box").append(session.video); //outputs black screen
    });

    session.ended(function(session) {alert("Call ended: "+session.number});
});

Ive even contacted PubNub but they were unable to help. Anyone has any ideas?

2
javascriptwebrtcpubnubstunturn

2 Answers

7
votes

WebRTC Double NAT Oh no!

⚠️ TURN Server NOT PROVIDED ⚠️

Make sure you are not on NAT network forwarding. Otherwise you'll need TURN servers (not provided). TURN Servers broker network traffic and allow constrained network video conversations. Most mobile providers are basic open routing (non-NAT). Most corporate firewalls have at least one NAT.

  • TURN Streams BINARY VIDEO. Needed for NATed networks but not required.
  • STUN Resolves IP Address. Peer to Peer discovery.
  • PUBNUB Sends IP Address.

WebRTC

STUN provides the IP Address. There is nothing in WebRTC to provide a means to exchange that IP Address between the connecting clients. This is where PubNub comes in.

STURN versus TURN server WebRTC

WebRTC Resources and SDK Links

2
votes

So, iv'e finally managed to make it work. i simply added Turn/Stun servers to the pubnub call function, following the tutorial mentioned here: https://xirsys.com/pubnub-part-2/ Thanks alot @PubNub for your suggestion.

function get_xirsys_servers() {
    var servers;
    $.ajax({
        type: 'POST',
        url: 'https://service.xirsys.com/getIceServers',
        data: {
            room: 'default',
            application: 'default',
            domain: 'www.thedomainyoucreated.com',
            ident: 'yourxirsysident',
            secret: 'secret-token-from-xirsys-dash',
        },
        success: function(res) {
            res = JSON.parse(res);
            if (!res.e) servers = res.d.iceServers;
        },
        async: false
    });
    return servers;
}

//Request to connect to Remote User
function makeCall( remoteId ){
    if (!window.phone) alert("Login First!");
    else if( !remoteId ) alert("The call id is missing or invalid!");
    else phone.dial( remoteId, get_xirsys_servers() );
}