webRTC ondatachannel() 和 onopen() 事件监听器没有触发

Question

我正在创建一个 webRTC 连接以在 2 个对等点之间传输数据。目前，我停留在让 channel.readyState 进入“打开”状态的阶段。有人能帮我理解为什么 code block 2 中的“ondatachannel()”和 codeblock 1 事件监听器中的“onopen()”没有触发吗？当我在我的开发工具控制台中手动输入所有代码时，它会起作用。我正在使用带有 django 通道的 django 后端进行 sdp 交换。

实例化 RTCPeerConnection 并将本地描述发送到我的后端。

  function hostroom(){
    lc = new RTCPeerConnection()
    dc = lc.createDataChannel("channel")
    dc.onmessage = e =>("Just got a message " + e.data);
    dc.onopen = e => console.log("Connection opened!")
    lc.onicecandidate = function(e){
      console.log("icecandidate created");
    }
    lc.createOffer().then(o => lc.setLocalDescription(o)).then(a => console.log("set successfully!")).then(
      function (){
        var ice = JSON.stringify(lc.localDescription);
        console.log(ice);
        var csrftoken = $("[name=csrfmiddlewaretoken]").val();

        var p={{p.id}}
        $.ajax({
            type: 'POST',
            url: '{% url 'createroom' %}',
            data:{
              "ice": ice,
              "csrfmiddlewaretoken": csrftoken,
              "p": p,
            },
            success: function (data) {
              alert(data["response"])
            }
          });
      }
    )

开发工具控制台上的输出：

远程端的代码。在页面加载时运行，并将通过后端发送本地描述，然后通过 django 通道发送到主机。

  const rc = new RTCPeerConnection();
  rc.onicecandidate = function(e){
    console.log("New Ice Candidate reprinting SDP " + JSON.stringify(rc.localDescription));

  }

  rc.ondatachannel = e => {
    rc.dc = e.channel;
    rc.dc.onmessage = e => console.log("new message from client! " + e.data);
    rc.dc.onopen = e => console.log("Connection opened!");
  };
  var offer = {{icecandidate|safe}}
  rc.setRemoteDescription(offer).then(a => console.log("offer set!"));
  rc.createAnswer().then(a => rc.setLocalDescription(a)).then(a => console.log("local d set!")).then(
    function(){
      var answer = JSON.stringify(rc.localDescription)
      console.log(answer)
      var csrftoken = $("[name=csrfmiddlewaretoken]").val();
      var user = document.getElementById("account").text.split(":")[1];
      var room_name="{{room_name}}"
      console.log(room_name);
      $.post("{% url 'connecttoleader' %}", {
            "answer": answer,
            "csrfmiddlewaretoken": csrftoken,
            "user": user,
            "room_name": room_name,
          });
    }
  );

开发工具控制台上的输出：

回到主人身边。在与代码块 1（上面的第一个代码块）相同的浏览器选项卡上触发 djangochannelsocket.onmessage() 时触发代码。

...
   

     var csrftoken = $("[name=csrfmiddlewaretoken]").val();
     console.log(JSON.parse(sdp))
     lc.setRemoteDescription(JSON.parse(sdp)) 
     console.log("set")
     channel = "dc"
     $.ajax({
                      type: 'POST',
                      url: '{% url 'connectpeer' %}',
                      data:{
                        "channel": channel,
                        "csrfmiddlewaretoken": csrftoken,
                        "user": user,
                      },
                      success: function (data) {
                        alert(data["response"])
                      }
                    });

...

开发工具控制台上的输出：（如您所见，来自 onopen() 事件监听器的“连接已打开！”字符串未打印，浏览器开发工具控制台中的 dc.readyState 命令仅显示“正在连接” )

Answer 1

您不是在交换 ice candidates，只是在打印更新后的 SDP。如果不交换 ice candidates，连接将无法建立，数据通道将无法打开。

webRTC ondatachannel() 和 onopen() 事件监听器没有触发

webRTC ondatachannel() and onopen() eventlisteners not firing

django

webrtc