RTCPeerConnection: connectionstatechange event

Baseline2023

Since May 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Theconnectionstatechange event is sent to theonconnectionstatechange event handler on anRTCPeerConnection object after a new track has been added to anRTCRtpReceiver which is part of the connection.The new connection state can be found inconnectionState, and is one of the string values:new,connecting,connected,disconnected,failed, orclosed.

This event is not cancelable and does not bubble.

Syntax

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

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

Event type

A genericEvent.

Examples

For anRTCPeerConnection namedpeerConnection, this example usesaddEventListener() to handle changes to the connectivity of the WebRTC session.It calls an app-defined function calledsetOnlineStatus() to update a status display.

peerConnection.addEventListener(  "connectionstatechange",  (event) => {    switch (peerConnection.connectionState) {      case "new":      case "connecting":        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;    }  },  false,);

You can also create a handler for theconnectionstatechange event using theRTCPeerConnection.onconnectionstatechange property:

peerConnection.onconnectionstatechange = (ev) => {  switch (peerConnection.connectionState) {    case "new":    case "connecting":      setOnlineStatus("Connecting…");      break;    // …    default:      setOnlineStatus("Unknown");      break;  }};