RTCPeerConnection: icegatheringstatechange event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

The icegatheringstatechange event is sent to the onicegatheringstatechange event handler on an RTCPeerConnection when the state of the ICE candidate gathering process changes. This signifies that the value of the connection's iceGatheringState property has changed.

When ICE first starts to gather connection candidates, the value changes from new to gathering to indicate that the process of collecting candidate configurations for the connection has begun. When the value changes to complete, all of the transports that make up the RTCPeerConnection have finished gathering ICE candidates.

Note: While you can determine that ICE candidate gathering is complete by watching for icegatheringstatechange events and checking for the value of iceGatheringState to become complete, you can also have your handler for the icecandidate event look to see if its candidate property is null. This also indicates that collection of candidates is finished.

This event is not cancelable and does not bubble.

Syntax

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

js
addEventListener("icegatheringstatechange", (event) => {});

onicegatheringstatechange = (event) => {};

Event type

A generic Event.

Examples

This example creates a handler for icegatheringstatechange events.

js
pc.onicegatheringstatechange = (ev) => {
  let connection = ev.target;

  switch (connection.iceGatheringState) {
    case "gathering":
      /* collection of candidates has begun */
      break;
    case "complete":
      /* collection of candidates is finished */
      break;
  }
};

Likewise, you can use addEventListener() to add a listener for icegatheringstatechange events:

js
pc.addEventListener(
  "icegatheringstatechange",
  (ev) => {
    let connection = ev.target;

    switch (connection.iceGatheringState) {
      case "gathering":
        // collection of candidates has begun
        break;
      case "complete":
        // collection of candidates is finished
        break;
    }
  },
  false,
);

Specifications

Specification
WebRTC: Real-Time Communication in Browsers
# dom-rtcpeerconnection-onicegatheringstatechange

Browser compatibility

BCD tables only load in the browser

See also