我的代码在 Github 上:https://github.com/rashadrussell/webrtc_experiment/blob/master/public/script.js
我正在尝试使用 WebRTC 编写一对一视频视频 session 脚本。并存储在云托管网站 AppFog 上。当我在一台计算机上使用两个不同的 Chrome 窗口进行测试时，它可以在我的本地主机上运行。当我在家里的两台不同计算机上测试它时，它也适用于 AppFog。
当我和一个住在不同房子里的 friend 一起测试我的应用程序时，问题就出现了。未设置远程流。我唯一的猜测是 IP 地址有一些错误，这意味着我的 Ice Candidates 设置有问题。弹出的只是一个黑框，远程流应该位于此位置。
这是我的一些代码:
客户端
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);
在通过服务器变量发送服务器信息时，您需要提及 TURN 服务器的地址以及 STUN 服务器。通常，数据会由于 NAT 或防火墙而被阻止，在这种情况下，TURN 应该会有所帮助。
更多服务器详情，可以查看https://gist.github.com/yetithefoot/7592580
关于javascript - WebRTC 在本地工作，但不能跨不同的 IP 地址，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22677221/