WebRTC Peer ontrack called but video not playing

Question

I have remote peer which send video to local peer. Where I am using my own signalling server.

The flow is like,

1. Remote peer send offer to local peer through signalling server.

2. Local peer accept offer and create answer, then send it to remote peer through signalling server.

3. Remote peer accept answer and start sending video, peer to peer.

   I am having some issue in createAnswer section at local peer. If I manually send the answer to remote peer by clicking a button then the video play fine. But of send the answer from inside pc.onicecandidate it doesn't work.

Below is the code

 var answer;
 async function createAnswer(offer) {
   
   if (pc.signalingState != "stable") return;
   await pc.setRemoteDescription({type: "offer", sdp: offer});
   await pc.setLocalDescription(await pc.createAnswer());
   pc.onicecandidate = ({candidate}) => {
     if (candidate) return;
      answer = pc.localDescription.sdp;
      sendAnswerToSignalingServer({ peer_type: "web",remote_peer: "RPi_Dev", type: "answer",  name: userLoggedIn, sdp:answer }); 

   };
 }

Using above code every thing works except playing video, even the event

pc.ontrack = function (event) {
  remoteVideo.srcObject =event.streams[0];
  //alert('new stream added! ' + event.streams[0]);
}

get called but the video not playing.

But if I comment sendAnswerToSignalingServer above and send the answer through button click then everything works fine,

function sendSignalButtonClick(){
   sendAnswerToSignalingServer({ peer_type: "web",remote_peer: "RPi_Dev", type: "answer",  name: userLoggedIn, sdp:answer }); 
}

I think some coding problem in createAnswer section.

I am referring the code from here WebRTC datachannel with manual signaling, example please? .

Can anyone help me to resolve the problem.

Edit: full code

var userLoggedIn = "userWeb";
const config = {iceServers: [{urls: "stun:stun.l.google.com:19302"}]};
const pc = new RTCPeerConnection(config);

const dc = pc.createDataChannel("chat", {negotiated: true, id: 0});


pc.ontrack = function (event) {
  remoteVideo.srcObject = event.streams[0];

}

 
 var SDP;
 async function createAnswer(offer) {
   
   if (pc.signalingState != "stable") return;
   await pc.setRemoteDescription({type: "offer", sdp: offer});
   const answer = await pc.createAnswer();
   await pc.setLocalDescription(answer);
    pc.onicecandidate = async ({candidate}) => {
    if (candidate) return;
       SDP = await pc.localDescription.sdp;
       sendToWebSocket({ peer_type: "web",remote_peer: "RPi_Dev", type: "answer",  name: userLoggedIn, sdp:SDP }); 
     
   };
 

 }

async function sendSignalButtonClick() {
   SDP = await pc.localDescription.sdp;
   sendToWebSocket({ peer_type: "web",remote_peer: "RPi_Dev", type: "answer",  name: userLoggedIn, sdp:SDP }); 
}
 

function SendMessage(message) {
   dc.send(message);

 };


//********************************Signaling server part***************************/

var webSockConn = new WebSocket('wss://220.168.551.150:7000');

webSockConn.onopen = function () { 
    console.log("Connected to the signaling server"); 
    sendToWebSocket({ peer_type: "web",remote_peer: "RPi_Dev", type: "login",  name: userLoggedIn }); 
};


//when we got a message from a signaling server 
webSockConn.onmessage = function (msg) { 
   console.log("Got message", msg.data);
    
   var data = JSON.parse(msg.data);
    
   switch(data.type) { 
      case "offer": 
     console.log(data);
         createAnswer(data.offer, data.name); 
         break; 
      case "leave": 
         handleLeave(); 
         break; 
      default: 
         break; 
   } 
};
  
webSockConn.onerror = function (err) { 
   console.log("webSockConn----Got error", err); 
};

function handleLeave(){

   console.log("Leaving ......................"); 
}
  
//alias for sending JSON encoded messages 
function sendToWebSocket(message) { 
   //attach the other peer username to our messages 
   if (userLoggedIn) { 
      message.name = userLoggedIn; 
   } 
    
   webSockConn.send(JSON.stringify(message)); 
};



/*********************************************************************************/

Answer 1

Try to create the answer with await:

answer = await pc.localDescription.sdp;

To change the function to async:

pc.onicecandidate = async ({candidate}) => {