RTCPeerConnection: connectionstatechange event

The connectionstatechange event is sent to the onconnectionstatechange event handler on an RTCPeerConnection object after a new track has been added to an RTCRtpReceiver which is part of the connection. The new connection state can be found in connectionState, and is one of the string values: new, connecting, connected, disconnected, failed, or closed.

This event is not cancelable and does not bubble.

Syntax

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

addEventListener("connectionstatechange", (event) => {});

onconnectionstatechange = (event) => {};

Event type

A generic Event.

Examples

For an RTCPeerConnection, pc, this example sets up a handler for connectionstatechange messages to handle changes to the connectivity of the WebRTC session. It calls an app-defined function called setOnlineStatus() to update a status display.

pc.onconnectionstatechange = (ev) => {
  switch (pc.connectionState) {
    case "new":
    case "checking":
      setOnlineStatus("Connecting…");
      break;
    case "connected":
      setOnlineStatus("Online");
      break;
    case "disconnected":
      setOnlineStatus("Disconnecting…");
      break;
    case "closed":
      setOnlineStatus("Offline");
      break;
    case "failed":
      setOnlineStatus("Error");
      break;
    default:
      setOnlineStatus("Unknown");
      break;
  }
};

You can also create a handler for connectionstatechange by using addEventListener():

pc.addEventListener(
  "connectionstatechange",
  (ev) => {
    switch (
      pc.connectionState
      // …
    ) {
    }
  },
  false
);

Specifications

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

Browser compatibility

BCD tables only load in the browser

See also