webRTC ondatachannel() and onopen() eventlisteners not firing - django

Question

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:
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:
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")

Answer 1

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.