WebRTC - 如何在提议和应答之后建立点对点连接

Question

我有一个运行的node.js，用户将连接到它。offer和answer将通过node.js生成并发送。

我试图建立对等连接并传输相机流。我尝试在计算机位于同一子网时不使用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);
}

- FlowerPower1990

---

你最终解决了这个问题吗？ - sandover

Answer 1

以下是我在Chrome中成功运行的一系列事件（截至2014年2月）。这是一个简化的情况，其中peer 1将向peer 2流视频。

1. 建立一些方法让对等方交换信息。（不幸的是，人们完成这个任务的方式多种多样，这就导致了不同的WebRTC代码示例之间存在着很大的差异。但在思维和代码组织上，尽量将这个逻辑与其他部分分离开来。）
2. 在每一方面，设置重要信令消息的消息处理程序。您可以将它们设置并保持开启状态。有3个核心消息需要处理和发送：
   • 从另一侧发送的ice候选项==>使用它调用addIceCandidate
   • 提供消息==>使用它SetRemoteDescription，然后进行回复并发送
   • 答案消息===>SetRemoteDescription与它
3. 在每一方面，创建一个新的peerconnection对象，并为重要事件附加事件处理程序：onicecandidate、onremovestream、onaddstream等。
   • 冰候选项===>将其发送到另一侧
   • 添加流===>将其附加到视频元素上，以便您可以看到它
4. 当两个对等方都在场并且所有处理程序都到位时，对等方1会收到某种触发消息来开始视频捕获（使用getUserMedia调用）
5. 一旦getUserMedia成功，我们就有了一个流。在对等方1的peerconnection对象上调用addStream。
6. 然后——只有这时——对等方1才会发出提供请求
7. 由于我们在步骤2中设置的处理程序，对等方2会收到此请求并发送答案
8. 与此同时（有点难以理解），对等连接对象开始生成ice候选项。它们在两个对等方之间来回发送并处理（参见上述第2和第3步）
9. 流媒体自动启动，作为以下两个条件的结果：
   • 提供/应答交换
   • 接收、交换和添加冰候选项

当我想要改变流时，我回到第3步，设置一个新的对等连接对象，并重新执行整个offer/answer过程。

- sandover

Answer 2

为什么在创建答案之前要等待ICE完成呢？同时进行不是更好吗？因为它只是同时工作的。如果您在此之后仍然无法正常工作，请发布日志，我们可以进一步尝试调试。如果您想查看仅音频的示例（它发送音乐音频和麦克风音频），请单击这里，以及github源代码。服务器使用node.js和ws插件制作。音频连接使用webRTC。

- MarijnS95