WebRTC工作在本地,但不能跨不同的IP地址

WebRTC works locally, but not across different IP addresses

本文关键字:IP 地址 但不能 工作 WebRTC      更新时间:2023-09-26

我的代码在Github上:https://github.com/rashadrussell/webrtc_experiment/blob/master/public/script.js

我正在尝试用WebRTC编写1对1视频视频会议脚本。并被存储在云托管网站AppFog上。当我在一台计算机上使用两个不同的Chrome窗口进行测试时,它可以在我的本地主机上工作。当我在家里两台不同的电脑上测试它时,它也可以在AppFog上运行。

当我和住在不同房子的朋友一起测试我的应用程序时,问题就出现了。未设置远程流。我唯一的猜测是IP地址出现了一些错误,这意味着Ice候选人的设置出了问题。所有弹出的都是一个黑盒,其中应该是远程流。

下面是我的一些代码:

客户端

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},
    (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)) );
    }
});

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

pc = new rtcPeerConnection(servers, options);

在通过server变量发送服务器信息时,您需要提及TURN服务器的地址以及STUN服务器。通常情况下,由于NAT或防火墙,数据被阻塞,TURN应该在这种情况下提供帮助。

有关服务器的更多详细信息,可以查看https://gist.github.com/yetithefoot/7592580