如何通过提供/应答从两个对等连接交换流

我正在尝试设置视频聊天，其中两个对等连接交换视频。创建数据通道后会发生这种情况。那么事件的流程是这样的：

1. offerer创建数据通道，offerer创造并提供，answerer创建一个答案。到目前为止，一切都很好。我们有一个数据通道。
2. offerer获取视频流获取用户媒体并将其添加到对等连接中，然后谈判的事件offerer fires, offerer创建新报价，同时answerer给出答案。还是一切都好。这offerer正在流式传输。
3. answerer获取视频流获取用户媒体并将其添加到对等连接中，offerer创建新报价，同时answerer给出答案。还在。这answerer也在流媒体。

但是，如果我交换步骤 2 和 3 （所以answerer首先开始流式传输）然后事情开始出错。只有在步骤 1、3 和 2 全部完成后，双方才可以开始直播。

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

当我让应答者创建一个新的报价时需要谈判如果行为不同但仍然不稳定。

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

这是代码：

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);
    };
};

我认为问题出在第 3 步，当应答者添加视频时，要约者启动。在真正的远程调用中，报价者如何知道要这样做？

据我了解，当应答者需要重新协商时，角色实际上就会颠倒过来，因为为了重新谈判的目的：谈判者充当要约者，非谈判者充当应答者。

换句话说：响应pc.onnegotiationneeded总是：

1. createOffer(),
2. then setLocalDescription(description)
3. 然后发送pc.localDescription到另一边

无论一边。

我不是 SDP 的权威，所以我不确定这是正确的方法，但是规范中的示例至少向我表明上述步骤是正确的，并且我是这样工作的。

我已经对此进行了测试这个 Firefox jsfiddle这似乎有效。小提琴使用说明：

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

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