Не срабатывают переключатели событий webRTC ondatachannel() и onopen()

I am creating a webRTC connection to transmit data between 2 peers. Currently, I am stuck in the stage of getting the channel.readyState to get into "open" state. Can someone help me understand why the "ondatachannel()" in code block 2 and the "onopen()" in codeblock 1 eventlisteners do not fire? It works when I manually enter all the code in my dev tool consoles. I am using django backend with django channels for sdp exchange.

Инициирование RTCPeerConnection и отправка localdescription на мой back end.

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

Output on dev tool console:

Код на стороне удаленного пира. Запускается при загрузке страницы и отправляет локальное описание через back end, а затем через каналы 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,
          });
    }
  );

Output on dev tool console:

Возвращаемся на сторону хоста. Код срабатывает после запуска djangochannelsocket.onmessage() на той же вкладке браузера, что и блок кода 1 (первый блок кода выше).

...
   

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

...

Вывод на консоль dev tool: (как вы можете видеть, строка "connection opened!" из eventlistener onopen() не выводится, а команда dc.readyState в консоли dev tools браузера показывает только "connecting")

Вернуться на верх