Use the event name in methods likeaddEventListener(), or set an event handler property.

addEventListener("iceconnectionstatechange", (event) => { })oniceconnectionstatechange = (event) => { }

A genericEvent.

A successful connection attempt will typically involve the state starting atnew, then transitioning throughchecking, thenconnected, and finallycompleted. However, under certain circumstances, theconnected state can be skipped, causing a connection to transition directly from thechecking state tocompleted. This can happen when only the last checked candidate is successful, and the gathering and end-of-candidates signals both occur before the successful negotiation is completed.

When an ICE restart is processed, the gathering and connectivity checking process is started over from the beginning, which will cause theiceConnectionState to transition toconnected if the ICE restart was triggered while in thecompleted state. If ICE restart is initiated while in the transientdisconnected state, the state transitions instead tochecking, essentially indicating that the negotiation is ignoring the fact that the connection had been temporarily lost.

When the negotiation process runs out of candidates to check, the ICE connection transitions to one of two states. If no suitable candidates were found, the state transitions tofailed. If at least one suitable candidate was successfully identified, the state transitions tocompleted. The ICE layer makes this determination upon receiving the end-of-candidates signal, which is provided by callingaddIceCandidate() with a candidate whosecandidate property is an empty string (""), or by setting theRTCPeerConnection propertycanTrickleIceCandidates tofalse.

An event handler for this event can be added using theoniceconnectionstatechange property or by usingaddEventListener() on theRTCPeerConnection.

In this example, a handler foriceconnectionstatechange is set up to update a call state indicator by using the value oficeConnectionState to create a string which corresponds to the name of a CSS class that we can assign to the status indicator to cause it to reflect the current state of the connection.

pc.addEventListener(  "iceconnectionstatechange",  (ev) => {    let stateElem = document.querySelector("#call-state");    stateElem.className = `${pc.iceConnectionState}-state`;  },  false,);

This can also be written as:

pc.oniceconnectionstatechange = (ev) => {  let stateElem = document.querySelector("#call-state");  stateElem.className = `${pc.iceConnectionState}-state`;};

• WebRTC API
• RTCPeerConnection
• RTCPeerConnection.iceConnectionState