OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Ice candidates not generated in WebRtc

  • Thread starter Thread starter Naman Gupta
  • Start date Start date
N

Naman Gupta

Guest
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

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

<p>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</p>
<pre><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)
}
}


}
</code></pre>
<p>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</p>
<p>here is link from where i added idea of transreciever</p>
<p><a href="https://stackoverflow.com/questions...run-my-local-webrtc-application-on-google-chr">No ICE candidates generated when I run my local webRTC application on google chrome browser</a></p>
 
Top