WebRTC – 如何在提供和答案之后build立对等连接

我有一个node.js运行用户将连接到。 报价和答案将通过node.js生成并发送。

我试图build立一个对等连接,并通过相机stream发送。 我尝试了我的代码,而不使用ICE候选人作为在同一子网中的计算机。 之后我尝试着实施ICE。 我不知道我是否做得对,或者如果计算机在同一个子网上,甚至是需要的。

var localStream; //Connect to signaling server var signalingChannel = io.connect('http://85.134.54.193:8001'); console.log("Connect to signaling server"); var servers = null; var video1; var video2; var audio1; var audio2; var cfg = {"iceServers":[{"url":"stun:stun.l.google.com:19302"}]};//{ "iceServers": [{ "url": "stun:stun.l.google.com:19302" }] }; var con = { 'optional': [{'DtlsSrtpKeyAgreement': true}, {'RtpDataChannels': true }] }; var peerConnection; //Runs after the page has been loaded window.onload=function(){ //Gets ID for the video element which will display the local stream video1 = document.getElementById("audio1"); //Gets ID for the video element which will display the remote stream video2 = document.getElementById("audio2"); audio1 = document.getElementById("audio1"); audio2 = document.getElementById("audio2"); } //Start button function function caller(){ peerConnection = new webkitRTCPeerConnection(cfg); navigator.webkitGetUserMedia({'audio':true, video:true}, function (stream) { console.log("Got local audio", stream); video1.src = window.webkitURL.createObjectURL(stream) peerConnection.addStream(stream); }, function ( err ) { console.log( 'error: ', err ); }); console.log("Calling"); //Create Offer peerConnection.createOffer(function (offerDesc) { console.log("Created local offer", offerDesc.sdp); peerConnection.setLocalDescription(offerDesc); }, function () { console.warn("Couldn't create offer"); }); //ICE Candidates Generator peerConnection.onicecandidate = function(evt) { //When The Ice Gathering is complete if (evt.target.iceGatheringState == "complete") { //Create a new offer with ICE candidates peerConnection.createOffer(function(offer) { console.log("Offer with ICE candidates: " + offer.sdp); signalingChannel.emit('offer', JSON.stringify(offer)); console.log("offer sent"); signalingChannel.on('answer', function(data){ console.log("Receive answer"); //The answer is set as the remote description for the offerer peerConnection.setRemoteDescription(new RTCSessionDescription(JSON.parse(data))); console.log("Set remote desc"); peerConnection.onaddstream = gotRemoteStream; console.log("Add remote stream to peer connection"); }); }); } } } function answerer(){ peerConnection = new webkitRTCPeerConnection(cfg); navigator.webkitGetUserMedia({'audio':true, video:true}, function (stream) { console.log("Got local audio", stream); video1.src = window.webkitURL.createObjectURL(stream) peerConnection.addStream(stream); }, function ( err ) { console.log( 'error: ', err ); }); console.log("Answering"); //Listen for offer signalingChannel.on('offer', function(data){ console.log("Offer Received"); //Set the remote description from caller's local description peerConnection.setRemoteDescription(new RTCSessionDescription(JSON.parse(data))); //Generate answer after getting the remote description peerConnection.createAnswer(function(sessionDescription) { //Set local description peerConnection.setLocalDescription(sessionDescription); //The local desc will be the answer sent back to offerer signalingChannel.emit('answer', JSON.stringify(sessionDescription)); console.log("Answer sent"); }); }); } function gotRemoteStream(event){ video2.src = window.webkitURL.createObjectURL(event.stream); } 

以下是我今天(2014年2月)在Chrome中执行的一系列活动。 这是为了简化的情况,对等点1将stream式传输到对等点2。

  1. 为同伴交换消息设置一些方法。 (不同的WebRTC代码示例是如此不可通约的,但是在心理上,在你的代码组织中,试图将这个逻辑与其他逻辑分开)。
  2. 在每一方面,为重要的信令消息设置消息处理程序。 你可以设置它们并保留它们。 有3个核心消息处理和发送:
    • 从另一方发送的候选冰==>用它调用addIceCandidate
    • 一个提供信息==> SetRemoteDescription ,然后做出回答并发送
    • 回答信息===> SetRemoteDescription
  3. 在每一方面,创build一个新的peerconnection对象,并附加事件处理程序的重要事件:onicecandidate,onremovestream,onaddstream等
    • 冰候选人===>发送给对方
    • stream添加===>附加到video元素,所以你可以看到它
  4. 当两个对等体都存在并且所有处理程序都到位时,对等体1会获得某种触发消息来启动video捕获(使用getUserMedia调用)
  5. 一旦getUserMedia成功,我们有一个stream。 在对等体1的对等连接对象上调用addStream
  6. 然后 – 只有这样 – 同伴1才能报价
  7. 由于我们在步骤2中设置的处理程序,对等2得到这个并发送一个答案
  8. 与此同时(并且有些模糊地),对等连接对象开始产生候选冰。 他们在两个同伴之间来回发送并处理(上述步骤2和3)
  9. 由于以下两个条件,stream式传输本身是不透明的:
    • 报价/答复交换
    • 冰候选人收到,交换,并添加

当我想改变stream,我回到步骤3,并build立一个新的对等连接对象,再次做整个报价/答案。

为什么在创build答案之前等待ICE完成? 那么同时做什么呢? 这可能会有所帮助,因为它只是为了同时工作。 如果你可以在这之后发布你的日志,那么它仍然不能工作,我们可以尝试更进一步的debugging。 如果你想看到一个audio的例子(它发送音乐 – audio和麦克风 – audio) 在这里检查,和github源 。 使用node.js和ws插件制作服务器。 audio连接适用于webRTC。