No ice candidates / Unable to connect peers Webrtc

Question

I tried implementing the webrtc code from Webrtc.org peerconnection guide. Although no valid ice candidates are generated. I also noticed in the sdp the localhost ip (127.0.0.1) is always used even if I run the application on different devices. In Firefox I do get a icecandidate event. Although the event.candidate == null.

Anything i'm doing wrong?

Here is the code:

let socket = io()
let localStream = null;
const configuration = {
    'iceServers': [{
        'urls': 'stun:stun.l.google.com:19302'
    }]
}
let peerConnection = new RTCPeerConnection(configuration)

// init video media
function start() {
    navigator.mediaDevices.getUserMedia({
        audio: true,
        video: true
    }).then(stream => {
        localVideo.srcObject = stream
        localStream = stream
    })
    for (let track of localStream.getTracks()) {
        peerConnection.addTrack(track, localStream)
    }
}

// starts the call
async function call() {
    const offer = await peerConnection.createOffer()
    await peerConnection.setLocalDescription(offer)
    socket.emit('offer', offer)
}

peerConnection.onicecandidate = event => {
    if (event.candidate) {
        socket.emit('newIceCandidate', event.candidate)
    }
}


// Listen for remote ICE candidates and add them to the local RTCPeerConnection

socket.on('newIceCandidate', async candidate => {
    try {
        await peerConnection.addIceCandidate(candidate)
    } catch (e) {
        console.log(e)
    }
})

// Is never called
peerConnection.addEventListener('connectionstatechange', event => {
    if (peerConnection.connectionState === 'connected') {
        console.log('CONNECTED PEER')
    }
})


// user 1 receiving data from other
socket.on('answer', async remoteDescription => {
    const remoteDesc = new RTCSessionDescription(remoteDescription)
    await peerConnection.setRemoteDescription(remoteDesc)
})

// user 2 getting init message
socket.on('offer', async offer => {
    peerConnection.setRemoteDescription(new RTCSessionDescription(offer))
    const answer = await peerConnection.createAnswer()
    await peerConnection.setLocalDescription(answer)
    socket.emit('answer', answer)
})

/////////////// Less relevant /////////////////


peerConnection.oniceconnectionstatechange = state => {
    console.log('ice state change!')
}

peerConnection.ontrack = ({
    streams: [stream]
}) => remoteVideo.srcObject = stream


function stop() {

}

start()

Answer 1

Before webrtc negotiate, you have to add your track to peerconnection object.

But In your code, you didn't.

getUserMedia function is Promise.

So try like this

// init video media
function start() {
    navigator.mediaDevices.getUserMedia({
        audio: true,
        video: true
    }).then(stream => {
        localVideo.srcObject = stream
        localStream = stream

        for (let track of localStream.getTracks()) {
            peerConnection.addTrack(track, localStream)
        }
    })
}