webRTC 命令和信令服务器
webRTC order and signaling server
所以我正在尝试通过 socket.io
的信令服务器建立 webRTC 视频连接。我已经通过了 setLocalDescription
,这使我能够获得 ice 候选人,我相信从阅读中这是正确的方法,但我如何添加 ice 候选人。我看到我必须使用类似下面的内容:myPeerConnection.addIceCandidate(RTCIceCandidate);
但是我是否将它添加到我的远程和本地对等连接中?我是否将 evt.candidates
发送到我的信令服务器并将它们添加到那里?如果是这样,怎么做?添加到对等连接的变量不是全局的。我已经为此工作了几天,我想我现在只需要一个指南,比在线教程更好的东西,我已经看过我能找到的所有东西。
这是附在我的 html 上的代码:client.js
var socket = io.connect();
var myPeerConnection;
var remotePeerConnection;
var offer;
var PeerConnectionWindow = (window.RTCPeerConnection || window.mozRTCPeerConnection
|| window.webkitRTCPeerConnection || window.msRTCPeerConnection);
var SessionDescription = (window.RTCSessionDescription || window.mozRTCSessionDescription
|| window.webkitRTCSessionDescription || window.msRTCSessionDescription);
function hasUserMedia() {
//check if the browser supports the WebRTC
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia);
}
if (hasUserMedia()) {
var configuration = {
"iceServers": [{ "url": "stun:stun.1.google.com:19302" }]
};
myPeerConnection = new PeerConnectionWindow(configuration);
console.log(myPeerConnection);
remotePeerConnection = new PeerConnectionWindow(configuration);
console.log(remotePeerConnection);
myPeerConnection.createOffer(gotDescription, onError);
myPeerConnection.onicecandidate = function(evt){
if(event.candidate){
socket.emit('ice', JSON.stringify({'ice': evt.candidate}));
remotePeerConnection.addIceCandidate(evt.candidate);
console.log("connected my to remote");
}
};
remotePeerConnection.onicecandidate = function(evt){
if(event.candidate){
socket.emit('ice', JSON.stringify({'ice': evt.candidate}));
myPeerConnection.addIceCandidate(evt.candidate);
console.log("connected my to remote");
}
};
remotePeerConnection.onaddstream = function (evt) {
console.log("on added stream");
var remoteVid = document.getElementById('remote');
remoteVid.src = window.URL.createObjectURL(evt.stream);
}
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia
|| navigator.mozGetUserMedia || navigator.msGetUserMedia;
//enabling video and audio channels
navigator.getUserMedia({ video: true, audio: true }, function (stream) {
var video = document.getElementById('local');
// //inserting our stream to the video tag
video.src = window.URL.createObjectURL(stream);
myPeerConnection.addStream(stream);
}, onError);
} else {
alert("WebRTC is not supported");
}
function gotDescription(desc) {
offer = desc
myPeerConnection.setLocalDescription(offer, myPeerConnLocalDescSet, onError);
socket.emit('description', JSON.stringify({'sdp': desc}));
}
function onError(err){
console.log(err);
}
function myPeerConnLocalDescSet(){
remotePeerConnection.setRemoteDescription(offer, remotePeerConnRemoteDescSet,onError);
}
function remotePeerConnRemoteDescSet(){
remotePeerConnection.createAnswer(onAnswerCreated, onError);
}
function onAnswerCreated(description){
answer = description;
remotePeerConnection.setLocalDescription(answer, remotePeerLocalDescSet,onError);
}
function remotePeerLocalDescSet(){
myPeerConnection.setRemoteDescription(answer, myPeerRemoteDescSet,onError);
}
function myPeerRemoteDescSet(){
console.log('did we get it?');
}
这是我的信令服务器:server.js
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
app.use(express.static(__dirname + '/'));
server.listen(process.env.PORT || 3000, function(){
console.log('listening on *:3000');
});
io.sockets.on('connection', function(socket){
console.log("in the socket on server");
socket.on('disconnect', function(){
console.log('user disconnected');
});
socket.on('description', function(data){
console.log(data);
});
socket.on('ice', function(data){
// Do I attempt to add the candidate here like so?: myPeerConnection.addIceCandidate(new RTCIceCandidate(data));
});
});
更新
所以看起来一切都按顺序流动,所以我更新了我的代码。现在我只需要有关如何在两个对等点之间交换 SDP 信息的帮助。我现在所拥有的是将它们发送到 Socket.io
以供双方提取和应用...对吗?有人有一些示例代码是如何完成的,他们可以给我解释一下。请并感谢您的帮助!
第一次实现总是很棘手,ICE 候选接口(添加和打开)确实非常混乱。您可以查看该图表以了解何时调用哪个事件以及应该使用什么 API 。可以看到在本地创建了一个candidate(onIceCandidate事件),需要通过signaling传给远端,在远端使用addIceCandidateAPI添加。由于它是对称的,onIceCandidate 总是提供本地候选,而 addIceCandidate 总是将远程候选作为参数。
http://www.slideshare.net/alexpiwi5/overviewpeerconnectionlifetime
因此,如果有人感兴趣,我通过一些基本教程了解了如何与 socket.io 通信,但最重要的是,我发现 webrtc 的顺序非常重要。在获得正确的代码并调用点对点之后,点对点仍未完成,这是因为 ONADDSTREAM 必须在远程调用,并且在创建报价之前必须在本地调用 ADDSTREAM
这是给那些在如此简单的事情上浪费了几个小时的人的。
所以我正在尝试通过 socket.io
的信令服务器建立 webRTC 视频连接。我已经通过了 setLocalDescription
,这使我能够获得 ice 候选人,我相信从阅读中这是正确的方法,但我如何添加 ice 候选人。我看到我必须使用类似下面的内容:myPeerConnection.addIceCandidate(RTCIceCandidate);
但是我是否将它添加到我的远程和本地对等连接中?我是否将 evt.candidates
发送到我的信令服务器并将它们添加到那里?如果是这样,怎么做?添加到对等连接的变量不是全局的。我已经为此工作了几天,我想我现在只需要一个指南,比在线教程更好的东西,我已经看过我能找到的所有东西。
这是附在我的 html 上的代码:client.js
var socket = io.connect();
var myPeerConnection;
var remotePeerConnection;
var offer;
var PeerConnectionWindow = (window.RTCPeerConnection || window.mozRTCPeerConnection
|| window.webkitRTCPeerConnection || window.msRTCPeerConnection);
var SessionDescription = (window.RTCSessionDescription || window.mozRTCSessionDescription
|| window.webkitRTCSessionDescription || window.msRTCSessionDescription);
function hasUserMedia() {
//check if the browser supports the WebRTC
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia);
}
if (hasUserMedia()) {
var configuration = {
"iceServers": [{ "url": "stun:stun.1.google.com:19302" }]
};
myPeerConnection = new PeerConnectionWindow(configuration);
console.log(myPeerConnection);
remotePeerConnection = new PeerConnectionWindow(configuration);
console.log(remotePeerConnection);
myPeerConnection.createOffer(gotDescription, onError);
myPeerConnection.onicecandidate = function(evt){
if(event.candidate){
socket.emit('ice', JSON.stringify({'ice': evt.candidate}));
remotePeerConnection.addIceCandidate(evt.candidate);
console.log("connected my to remote");
}
};
remotePeerConnection.onicecandidate = function(evt){
if(event.candidate){
socket.emit('ice', JSON.stringify({'ice': evt.candidate}));
myPeerConnection.addIceCandidate(evt.candidate);
console.log("connected my to remote");
}
};
remotePeerConnection.onaddstream = function (evt) {
console.log("on added stream");
var remoteVid = document.getElementById('remote');
remoteVid.src = window.URL.createObjectURL(evt.stream);
}
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia
|| navigator.mozGetUserMedia || navigator.msGetUserMedia;
//enabling video and audio channels
navigator.getUserMedia({ video: true, audio: true }, function (stream) {
var video = document.getElementById('local');
// //inserting our stream to the video tag
video.src = window.URL.createObjectURL(stream);
myPeerConnection.addStream(stream);
}, onError);
} else {
alert("WebRTC is not supported");
}
function gotDescription(desc) {
offer = desc
myPeerConnection.setLocalDescription(offer, myPeerConnLocalDescSet, onError);
socket.emit('description', JSON.stringify({'sdp': desc}));
}
function onError(err){
console.log(err);
}
function myPeerConnLocalDescSet(){
remotePeerConnection.setRemoteDescription(offer, remotePeerConnRemoteDescSet,onError);
}
function remotePeerConnRemoteDescSet(){
remotePeerConnection.createAnswer(onAnswerCreated, onError);
}
function onAnswerCreated(description){
answer = description;
remotePeerConnection.setLocalDescription(answer, remotePeerLocalDescSet,onError);
}
function remotePeerLocalDescSet(){
myPeerConnection.setRemoteDescription(answer, myPeerRemoteDescSet,onError);
}
function myPeerRemoteDescSet(){
console.log('did we get it?');
}
这是我的信令服务器:server.js
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
app.use(express.static(__dirname + '/'));
server.listen(process.env.PORT || 3000, function(){
console.log('listening on *:3000');
});
io.sockets.on('connection', function(socket){
console.log("in the socket on server");
socket.on('disconnect', function(){
console.log('user disconnected');
});
socket.on('description', function(data){
console.log(data);
});
socket.on('ice', function(data){
// Do I attempt to add the candidate here like so?: myPeerConnection.addIceCandidate(new RTCIceCandidate(data));
});
});
更新
所以看起来一切都按顺序流动,所以我更新了我的代码。现在我只需要有关如何在两个对等点之间交换 SDP 信息的帮助。我现在所拥有的是将它们发送到 Socket.io
以供双方提取和应用...对吗?有人有一些示例代码是如何完成的,他们可以给我解释一下。请并感谢您的帮助!
第一次实现总是很棘手,ICE 候选接口(添加和打开)确实非常混乱。您可以查看该图表以了解何时调用哪个事件以及应该使用什么 API 。可以看到在本地创建了一个candidate(onIceCandidate事件),需要通过signaling传给远端,在远端使用addIceCandidateAPI添加。由于它是对称的,onIceCandidate 总是提供本地候选,而 addIceCandidate 总是将远程候选作为参数。
http://www.slideshare.net/alexpiwi5/overviewpeerconnectionlifetime
因此,如果有人感兴趣,我通过一些基本教程了解了如何与 socket.io 通信,但最重要的是,我发现 webrtc 的顺序非常重要。在获得正确的代码并调用点对点之后,点对点仍未完成,这是因为 ONADDSTREAM 必须在远程调用,并且在创建报价之前必须在本地调用 ADDSTREAM
这是给那些在如此简单的事情上浪费了几个小时的人的。