Joining a call from a link (Deeplinking)

Many video calling apps that offer video and audio conferencing features, support joining a call from a link. This is a great way to allow users to join a call without having to go through many complex steps.

In the next few steps, we will show how such a flow can be implemented using the Stream’s React Video SDKs.

Define the URL structure

The first step is to define the URL structure that will be used to join a call. Typically, the URL will contain the following information:

• your app’s domain
• an optional route pointing to the calling features of your app
• the call ID
• optional call type information, in case your app supports multiple call types

In our example, we will use the following URL structure:

• https://myapp.com/join?call_id=123&call_type=default

Get call information and join a call

Once the user opens the link, your app needs to read the call ID and call type from the URL as they are required parameters for our SDK. Next, we will use the call information to setup and join the call.

In the example below, we will use standard browser APIs to read the call ID and call type from the URL.

import {
  CallControls,
  SpeakerLayout,
  StreamCall,
  StreamVideo,
  StreamVideoClient,
} from "@stream-io/video-react-sdk";

const urlParams = new URLSearchParams(window.location.search);
const callId = urlParams.get("call_id");
const callType = urlParams.get("call_type") || "default"; // or your custom call type

// initialize the client, call and join the call
const client = new StreamVideoClient({ apiKey, user, token });
const call = client.call(callType, callId);
await call.join();

export const MyCallingApp = () => {
  return (
    <StreamVideo client={client}>
      <StreamCall call={call}>
        <SpeakerLayout />
        <CallControls />
      </StreamCall>
    </StreamVideo>
  );
};

Integration popular routing libraries

In the React ecosystem, there are many routing libraries that can be used to handle routing in your app. In the next few steps, we will show how you can integrate the Stream’s React Video SDKs with some of the most popular routing libraries.

React Router

React Router provides a useParams hook that can be used to read the call ID and call type from the URL.

Next.js Router

Next.js provides a useRouter hook that can be used to read the call ID and call type from the URL.

Alternatively, you can use the useParams hook in case it is more convenient for your use case.