javascript - 如何使用 offer/answer 交换来自两个对等连接的流

Question

我正在尝试设置视频聊天，其中两个对等连接交换视频。这发生在创建数据通道之后。所以这是事件的过程:

1. offerer 创建数据通道，offerer 创建并提供，answerer 创建答案。到目前为止，一切都很好。我们有一个数据通道。
2. offerer通过getUserMedia获取视频流并添加到peer connection，然后是offereronnegotiation事件> 触发，offerer 创建一个新的 offer，而 answerer 响应一个答案。还是一切都好。 提议者正在直播。
3. answerer 通过getUserMedia 获取视频流并将其添加到对等连接中，offerer 创建新的报价，同时answerer 回应一个答案。还可以。 answerer 也在流式传输。

但是，如果我切换第 2 步和第 3 步(因此 answerer 首先开始流式传输)，那么事情就会开始出错。只有在步骤 1、3 和 2 都发生后，双方才必须开始流式传输。

我很确定这与 SDP 报价和答案的顺序有关。

当我让应答者在它有一个onnegotiationneeded 事件时创建一个新提议时，行为是不同的但仍然不稳定。

我现在对如何添加报价和答案一无所知。

代码如下:

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
PeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection || window.RTCPeerConnection;
IceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate || window.RTCIceCandidate;
SessionDescription =  window.mozRTCSessionDescription || window.webkitRTCSessionDescription || window.RTCSessionDescription;

var videoOfferer = document.getElementById('videoOfferer');
var videoAnswerer = document.getElementById('videoAnswerer');
var buttonOfferer = document.getElementById('buttonOfferer');
var buttonAnswerer = document.getElementById('buttonAnswerer');

var servers = {
    iceServers: [
        {url: "stun:23.21.150.121"},
        {url: "stun:stun.1.google.com:19302"}
    ]
};

var offerer = new PeerConnection(servers), answerer = new PeerConnection(servers);
var channelOfferer = null, channelAnswerer = null;

offerer.onicecandidate = function(e) {
    if(e.candidate == null) return;
    answerer.addIceCandidate(new IceCandidate(e.candidate), function(){}, error);
};

offerer.onaddstream = function(e) {
    videoOfferer.src = URL.createObjectURL(e.stream);
    videoOfferer.play();
};

answerer.onicecandidate = function(e) {
   if(e.candidate == null) return;
    offerer.addIceCandidate(new IceCandidate(e.candidate), function(){}, error);
};

answerer.onaddstream = function(e) {
    videoAnswerer.src = URL.createObjectURL(e.stream);
    videoAnswerer.play();
};

function offerCreated(sdp) {
    console.log('offer');
    offerer.setLocalDescription(new SessionDescription(sdp), function() {
        answerer.setRemoteDescription(new SessionDescription(sdp), function() {
            answerer.createAnswer(answerCreated, error);
        }, error);
    }, error);
}

function answerCreated(sdp) {
    console.log('answer');
    answerer.setLocalDescription(new SessionDescription(sdp), function() {
    }, error);
    offerer.setRemoteDescription(new SessionDescription(sdp), function() {
    }, error);
}

function error() {}

buttonOfferer.addEventListener('click', function() {
    navigator.getUserMedia({audio: true, video: true}, function(stream) {
        offerer.addStream(stream);
    }, function(){});
});

buttonAnswerer.addEventListener('click', function() {
    navigator.getUserMedia({audio: true, video: true}, function(stream) {
        answerer.addStream(stream);
    }, function(){});
});

channelOfferer = offerer.createDataChannel('channel', {reliable: true});

offerer.createOffer(offerCreated, error);

answerer.ondatachannel = function(e) {
    channelOfferer = e.channel;
    channelOfferer.onmessage = function(e) {
        console.log(e.data);
    };
    channelOfferer.onmessage = function(e) {
        console.log(e.data);
    };

      // these are added later
    offerer.onnegotiationneeded = function() {
        offerer.createOffer(offerCreated, error);
    };

    answerer.onnegotiationneeded = function() {
        offerer.createOffer(offerCreated, error);
    };
};

Answer 1

我认为问题出在第 3 步，当回答者添加视频时，您让提供者启​​动。在真正的远程调用中，提议者怎么知道要这样做？

据我所知，当应答者需要重新协商时， Angular 色实际上被颠倒了，因为出于重新协商的目的:重新协商者充当提议者，而非重新协商者充当提议者回答者。

换句话说:对pc.onnegotiationneeded 的响应总是:

1. createOffer(),
2. 然后setLocalDescription(描述)
3. 然后发送pc.localDescription给对方

不分边。

我不是 SDP 方面的权威，所以我不确定这是正确的方法，但是 the examples in the spec至少向我表明上述步骤是正确的，并且我是这样工作的。

我已经在 this Firefox jsfiddle 中对此进行了测试它似乎有效。 fiddle 使用说明:

1. 没有服务器(因为它是一个 fiddle )，所以按 Offer 按钮并复制报价。
2. 将报价粘贴到另一个选项卡或另一台机器上同一 fiddle 中的同一位置。
3. 按 ENTER，然后复制您得到的答案并将其粘贴回第一个 fiddle 。
4. 您现在已连接到两个数据通道:一个用于聊天，另一个用于发送信号。
5. 现在在任一端按 addTrack，另一端应该会显示视频。
6. 按另一个方向的 addTrack，您应该可以双向播放视频。

这会产生眩光吗？我敢肯定，可能有更好的方法来处理这个问题，但这似乎对我有用。