メニュー

Expand
ページを評価:

Reconnection States and Events

概要

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

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:

room.on('reconnecting', error => {
  assert.equal(room.state, 'reconnecting');
  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. The Room will transition to the "connected" state and will emit the “reconnected” event as follows:

room.on('reconnected', () => {
  assert.equal(room.state, 'connected');
  console.log('Reconnected your signaling and media connections!');
  /* 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) => {
  assert.equal(room.state, 'disconnected');
  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!');
  }
});

RemoteParticipant Reconnection States and Events

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:

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

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

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

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:

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

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

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

アベイラビリティ

Reconnection States and Events Twilio 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) 近日登場

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();
});
ページを評価:

ヘルプが必要ですか?

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

        
        
        

        フィードバックくださりありがとうございます!

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

        Sending your feedback...
        🎉 Thank you for your feedback!
        Something went wrong. Please try again.

        Thanks for your feedback!

        Refer us and get $10 in 3 simple steps!

        ステップ1

        Get link

        Get a free personal referral link here

        ステップ2:

        Give $10

        Your user signs up and upgrade using link

        ステップ3

        Get $10

        1,250 free SMSes
        OR 1,000 free voice mins
        OR 12,000 chats
        OR more