Quickstart

This quickstart gives you a quick overview of how Stream’s video SDKs work.

Client setup & Calls

Create an instance of StreamVideoClient that will establish WebSocket connection by connecting a user.

Next, you create a call object and join the call. We’ll specify create: true to create the call if it doesn’t exist.

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

const apiKey = "your-api-key";
const userId = "user-id";
const token = "authentication-token";
const user: User = { id: userId };

const client = new StreamVideoClient({ apiKey, user, token });
const call = client.call("default", "my-first-call");
call.join({ create: true });

export const MyApp = () => {
  return (
    <StreamVideo client={client}>
      <StreamCall call={call}>
        /* <MyVideoUI /> */
      </StreamCall>
    </StreamVideo>
  );
};

default is a call type. There are 4 built-in call types and you can also create your own. The call type controls the permissions and which features are enabled.

The second argument is the call id. Call IDs can be reused, meaning that it’s possible to join a call with the same id multiple times (for example, for recurring meetings). You can load an existing call from our servers like this:

const client = new StreamVideoClient({ apiKey, user, token });
const call = client.call("default", "my-first-call");
await call.getOrCreate();

Rendering video

The call’s state can be accessed using hooks, all exposed through the top-level useCallStateHooks hook.

You’ll often work with useParticipants hook. Have a look below for a basic example of how to render the video of all participants:

import { useCallStateHooks, ParticipantView } from "@stream-io/video-react-sdk";

export const MyVideoUI = () => {
  const { useParticipants } = useCallStateHooks();
  const participants = useParticipants();
  return (
    <>
      {participants.map((p) => (
        <ParticipantView participant={p} key={p.sessionId} />
      ))}
    </>
  );
};

The participant object contains all essential information to render videos, such as audio/video tracks, user information, audio/video enabled, etc. sessionId uniquely identifies a participant in a call.

More information about state management can be found in the Call & Participant State guide.

Camera & Microphone

Most video apps will show buttons to mute/unmute the audio or video. The example below shows how to use the camera:

import { useCallStateHooks } from "@stream-io/video-react-sdk";

export const MyVideoButton = () => {
  const { useCameraState } = useCallStateHooks();
  const { camera, isMute } = useCameraState();
  return (
    <button onClick={() => camera.toggle()}>
      {isMute ? "Turn on camera" : "Turn off camera"}
    </button>
  );
};

export const MyMicrophoneButton = () => {
  const { useMicrophoneState } = useCallStateHooks();
  const { microphone, isMute } = useMicrophoneState();
  return (
    <button onClick={() => microphone.toggle()}>
      {isMute ? "Turn on microphone" : "Turn off microphone"}
    </button>
  );
};

More information about this topic can be found in the Camera & Microphone guide.

UI Components

The goal of this library is to make it easy to build any type of video/calling experience. You have a few options for the UI:

• Build your own UI components using the state as shown above.
• Use our library of built-in components.
• Mix & Match between your own and built-in components.

The built-in components you can customize using theming and props. If you decide to build your own components we have a UI Cookbook section to help you get started.

Let’s see an example where we set up the UI using built-in components:

• Set up theming using the StreamTheme provider
• Choose a UI layout from the SDK-provided ones, such as <SpeakerLayout>, which provides a layout suitable for speaker-focused video calls.
• Additionally, hook in the default <CallControls /> component to enable call control functionalities (such as mute, hang up, etc.).

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

import "@stream-io/video-react-sdk/dist/css/styles.css";

export const MyApp = () => {
  // Assuming you have the 'client' and 'call' created
  return (
    <StreamVideo client={client}>
      <StreamCall call={call}>
        <StreamTheme>
          <SpeakerLayout />
          <CallControls />
        </StreamTheme>
      </StreamCall>
    </StreamVideo>
  );
};

See it in action

We have prepared a CodeSandbox example that demonstrates the above steps in action. Feel free to play around with it and explore the SDK’s features.