Reconnect a Call or Conversation's Media

Overview

This guide covers how to reconnect to a call or a conversation's media in your JavaScript Vonage Client application.

Automatically Reconnect

The JavaScript Client SDK will automatically reconnect to a call or a conversation's media if a connection goes out for a couple of seconds without you needing to do anything.

The following is for the situations where a browser window/tab is accidentally closed/refreshed or the user wants to switch audio inputs and are still within the 20-second time limit to reconnect.

Considerations

There are a few things that need to be in place for the reconnection to happen successfully.

  1. The application must create a new JWT for the reconnecting user with their unique username in order to instantiate the Application Object which has the reconnectCall and getConversation methods.
  2. The Conversation Id and RTC (or Leg) Id will also be needed to reconnect the user.

This means that these values (username, Conversation Id, and RTC Id ) will need to be stored in the browser so they can be recovered when the application reloads. Both localStorage and sessionStorage can be used to store the data. The one you choose will depend on your use case.

There is an optional mediaParams parameter that can be added to modify the MediaStream object and do things like changing the audio input device. Visit the documentation to view all the arguments.

Reconnect a Call

application.reconnectCall(
    "conversation_id",
    "rtc_id",
    { audioConstraints: { deviceId: "device_id" } }
).then((nxmCall) => {
    console.log(nxmCall);
}).catch((error) => {
    console.error("error reconnecting call", error);
});
A sample application can be found in this GitHub repo.

Note: When reconnected, you will automatically join the call. No need to answer() on the Call Object.

Reconnect a Conversation's media

conversation.media.enable({ 
    reconnectRtcId: "UUID",
    audioConstraints: { deviceId: "device_id" }
}).then((stream) => {
    console.log(stream)
}).catch((error) => {
    console.error("error renabling media", error);
});