Skip to contentSkip to navigationSkip to topbar
Rate this page:
On this page

Reconnection States and Events


(warning)

Warning

This page is for reference only. We are no longer onboarding new customers to Programmable Video. Existing customers can continue to use the product until December 5, 2024(link takes you to an external page).
We recommend migrating your application to the API provided by our preferred video partner, Zoom. We've prepared this migration guide(link takes you to an external page) to assist you in minimizing any service disruption.


Overview

overview page anchor

This guide introduces the Reconnection States and Events and provides guidance on how to use them effectively in your Twilio Video applications. Whenever there are disruptions in network connectivity, the Twilio Video SDK will attempt to re-establish the signaling and media connections to the Room. The Reconnection States and Events can be used by the application logic to update its user interface accordingly.


Room Reconnection States and Events

room-reconnection-states-and-events page anchor

The Room.state property represents the status of the application's signaling and media connections to the Room and its Participants. When the application joins a Room, it will transition to the "connected" state. Similarly, when the application disconnects from a Room, it will transition to the "disconnected" state. Apart from these basic states, there are two Reconnection Events:

reconnecting - when the application is trying to re-establish its signaling and/or media connections to the Room. When the Room transitions to this state, it will emit the "reconnecting" event as follows:


_10
room.on('reconnecting', error => {
_10
assert.equal(room.state, 'reconnecting');
_10
if (error.code === 53001) {
_10
console.log('Reconnecting your signaling connection!', error.message);
_10
} else if (error.code === 53405) {
_10
console.log('Reconnecting your media connection!', error.message);
_10
}
_10
/* Update the application UI here */
_10
});

reconnected - when the application has successfully re-established its signaling and media connections to the Room. The Room will transition to the "connected" state and will emit the "reconnected" event as follows:


_10
room.on('reconnected', () => {
_10
assert.equal(room.state, 'connected');
_10
console.log('Reconnected your signaling and media connections!');
_10
/* Update the application UI here */
_10
});

If the application fails to re-establish its signaling connection to the Room, then the Room transitions to the "disconnected" state, and emits the "disconnected" event as follows:


_10
room.on('disconnected', (room, error) => {
_10
assert.equal(room.state, 'disconnected');
_10
if (error.code === 20104) {
_10
console.log('Signaling reconnection failed due to expired AccessToken!');
_10
} else if (error.code === 53000) {
_10
console.log('Signaling reconnection attempts exhausted!');
_10
} else if (error.code === 53002) {
_10
console.log('Signaling reconnection took too long!');
_10
}
_10
});


RemoteParticipant Reconnection States and Events

remoteparticipant-reconnection-states-and-events page anchor

The RemoteParticipant.state property represents the status of the RemoteParticipant's signaling connection to the Room. When the RemoteParticipant joins a Room, it will transition to the "connected" state. Similarly, when the RemoteParticipant disconnects from a Room, it will transition to the "disconnected" state. Apart from these basic states, there are two Reconnection Events:

reconnecting - when the RemoteParticipant is trying to re-establish its signaling connection to the Room. When the RemoteParticipant transitions to this state, it will emit the "reconnecting" event as follows:


_10
remoteParticipant.on('reconnecting', () => {
_10
assert.equal(remoteParticipant.state, 'reconnecting');
_10
console.log(`${remoteParticipant.identity} is reconnecting the signaling connection to the Room!`);
_10
/* Update the RemoteParticipant UI here */
_10
});

participantReconnecting - alternative Room-level event for RemoteParticipant's "reconnecting" event.


_10
room.on('participantReconnecting', remoteParticipant => {
_10
assert.equals(remoteParticipant.state, 'reconnecting');
_10
console.log(`${remoteParticipant.identity} is reconnecting the signaling connection to the Room!`);
_10
/* Update the RemoteParticipant UI here */
_10
});

reconnected - when the RemoteParticipant has successfully re-established its signaling connection to the Room. The Remote transitions to the "connected" state and will emit the "reconnected" event as follows:


_10
remoteParticipant.on('reconnected', () => {
_10
assert.equals(remoteParticipant.state, 'connected');
_10
console.log(`${remoteParticipant.identity} has reconnected the signaling connection to the Room!`);
_10
/* Update the RemoteParticipant UI here */
_10
});

participantReconnected - alternative Room-level event for RemoteParticipant's "reconnected" event.


_10
room.on('participantReconnected', remoteParticipant => {
_10
assert.equals(remoteParticipant.state, 'connected');
_10
console.log(`${remoteParticipant.identity} has reconnected the signaling connection to the Room!`);
_10
/* Update the RemoteParticipant UI here */
_10
});


Reconnection States and EventsTwilio Video SDK versions
Media Reconnection (Room)twilio-video.js@1.9.0+
Media + Signaling Reconnection (Room)twilio-video.js@2.0.0+
Signaling Reconnection (RemoteParticipant)twilio-video.js@2.1.0+
Media + Signaling Reconnection (RemoteParticipant)Coming Soon

Preventing Reconnection Failure due to Expired AccessToken

preventing-reconnection-failure-due-to-expired-accesstoken page anchor

Let's say that you have created an AccessToken that is valid for 1 hour and then use it to join a Room. After 1 hour and 15 minutes, due to some network disruption or handoff, the Twilio Video SDK attempts to reconnect to the Room. Because the AccessToken is expired at this time, the reconnection will fail, and you will be disconnected from the Room. In order to prevent this from happening, make sure that you create AccessTokens that are valid for the maximum allowed session duration, which is currently 24 hours (86,400 seconds).

If you are concerned that this AccessToken can be re-used later by a malicious actor, you can scope the AccessToken to a particular Room and an identity, thereby making sure that no one can re-use the AccessToken to join another Room even though it is still valid in terms of its Time-To-Live.


_22
const AccessToken = require('twilio').jwt.AccessToken;
_22
_22
/**
_22
* Create an AccessToken that is valid for 24 hours.
_22
*/
_22
const token = new AccessToken(
_22
'your_twilio_account_sid',
_22
'your_twilio_api_key',
_22
'your_twilio_api_secret',
_22
{ ttl: 86400 });
_22
_22
/**
_22
* Scope the AccessToken to a particular identity.
_22
*/
_22
token.identity = 'alice';
_22
_22
/**
_22
* Scope the AccessToken to a particular Room.
_22
*/
_22
token.addGrant(new VideoGrant({
_22
room: 'my-room'
_22
}));


Handling Browser Session Termination and Page Navigation

handling-browser-session-termination-and-page-navigation page anchor

When a Participant closes the tab/browser or navigates away from your application, we recommend that you disconnect from the Room so that other Participants are immediately notified. You can achieve this as follows:


_10
window.addEventListener('beforeunload', () => {
_10
room.disconnect();
_10
});


Rate this page: