Quickstart

In this guide, we will cover the basics of making your first call using Stream Video. If you haven’t already, we recommend starting with the introduction and installation(Native CLI or Expo) steps first, as this guide will build on the material covered in those sections.

Client setup & Calls

Create an instance of StreamVideoClient that will establish a 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-native-sdk';
import { useEffect, useState } from 'react';

const apiKey = 'your-api-key';
const userId = 'user-id';
const token = 'authentication-token';
const callId = 'my-call-id';
const user: User = { id: userId };

const client = new StreamVideoClient({ apiKey, user, token });
const call = client.call('default', callId);
call.join({ create: true });

export default function App() {
  return (
    <StreamVideo client={client}>
      <StreamCall call={call}>{/* Your UI */}</StreamCall>
    </StreamVideo>
  );
}

When creating a call on the client, the string 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 it’s possible to join a call with the same id multiple times (for example, for recurring meetings). However, for ringing calls, you should always provide a unique call id.

Rendering video

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

The call participant’s state can be accessed using hooks like useParticipants. Have a look below for a basic example of how to render the videos of all participants:

import {
  useCallStateHooks,
  CallParticipantsList,
} from '@stream-io/video-react-native-sdk';

function VideoUI() {
  const { useParticipants } = useCallStateHooks();
  const participants = useParticipants();

  return <CallParticipantsList participants={participants} />;
}

The participant object contains all essential information to render videos, such as audio/video tracks, user information, audio/video enabled status, etc.

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 and microphone:

import { Button } from 'react-native';
import { useCallStateHooks } from '@stream-io/video-react-sdk';

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

export const MyMicrophoneButton = () => {
  const { useMicrophoneState } = useCallStateHooks();
  const { microphone, isMute } = useMicrophoneState();
  return (
    <Button
      title={isMute ? 'Turn on microphone' : 'Turn off microphone'}
      onClick={() => microphone.toggle()}
    ></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 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.

If you’re using our built-in components, you can easily customize them through theming and props. For creating your own components, the UI Cookbook section is there to help you get started.

Expo

Client & Authentication