Level up your Twilio API skills in TwilioQuest, an educational game for Mac, Windows, and Linux. Download Now

メニュー

Expand
Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

Reconnection States and Events

概要

This guide introduces the Room’s 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.

Usage

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 States:

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

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

reconnected - when the application has successfully re-established its signaling and media connections to the Room. When the Room transitions to this state, it will emit the “reconnected” event as follows:

room.on('reconnected', () => {
  /* Update the application UI here */
});

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:

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

アベイラビリティ

Reconnection States and Events Twilio Video SDK versions
Media Reconnection twilio-video.js@1.9.0+
Media + Signaling Reconnection twilio-video.js@2.0.0-beta9+

Preventing Reconnection Failure due to Expired AccessToken

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 4 hours.

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.

const AccessToken = require('twilio').jwt.AccessToken;

/**
 * Create an AccessToken that is valid for 4 hours.
 */
const token = new AccessToken(
  'your_twilio_account_sid',
  'your_twilio_api_key',
  'your_twilio_api_secret',
  { ttl: 14400 });

/**
 * Scope the AccessToken to a particular identity.
 */
token.identity = 'alice';

/**
 * Scope the AccessToken to a particular Room.
 */
token.addGrant(new VideoGrant({
  room: 'my-room'
}));

Handling Browser Session Termination and Page Navigation

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:

window.addEventListener('beforeunload', () => {
  room.disconnect();
});
Rate this page:

ヘルプが必要ですか?

誰しもが一度は考える「コーディングって難しい」。そんな時は、お問い合わせフォームから質問してください。 または、Stack Overflow でTwilioタグのついた情報から欲しいものを探してみましょう。