Quickstart

This quickstart gives you a quick overview of how Stream's React Video SDK works.

Installation

The installation of the necessary packages can be either done with yarn, npm or any other package manager.

For yarn:

yarn add @stream-io/video-react-sdk

For npm:

npm install @stream-io/video-react-sdk

SDK Size

Our SDK follows the industry standards and is optimized for tree-shaking. Modern bundlers like Webpack and Rollup can remove the unused code from the SDK, which helps in reducing the bundle size.

The SDK size after minification is below 600KB. This size includes all the components and utilities provided by the SDK. After g-zipping, the SDK can be compressed down to ~165KB. The actual size of the SDK in your application will depend on the components you use.

For most up-to-date information on the SDK size, please check the package size on Bundlephobia.

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 in these docs 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 participantBarPosition="right" />
          <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.

Introduction

Supported Platforms