WebRTC在本地工作，但不能在不同的IP地址上工作

Question

My code is on Github at: https://github.com/rashadrussell/webrtc_experiment/blob/master/public/script.js

I am trying to write a 1-to-1 video video conferencing script with WebRTC. And is being stored on AppFog, a cloud hosting website. It works on my localhost when I test with two different Chrome windows on a single computer. It also works on AppFog when I test it on two different computers at home.

The problem occurs when I test my app with a friend living at a different house. The remote streams are not being set. My only guess is that there is some error with IP addresses, which means something is wrong my the setup of Ice Candidates. All that pops up is a black box where the remote stream is supposed to be.

Here is some of my code:

**Client-Side**

var isInitiator = false;


socket.on('initiatorFound', function(data) {
    isInitiator = data.setInitiator;
    console.log("Is Initiator? " + isInitiator);
});


navigator.getMedia = (
        navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia
    );

navigator.getMedia(
    {video: true, audio: false},
    function(stream) {
        var video = document.getElementById("localView");
        video.src = window.URL.createObjectURL(stream);
        console.log("Add Stream");
        sendMessage('streamAdd', {streamAdded: 'stream-added'});

        createPeerConnection();
        pc.addStream(stream);

        if(isInitiator)
        {
            callPeer();
        }

    },
    function(err) {
        console.log("The following error occured: ");
        console.dir(err);
    }

);


function sendMessage(type, message)
{
    console.log("Sending Message");
    socket.emit('message',{
        "type": type,
        "message": message
    });
}

function createPeerConnection() {

    pc = new rtcPeerConnection(servers, options);
    console.dir(pc);

    pc.onicecandidate = function(evt) {
        if(evt.candidate == null) return; 
        pc.onicecandidate = null;           

        console.log("Send Ice Candidate");
        sendMessage("iceCandidate", JSON.stringify(evt.candidate));
    };

    pc.onaddstream = function(evt) {
        document.body.append("<video id='remoteVideo' autoplay></video>");
        var remoteVid = document.getElementById("remoteVideo");
        remoteVid.src = window.URL.createObjectURL(evt.stream);
    };

}


function callPeer() {

    pc.createOffer(function (offer) {
            pc.setLocalDescription(offer, function() {
                sendMessage("offer", JSON.stringify(offer));
            });
            console.log("Send Offer");
        }, function(err) { console.log("Offer Error: " + err) },
            videoConstraints
        );

}

function answerPeer() {

    pc.createAnswer(function(answer) {
        pc.setLocalDescription(answer);
        sendMessage("answer", JSON.stringify(answer))
    }, function(err) { console.log("Sending Answer Error: " + err) },
        videoConstraints
    );

}

socket.on('message', function(message) {
    console.log("CONSOLE MESSAGE:");
    console.dir(message);

    if(message.type == 'streamAdd') {
        console.log('Stream was added');
        createPeerConnection();

        if(isInitiator) {
            callPeer();
        }

    } else if(message.type == 'offer') {

        pc.setRemoteDescription( new rtcSessionDescription(JSON.parse(message.message)));

        if(!isInitiator)
        {
            console.log("Sending Answer");
            answerPeer();
        }


    } else if(message.type == 'answer') {
        pc.setRemoteDescription( new rtcSessionDescription(JSON.parse(message.message)));
    } else if(message.type == 'iceCandidate') {
        console.log("Get Ice Candidate");
        pc.addIceCandidate(new rtcIceCandidate(JSON.parse(message.message)) );
    }

});

Server-Side

var isInitiator = false;
io.sockets.on('connection', function(socket) {

    if (!isInitiator) {
      isInitiator = true;
      socket.emit('initiatorFound', {setInitiator: isInitiator});
    } else {
      socket.emit('initiatorFound', {setInitiator: !isInitiator});
    }

    // Signaling Channel
    socket.on('message', function(message) {

      if (message.type == 'streamAdd') {
        console.log('Got message: ' + message);
      }
      //socket.emit('message' ,message);
      // Should be:
      socket.broadcast.emit('message', message);

    });

});

Answer 1

In the line

pc = new rtcPeerConnection(servers, options);

While sending the server info through the server variable, you need to mention the addr of TURN servers as well along withthe STUN server. Typically the data gets blocked due to NAT or firewall and TURN should help in that case.

For more server details, you can check out https://gist.github.com/yetithefoot/7592580