Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

No ICE candidates generated when I run my local webRTC application on google chrome browser

I have a basic webRTC application that supports video/audio communication and file sharing between two peers, The app runs as intended when I open it on Mozilla Firefox but when I run it on Google Chrome the onicecandidate returns null

My RTCPeerConnection

        myConnection = new RTCPeerConnection();

Setting up the peer connection

myConnection.createOffer().then(offer => {
    currentoffer = offer
    myConnection.setLocalDescription(offer);
})
    .then(function () {
        myConnection.onicecandidate = function (event) {
            console.log(event.candidate);

            if (event.candidate) {
                send({
                    type: "candidate",
                    candidate: event.candidate
                });
            }
        };
        send({
            type: "offer",
            offer: currentoffer
        });
    })
    .catch(function (reason) {
        alert("Problem with creating offer. " + reason);
    });

On Mozilla Firefox you can see in the console log all the ICE candidates that are collected on each "onicecandidate" event

Firefox output

On Chrome the output is null Chrome output

like image 879
FlubberFlubs Avatar asked Oct 28 '25 07:10

FlubberFlubs


1 Answers

You should pass options object when calling createOffer() method, e.g.:

myConnection = new RTCPeerConnection();

var mediaConstraints = {
    'offerToReceiveAudio': true,
    'offerToReceiveVideo': true    
};

myConnection.createOffer(mediaConstraints).then(offer => {
        currentoffer = offer
        myConnection.setLocalDescription(offer);
    })
    ...// the rest of you code goes here    

Alternatively, you can specify RTCRtpTransceiver before creating an offer:

myConnection = new RTCPeerConnection();

myConnection.addTransceiver("audio");
myConnection.addTransceiver("video");

myConnection.createOffer().then(offer => {
        currentoffer = offer
        myConnection.setLocalDescription(offer);
    })
    ...// the rest of you code goes here 

Sources:
WebRTC 1.0
MDN RTCPeerConnection.createOffer()
MDN RTCPeerConnection.addTransceiver()
Example -- GitHub

like image 55
orpho Avatar answered Oct 31 '25 06:10

orpho