I am creating a small project in which ,I require video call feature. that’s why i have used WebRTC and for signaling i am using my self created socket.io server. The problem is my offer and answer are successfully created but ice candidates are not being generated here is my code
const call = document.getElementById("call")
const endcall = document.getElementById("endcall")
const videosection = document.getElementById('rightvideo')
const user1 = document.getElementById('user1') // first video pannel which shows client video
const user2 = document.getElementById('user2') //second video pannel which shows remote videos
const servers = {
iceServers:[
{
urls:['stun:stun1.l.google.com:19302','stun:stun2.l.google.com:19302']
}
]
}
const socket = io();
let localstream;
let remotestream;
let poffer;
let peerconnection;
let recieverid = undefined;
let recieversidermoteoffer;
let recieversidelocalanswer;
let sendersideoffer;
let sendersideanswer;
// sender side
socket.on('answer',async (data)=>{
data = JSON.parse(data);
console.log('answer recieved sent by ',recieverid,' ',data.ans)
sendersideanswer = data.ans;
await peerconnection.setLocalDescription(sendersideoffer);
if(!peerconnection.currentRemoteDescription)
await peerconnection.setRemoteDescription(sendersideanswer);
})
//reciever side
socket.on('offer',(data)=>{
data = JSON.parse(data);
videosection.style.display = 'flex';
recieversidermoteoffer = data.offer;
settingsteam();
createanswer();
})
//common
socket.on('candidate',async (data)=>{
data = JSON.parse(data);
await peerconnection.addIceCandidate(data.icecandidate)
})
call.onclick = ()=>{
if(recieverid)
{
callinit()
videosection.style.display = 'flex';
}
}
endcall.onclick = ()=>{
if(localstream){
localstream.getTracks().forEach((track)=>{
track.stop()
})}
videosection.style.display = 'none';
}
//function area
//sender side
let callinit = async ()=>{
settingsteam();
createpeerconnection();
// creating offer
poffer = await peerconnection.createOffer()
sendersideoffer = poffer;
socket.emit('offer',JSON.stringify({reciever:recieverid,offer:poffer}))
}
//reciever side
let createanswer = async ()=>{
createpeerconnection();
await peerconnection.setLocalDescription(recieversidelocalanswer)
await peerconnection.setRemoteDescription(recieversidermoteoffer);
let answer = await peerconnection.createAnswer();
recieversidelocalanswer = answer;
socket.emit('answer',JSON.stringify({reciever:recieverid,ans:answer}))
}
//common
let settingsteam =async ()=>{
localstream = await navigator.mediaDevices.getUserMedia({video:true,audio:false});
remotestream = new MediaStream();
user1.srcObject = localstream;
user2.srcObject = remotestream;
}
let createpeerconnection =async ()=>{
peerconnection = new RTCPeerConnection(servers);
peerconnection.onicecandidate = (e)=>{
if(e.candidate)
{
socket.emit('candidate',JSON.stringify({reciever:recieverid,icecandidate:e.candidate}))
}
}
if(!localstream)
{
localstream = await navigator.mediaDevices.getUserMedia({video:true,audio:false});
user1.srcObject = localstream
}
localstream.getTracks().forEach((track)=>{
peerconnection.addTrack(track)
})
peerconnection.ontrack = (event)=>{
event.streams[0].getTracks = (tracks)=>{
remotestream.addTrack(tracks)
}
}
}
with help of one answer on stack overflow i tried adding trans-receiver property and it did work but ice candidate were only generated on the system which initiated the call and created the offer
here is link from where i added idea of transreciever
No ICE candidates generated when I run my local webRTC application on google chrome browser