Search code examples
djangowebrtc

webRTC ondatachannel() and onopen() eventlisteners not firing

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.

Instantiating RTCPeerConnection and sending localdescription to my 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: enter image description here

Code on the remote peer's side. Runs on page load and will send the local description via the back end and then via django channels to the host.

  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: enter image description here

back to the host's side. Code fires upon triggering djangochannelsocket.onmessage() on the same browser tab as code block 1(first code block above).

...
   

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

...

Output on dev tool console:(as you can see the "connection opened!" string from the onopen() eventlistener does not print and dc.readyState command in the browser dev tools console only shows "connecting") enter image description here

Solution

  • You are not exchanging ice candidates, merely printing the updated SDP. Without exchanging ice candidates, the connection won't get established and the datachannel won't open.