WebRTC error using laravel and simple-peer for data channel - ajax

Question

This is my first webRTC project so I'm very inexperienced in tracing these sorts of errors. Especially since I'm using this NPM package, I don't know exactly what to do with this error message. If you follow that link, I've just copy/pasted the "usage" demo code but replaced some of it with sockets using Laravel echo to transfer the peer-to-peer connection data. In the "usage" demo, they generate an "offer" object and have you paste it into the other peers form. Then that client generates an "answer" object and when you paste it into the form on the initiating client, the connection is made. If I do it that way, everything works fine. But I'm trying to establish an auto-connection when all the clients are ready. Here is my code:
var Peer = require("simple-peer");
window.p = new Peer({
initiator: location.hash === "#1",
trickle: false
});
p.on("error", err => console.log("error", err));
p.on("signal", data => {
if (location.hash === "#1") {
$.ajax({
url: "/autoCon",
type: "get",
data: {
connectionData: JSON.stringify(data)
},
success: function() {
console.log("sent: " + JSON.stringify(data));
}
});
}
});
p.on("connect", () => {
console.log("CONNECT");
});
And then on the blade file, I'm listening with Echo like this:
Echo.channel('myChannel')
.listen('MyEvent', (e) => {
p.signal(e.connectionData)
});
And now for the error:
Failed to execute 'setRemoteDescription' on 'RTCPeerConnection': Failed to set remote offer sdp: Failed to apply the description for 0: Failed to setup RTCP mux.
If I console log p.signal(e.connectionData), it shows "undefined", which is strange because it's generating the "answer" object and displaying to the page in text. So what I've tried to do is ajax send the initial "offer" object to the second peer, then take its "answer" object and signal for the initiating peer to connect when the data is received by socket. But it's giving me that error. Can anyone help?

Answer 1

I ended up figuring this out. This is my final code. It might be messy but it took me like 6 hours into the night and it made my brain hurt XD . If anyone can offer some advice on how to clean it up, I'll gladly take it but this works as is.
in app.js:
p.on("signal", data => {
//document.querySelector("#outgoing").textContent = JSON.stringify(data);
$.ajax({
url: "/autoCon",
type: "get",
data: {
conData: JSON.stringify(data)
}
});
});
And in my blade file using Echo:
var signalData = []
Echo.channel('myChannel')
.listen('MyEvent', (e) => {
signalData.push(e.conData)
if(e.conData.includes('offer') && location.hash !== '#1'){
console.log('received offer')
p.signal(JSON.parse(e.conData))
} else {
if(e.conData.includes('answer') && location.hash === '#1' ){
console.log('received answer')
p.signal(JSON.parse(signalData[1]))
}
}
});