Stream React Video SDK

https://getstream.io/video/docs/react
Admin
A comprehensive React SDK for implementing video calling, audio calling, audio rooms, and...
Tokens:186,107
Snippets:2,073
Trust Score:10
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Stream SDKs

Source: https://getstream.io/video/docs/react/advanced/chat-with-video.md

Install the required video and chat packages for React applications.

```shell
npm install @stream-io/video-react-sdk stream-chat-react stream-chat
```

```shell
yarn add @stream-io/video-react-sdk stream-chat-react stream-chat
```

--------------------------------

### Install SDK and Peer Dependencies

Source: https://getstream.io/video/docs/react-native/setup/installation/react-native.md

Commands to install the core SDK and required native dependencies.

```bash
yarn add @stream-io/video-react-native-sdk
```

```bash
yarn add @stream-io/react-native-webrtc \
   react-native-svg \
   @react-native-community/netinfo

npx pod-install
```

--------------------------------

### Install Dependencies

Source: https://getstream.io/video/docs/react-native/incoming-calls/ringing-setup/react-native.md

Install the required Firebase and Stream Video calling packages and update CocoaPods.

```bash
yarn add @react-native-firebase/app \
  @react-native-firebase/messaging \
  @stream-io/react-native-callingx

npx pod-install
```

--------------------------------

### Install react-native-permissions

Source: https://getstream.io/video/docs/react-native/guides/native-permissions.md

Install the required library for managing native permissions.

```bash
yarn add react-native-permissions
```

--------------------------------

### Install Stream Node SDK

Source: https://getstream.io/video/docs/react-native/ui-cookbook/session-timers

Install the server-side SDK to manage roles, call types, and users.

```bash
yarn add @stream-io/node-sdk
```

```bash
npm install @stream-io/node-sdk
```

--------------------------------

### Run Setup Script

Source: https://getstream.io/video/docs/react-native/ui-cookbook/session-timers

Execute the configuration script using ts-node.

```bash
 npx ts-node script.ts
```

--------------------------------

### Initialize a basic video calling application

Source: https://getstream.io/video/docs/react/ui-cookbook/manual-video-quality-selection.md

A foundational setup for a video call using the Stream Video React SDK, serving as a starting point for implementing quality controls.

```tsx
import {
  Call,
  SpeakerLayout,
  StreamCall,
  StreamTheme,
  StreamVideo,
  StreamVideoClient,
} from "@stream-io/video-react-sdk";
import "@stream-io/video-react-sdk/dist/css/styles.css";

const client = new StreamVideoClient({
  apiKey: "REPLACE_WITH_API_KEY",
  user: { id: "REPALCE_WITH_USER_ID", name: "Jane Doe" },
  token: "REPLACE_WITH_TOKEN",
});

export const App = () => {
  const [call, setCall] = useState<Call>();
  useEffect(() => {
    const newCall = client.call("appointment", callId);
    newCall
      .join({ create: true })
      .then(() => setCall(newCall))
      .catch(() => console.error("Failed to join the call"));

    return () => {
      newCall.leave().catch(() => console.error("Failed to leave the call"));
      setCall(undefined);
    };
  }, []);

  if (!call) {
    return <>Loading...</>;
  }

  return (
    <StreamTheme>
      <StreamVideo client={client}>
        <StreamCall call={call}>
          <SpeakerLayout />
        </StreamCall>
      </StreamVideo>
    </StreamTheme>
  );
};
```

--------------------------------

### Install Stream Video React SDK

Source: https://getstream.io/video/docs/react/basics/quickstart.md

Use npm or yarn to add the SDK to your project dependencies.

```bash
npm install @stream-io/video-react-sdk
# or
yarn add @stream-io/video-react-sdk
```

--------------------------------

### Install CocoaPods

Source: https://getstream.io/video/docs/react-native/advanced/chat-with-video.md

Install native dependencies for iOS.

```bash
npx pod-install
```

--------------------------------

### Install sound player library

Source: https://getstream.io/video/docs/react-native/incoming-calls/ringing.md

Commands to install the react-native-sound-player dependency for manual ringing sounds.

```bash
npm install react-native-sound-player
cd ios && bundle exec pod install  # For iOS only
```

--------------------------------

### Install Video Filters Library

Source: https://getstream.io/video/docs/react-native/advanced/video-filters/usage.md

Commands to install the required native module for video stream processing.

```bash
npx expo install @stream-io/video-filters-react-native
```

```bash
yarn add @stream-io/video-filters-react-native
npx pod-install
```

--------------------------------

### Install SDK and dependencies

Source: https://getstream.io/video/docs/react-native/setup/installation/expo.md

Run this command in your terminal to install the required packages for the Stream Video SDK in an Expo project.

```bash
npx expo install @stream-io/video-react-native-sdk \
  @stream-io/react-native-webrtc \
  @config-plugins/react-native-webrtc \
  react-native-svg \
  @react-native-community/netinfo \
  expo-build-properties
```

--------------------------------

### Configure Server-Side Setup Script

Source: https://getstream.io/video/docs/react-native/ui-cookbook/session-timers

Define roles, call types with duration limits, and test users using the Stream Node SDK.

```typescript
import { StreamClient, VideoOwnCapability } from "@stream-io/node-sdk";

const apiKey = "REPLACE_WITH_API_KEY";
const secret = "REPLACE_WITH_SECRET";
const client = new StreamClient(apiKey, secret);

async function main() {
  // 1. Roles for a medical specialist (`specialist`) and a patient:
  await client.createRole({ name: "specialist" });
  await client.createRole({ name: "patient" });

  // 2. Call type with the maximum duration of 1 hour:
  await client.video.createCallType({
    name: "appointment",
    grants: {
      specialist: [
        VideoOwnCapability.JOIN_CALL,
        VideoOwnCapability.SEND_AUDIO,
        VideoOwnCapability.SEND_VIDEO,
        // These capabilities are required to change session duration:
        VideoOwnCapability.UPDATE_CALL,
        VideoOwnCapability.UPDATE_CALL_SETTINGS,
      ],
      patient: [
        VideoOwnCapability.JOIN_CALL,
        VideoOwnCapability.SEND_AUDIO,
        VideoOwnCapability.SEND_VIDEO,
      ],
    },
    settings: {
      limits: {
        // 3600 seconds = 1 hour
        max_duration_seconds: 3600,
      },
    },
  });

  // 3. Two test users:
  await client.upsertUsers({
    users: {
      "dr-lecter": {
        id: "dr-lecter",
        name: "Dr. Hannibal Lecter",
        role: "specialist",
      },
      bill: {
        id: "bill",
        name: "Buffalo Bill",
        role: "patient",
      },
    },
  });

  // 4. Test call:
  await client.video.call("appointment", "test-call").create({
    data: {
      members: [{ user_id: "dr-lecter" }, { user_id: "bill" }],
      created_by_id: "dr-lecter",
    },
  });
}

main();
```

--------------------------------

### Backstage setup

Source: https://getstream.io/video/docs/react-native/guides/joining-and-creating-calls.md

Configures a call for backstage mode, allowing hosts to prepare before users join.

```typescript
await call.getOrCreate({
  data: {
    starts_at: new Date(Date.now() + 500 * 1000), // 500 seconds from now
    settings_override: {
      backstage: {
        enabled: true,
        join_ahead_time_seconds: 300,
      },
    },
  },
});
```

--------------------------------

### Install Audio Filters Package

Source: https://getstream.io/video/docs/react/basics/prebuilt

Install the audio filters package to enable noise cancellation features in prebuilt components.

```bash
npm install @stream-io/audio-filters-web
```

--------------------------------

### Install dependencies for incoming calls

Source: https://getstream.io/video/docs/react-native/incoming-calls/ringing-setup/expo.md

Installs the required Firebase and Stream calling packages for Android and iOS integration.

```bash
npx expo install \
  @react-native-firebase/app \
  @react-native-firebase/messaging \
  @stream-io/react-native-callingx
```

--------------------------------

### Install Edge-to-Edge Library

Source: https://getstream.io/video/docs/react-native/ui-cookbook/safe-area-insets.md

Install the edge-to-edge library for older React Native versions.

```bash
npm install react-native-edge-to-edge
```

--------------------------------

### Define Platform-Specific File Structure

Source: https://getstream.io/video/docs/react-native/incoming-calls/ringing-setup/react-native.md

Example file naming convention for platform-specific implementation.

```shell
setFirebaseListeners.android.ts
setFirebaseListeners.ts
```

--------------------------------

### Basic Video Call Application Setup

Source: https://getstream.io/video/docs/react-native/ui-cookbook/manual-video-quality-selection.md

Initializes the Stream Video client and joins a call, serving as the foundation for implementing custom quality controls.

```tsx
import React, { useEffect } from "react";
import { SafeAreaView, StyleSheet, Text } from "react-native";
import {
  Call,
  StreamCall,
  CallContent,
  CallingState,
  StreamVideoClient,
  StreamVideo,
} from "@stream-io/video-react-native-sdk";

const apiKey = "REPLACE_WITH_API_KEY";
const token = "REPLACE_WITH_TOKEN";
const userId = "REPLACE_WITH_USER_ID";
const callId = "REPLACE_WITH_CALL_ID";

const user = {
  id: userId,
  name: "John Malkovich",
  image: "https://robohash.org/John",
};

const client = new StreamVideoClient({ apiKey, user, token });

const RootContainer = (props: React.PropsWithChildren<{}>) => {
  return <SafeAreaView style={styles.container}>{props.children}</SafeAreaView>;
};

export const App = () => {
  const [call, setCall] = React.useState<Call>();

  useEffect(() => {
    const _call = client.call("default", callId);
    _call.join({ create: true }).then(() => setCall(_call));

    return () => {
      _call.leave().catch(() => console.error("Failed to leave the call"));
      setCall(undefined);
    };
  }, []);

  if (!call) {
    return (
      <RootContainer>
        <Text style={styles.text}>Joining call...</Text>
      </RootContainer>
    );
  }

  return (
    <StreamVideo client={client}>
      <StreamCall call={call}>
        <RootContainer>
          <CallContent />
        </RootContainer>
      </StreamCall>
    </StreamVideo>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "white",
  },
  text: {
    color: "black",
    fontSize: 20,
    fontWeight: "bold",
    marginBottom: 20,
    textAlign: "center",
  },
});

export default App;
```

--------------------------------

### Integrate HLS.js for playback

Source: https://getstream.io/video/docs/react/advanced/broadcasting.md

A complete example showing how to initialize HLS.js, handle stream events, and provide a quality selector for the video player.

```tsx
import HLS from "hls.js";
import { useEffect, useMemo } from "react";
import { useCallStateHooks } from "@stream-io/video-react-sdk";

export const HLSPlayer = () => {
  const { useCallEgress } = useCallStateHooks();
  const egress = useCallEgress();

  // will point to an m3u8 playlist URL
  const playlistUrl = egress?.hls.playlist_url;

  // start by creating a new HLS.js player instance
  const hls = useMemo(() => new HLS(), []);

  // get the video element where HLS.js will render the video
  const [videoRef, setVideoRef] = useState<HTMLVideoElement | null>(null);

  // store the available quality levels (720p, 1080p, etc.)
  // see how they are updated in the HLS.js event listeners below
  const [qualityLevels, setQualityLevels] = useState<HLS.Level[]>([]);

  // handle the user's stream quality change event
  // and instruct hls.js to load the selected level
  const onQualityChange = (e) => {
    const selectedLevel = parseInt(e.target.value, 10);
    if (hls.currentLevel !== selectedLevel) {
      hls.loadLevel = selectedLevel;
    }
  };

  useEffect(() => {
    // HLS broadcasting is not available, do nothing...
    if (!videoRef || !playlistUrl) return;

    // listen to the hls.js error event and naively attempt to recover
    hls.on(HLS.Events.ERROR, (e, data) => {
      console.error("HLS error, attempting to recover", e, data);
      setTimeout(() => {
        hls.loadSource(playlistUrl);
      }, 1000);
    });

    // listen to LEVELS_LOADED event, this will tell you when
    // the available quality levels (720p, 1080p, etc.) have been loaded.
    hls.on(HLS.Events.LEVELS_LOADED, (e, data) => {
      console.log("HLS levels loaded", e, data);
      setQualityLevels(data.levels);
    });

    // listen to the LEVELS_UPDATED event, this will tell you when
    // the available quality levels (720p, 1080p, etc.) have changed.
    hls.on(HLS.Events.LEVELS_UPDATED, (e, data) => {
      console.log("HLS levels updated", e, data);
      setQualityLevels(data.levels);
    });

    // listen to buffer end of stream event, this will tell you when
    // the stream has ended. e.g. the broadcaster has stopped streaming.
    // keep in mind, the viewer may continue to watch the stream.
    // this event signals that there won't be any new data coming in.
    hls.on(HLS.Events.BUFFER_EOS, (e, data) => {
      console.log("HLS buffer eos", e, data);
    });

    // load the m3u8 playlist URL
    hls.loadSource(playlistUrl);

    // and attach it to the video element
    hls.attachMedia(videoRef);
  }, [videoRef, playlistUrl, hls]);

  // render a simple UI (video player and quality selector)
  return (
    <>
      <video ref={setVideoRef} controls autoPlay />
      <select onChange={onQualityChange}>
        {qualityLevels.map((level) => (
          <option key={level.name} value={level.id}>
            {level.name || `${level.height}p}`}
          </option>
        ))}
      </select>
    </>
  );
};
```

--------------------------------

### Install SafeAreaContext Dependency

Source: https://getstream.io/video/docs/react-native/ui-cookbook/safe-area-insets.md

Command to install the required dependency for calculating safe area padding values.

```bash
npm install react-native-safe-area-context
```

--------------------------------

### Initialize Push Notification Methods in index.js

Source: https://getstream.io/video/docs/react-native/incoming-calls/ringing-setup/expo.md

Call push configuration and listener setup at the application entry point to ensure they are active when the app launches from a push notification.

```js
import { setPushConfig } from "./utils/setPushConfig";
import { setFirebaseListeners } from "./utils/setFirebaseListeners";

setPushConfig();
setFirebaseListeners();

// always import expo-router/entry at the end of the file
import "expo-router/entry";
```

--------------------------------

### Implement Backstage Mode with Start Date and Waiting Participants

Source: https://getstream.io/video/docs/react-native/guides/livestreaming.md

Uses useCallStateHooks to retrieve session information and start times for rendering a waiting screen before a livestream begins.

```tsx
import React from "react";
import { View, Text, StyleSheet } from "react-native";
import { useCallStateHooks } from "@stream-io/video-react-native-sdk";

export const Backstage = () => {
  const { useCallSession, useCallStartsAt } = useCallStateHooks();
  const startsAt = useCallStartsAt();
  const session = useCallSession();

  // participants who are waiting
  const waitingCount = session?.participants_count_by_role["user"] || 0;

  const formattedStartsAt =
    startsAt &&
    new Date(startsAt).toLocaleDateString(undefined, {
      month: "short",
      day: "2-digit",
      hour: "2-digit",
      minute: "2-digit",
      hour12: false,
    });

  return (
    <View style={styles.container}>
      {startsAt ? (
        <Text style={styles.title}>
          Livestream starting at {formattedStartsAt}
        </Text>
      ) : (
        <Text style={styles.title}>Livestream starting soon</Text>
      )}

      {waitingCount > 0 && (
        <Text style={styles.waitingCount}>
          {waitingCount} participants waiting
        </Text>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  title: {
    fontSize: 18,
    fontWeight: "bold",
    marginBottom: 8,
  },
  waitingCount: {
    fontSize: 16,
    paddingHorizontal: 16,
  },
});
```

--------------------------------

### Importing SDK Components

Source: https://getstream.io/video/docs/react/ui-cookbook/video-layout.md

Initial setup for importing necessary styles and hooks from the Stream React Video SDK.

```tsx
// will load the default styling for the React Video SDK
import "@stream-io/video-styling/dist/css/styles.css";
import "./SpeakerView.scss";

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

const { useParticipants } = useCallStateHooks();
```

--------------------------------

### Install React Navigation dependencies

Source: https://getstream.io/video/docs/react-native/advanced/chat-with-video.md

Install the required packages for native stack navigation in a React Native project.

```bash
yarn add @react-navigation/native @react-navigation/elements @react-navigation/native-stack react-native-screens react-native-safe-area-context
```

--------------------------------

### Implementing Backstage Mode

Source: https://getstream.io/video/docs/react/guides/livestreaming.md

Create a component to display the scheduled start time and the number of waiting participants before the stream goes live.

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

export const Backstage = () => {
  const { useCallSession, useCallStartsAt } = useCallStateHooks();
  const startsAt = useCallStartsAt();
  const session = useCallSession();

  // viewers who have joined the call before it went live
  const waitingCount = session?.participants_count_by_role["user"] ?? 0;

  return (
    <div className="backstage">
      {startsAt ? (
        <div className="starts-at">
          Livestream starting at {new Date(startsAt).toLocaleDateString()}
        </div>
      ) : (
        <div className="starts-at">Livestream starting soon</div>
      )}

      {waitingCount > 0 && (
        <div className="waiting-count">{waitingCount} viewers waiting</div>
      )}
    </div>
  );
};
```

--------------------------------

### Setup Android full-screen incoming call view

Source: https://getstream.io/video/docs/react-native/incoming-calls/ringing-setup/react-native.md

Configure the MainActivity to display full-screen notifications on locked phones by calling setupCallActivity within onCreate.

```kotlin
override fun onCreate(savedInstanceState: Bundle?) {
    // ..the rest
    super.onCreate()
    // Add this
    StreamVideoReactNative.setupCallActivity(this)
}
```

```java
@Override
protected void onCreate(Bundle savedInstanceState) {
    // ..the rest
    super.onCreate();
    // Add this
    StreamVideoReactNative.setupCallActivity(this);
}
```

--------------------------------

### Automate model synchronization in package.json

Source: https://getstream.io/video/docs/react/guides/noise-cancellation.md

Add a postinstall script to your package.json to ensure the model files are automatically updated whenever dependencies are installed.

```json
{
  "scripts": {
    "postinstall": "node -e \"require('fs').cpSync('node_modules/@stream-io/audio-filters-web/src/krispai/models', 'public/nc-models', { recursive: true })\""
  }
}
```

--------------------------------

### Implement CallLiveContent for Livestreams

Source: https://getstream.io/video/docs/react-native/guides/livestreaming.md

A complete component example for rendering a host's video, calculating live duration, and displaying viewer counts.

```jsx
import React, { useEffect, useState } from 'react';
import { useCallStateHooks, VideoRenderer } from '@stream-io/video-react-native-sdk';
import { View, Text, StyleSheet } from 'react-native';

export const CallLiveContent = () => {
  const { useParticipants, useCallSession, useParticipantCount } =
    useCallStateHooks();
  const participants = useParticipants();
  const hosts = participants.filter((p) => p.roles.includes('host'));

  const session = useCallSession();
  const [duration, setDuration] = useState(() => {
    if (!session || !session.live_started_at) {
      return 0;
    }
    const liveStartTime = new Date(session.live_started_at);
    const now = new Date();
    return Math.floor((now.getTime() - liveStartTime.getTime()) / 1000);
  });

  const totalParticipants = useParticipantCount();
  const viewers = Math.max(0, totalParticipants - 1);

  const formatDuration = (durationInMs: number) => {
    const days = Math.floor(durationInMs / 86400);
    const hours = Math.floor(durationInMs / 3600);
    const minutes = Math.floor((durationInMs % 3600) / 60);
    const seconds = durationInMs % 60;

    return `${days ? days + ' ' : ''}${hours ? hours + ':' : ''}${
      minutes < 10 ? '0' : ''
    }${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
  };

  useEffect(() => {
    let intervalId: NodeJS.Timeout;
    const handleLiveStarted = () => {
      intervalId = setInterval(() => {
        setDuration((d) => d + 1);
      }, 1000);
    };

    handleLiveStarted();

    return () => {
      if (intervalId) {
        clearInterval(intervalId);
      }
    };
  }, []);

  return (
    <View style={styles.container}>
      {hosts.length > 0 && (
        <VideoRenderer participant={hosts[0]} trackType="videoTrack" />
      )}
      <Text style={styles.durationText}>{formatDuration(duration)}</Text>
      <Text style={styles.viewersText}>Viewers: {viewers}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: 'relative',
  },
  videoRenderer: {
    flex: 1,
  },
  durationText: {
    position: 'absolute',
    bottom: 24,
    left: 24,
    color: 'red',
  },
  viewersText: {
    position: 'absolute',
    bottom: 24,
    right: 24,
    color: 'red',
  },
});
```

--------------------------------

### Implement Permission Request UI in React

Source: https://getstream.io/video/docs/react/ui-cookbook/permission-requests.md

A comprehensive example demonstrating how to request permissions and handle incoming requests using the Stream Video React SDK hooks.

```tsx
import { useEffect, useState } from "react";
import {
  CallControls,
  SpeakerLayout,
  OwnCapability,
  PermissionRequestEvent,
  StreamCall,
  StreamTheme,
  StreamVideo,
  StreamVideoEvent,
  useCall,
  useCallStateHooks,
  useRequestPermission,
} from "@stream-io/video-react-sdk";
import "@stream-io/video-react-sdk/dist/css/styles.css";

export default function App() {
  // create client and call

  return (
    <StreamTheme>
      <StreamVideo client={client}>
        <StreamCall call={call}>
          <MyCallUI />
        </StreamCall>
      </StreamVideo>
    </StreamTheme>
  );
}

const MyCallUI = () => {
  const call = useCall();
  return (
    <div>
      <MyPermissionRequestNotifications />
      <SpeakerLayout />
      <CallControls />
      <MyPermissionRequests />
    </div>
  );
};

const MyPermissionRequestButton = ({ children, capability }) => {
  const {
    requestPermission,
    hasPermission,
    canRequestPermission,
    isAwaitingPermission,
  } = useRequestPermission(capability);

  if (hasPermission || !canRequestPermission) return null;

  return (
    <button disabled={isAwaitingPermission} onClick={requestPermission}>
      {children}
    </button>
  );
};

const MyPermissionRequests = () => {
  const call = useCall();
  const { useHasPermissions } = useCallStateHooks();
  const canSendAudio = useHasPermissions(OwnCapability.SEND_AUDIO);
  const canSendVideo = useHasPermissions(OwnCapability.SEND_VIDEO);
  const canShareScreen = useHasPermissions(OwnCapability.SCREENSHARE);

  if (!call) return null;

  return (
    <div>
      <MyPermissionRequestButton capability={OwnCapability.SEND_AUDIO}>
        Request audio permission
      </MyPermissionRequestButton>
      <MyPermissionRequestButton capability={OwnCapability.SEND_VIDEO}>
        Request video permission
      </MyPermissionRequestButton>
      <MyPermissionRequestButton capability={OwnCapability.SCREENSHARE}>
        Request screen share permission
      </MyPermissionRequestButton>
      {canSendAudio ? "Allowed to send audio" : "Not allowed to send audio"}
      {canSendVideo ? "Allowed to send video" : "Not allowed to send video"}
      {canShareScreen
        ? "Allowed to share screen"
        : "Not allowed to share screen"}
    </div>
  );
};

const MyPermissionRequestNotifications = () => {
  const call = useCall();

  const { useLocalParticipant, useHasPermissions } = useCallStateHooks();
  const localParticipant = useLocalParticipant();
  const canUpdateCallPermissions = useHasPermissions(
    OwnCapability.UPDATE_CALL_PERMISSIONS,
  );

  const [permissionRequests, setPermissionRequests] = useState([]);
  useEffect(() => {
    if (!call || !canUpdateCallPermissions) return;
    return call.on("call.permission_request", (event) => {
      // ignore own requests
      if (event.user.id !== localParticipant?.userId) {
        setPermissionRequests((requests) => [...requests, event]);
      }
    });
  }, [call, canUpdateCallPermissions, localParticipant]);

  if (!call || permissionRequests.length === 0) return null;

  const answerRequest = async (answer, request) => {
    if (answer === "accept") {
      await call.grantPermissions(request.user.id, request.permissions);
    } else {
      await call.revokePermissions(request.user.id, request.permissions);
    }
    setPermissionRequests((requests) => requests.filter((r) => r !== request));
  };

  return (
    <div>
      {permissionRequests.map((request) => (
        <div>
          New request from {request.user.id} to publish {request.permissions}
          <button onClick={() => answerRequest("accept", request)}>
            Accept
          </button>
          <button onClick={() => answerRequest("reject", request)}>
            Reject
          </button>
        </div>
      ))}
    </div>
  );
};
```

--------------------------------

### Initialize a video application with pre-built components

Source: https://getstream.io/video/docs/react/ui-components/overview.md

Use the SDK's core components to set up a functional video call interface. Ensure the SDK CSS is imported for proper styling.

```tsx
import "@stream-io/video-react-sdk/dist/css/styles.css";
import {
  CallControls,
  StreamCall,
  StreamTheme,
  StreamVideo,
  SpeakerLayout,
} from "@stream-io/video-react-sdk";

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

--------------------------------

### Configure Entry Point in package.json

Source: https://getstream.io/video/docs/react-native/incoming-calls/ringing-setup/expo.md

Set the main entry point for the application to the file containing the push notification initialization logic.

```json
{
  ...
  "main": "index.js",
  ...
}
```

--------------------------------

### Install expo-notifications dependency

Source: https://getstream.io/video/docs/react-native/incoming-calls/non-ringing-notifications-setup/expo.md

Use the Expo CLI to install the required notifications package.

```bash
npx expo install expo-notifications
```

--------------------------------

### Initialize StreamVideoClient and Join a Call

Source: https://getstream.io/video/docs/react-native/setup/quickstart.md

Demonstrates how to instantiate the StreamVideoClient using the singleton pattern and join a call with a specific call type and ID.

```tsx
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 = StreamVideoClient.getOrCreateInstance({ 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>
  );
}
```

--------------------------------

### Install CallKit dependencies

Source: https://getstream.io/video/docs/react-native/guides/keeping-call-alive.md

Install the required package for iOS CallKit integration and update CocoaPods.

```bash
yarn add @stream-io/react-native-callingx

npx pod-install
```

--------------------------------

### Build and Run Commands

Source: https://getstream.io/video/docs/react-native/incoming-calls/ringing-setup/expo.md

Commands for generating native directories and running the application on physical devices for testing.

```bash
npx expo prebuild --clean
```

```bash
npx expo run:ios --no-bundler --device --configuration Release
```

```bash
npx expo run:android --no-bundler --device --variant release
```

--------------------------------

### Implement Lobby Preview

Source: https://getstream.io/video/docs/react/guides/camera-and-microphone.md

Enable the camera and bind the media stream to a video element for a preview.

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

const { useCameraState } = useCallStateHooks();
const { camera, mediaStream } = useCameraState();

// will turn on the camera
await camera.enable();

// play the video preview
<video srcObject={mediaStream} autoPlay muted />;
```

--------------------------------

### Install Navigation Bar Control

Source: https://getstream.io/video/docs/react-native/ui-cookbook/safe-area-insets.md

Install the navigation bar control package for React Native CLI projects.

```bash
npm install @zoontek/react-native-navigation-bar
```

--------------------------------

### Initialize client with token and tokenProvider

Source: https://getstream.io/video/docs/react-native/guides/client-auth.md

Provide both a static token and a tokenProvider to handle initial connection and subsequent refreshes.

```ts
import { StreamVideoClient, User } from "@stream-io/video-react-native-sdk";

const user: User = { id: "sara" };
const apiKey = "my-stream-api-key";
const token = "<token-from-your-server>";
const tokenProvider = async () => fetchTokenFromYourServer(user.id);
const client = StreamVideoClient.getOrCreateInstance({
  apiKey,
  user,
  token,
  tokenProvider,
});
```

--------------------------------

### Install Push Notification Dependencies

Source: https://getstream.io/video/docs/react-native/incoming-calls/non-ringing-notifications-setup/react-native.md

Install the necessary Firebase messaging packages for React Native and update iOS pods.

```bash
yarn add @react-native-firebase/app \
  @react-native-firebase/messaging

npx pod-install
```

--------------------------------

### Automate Asset Sync with postinstall

Source: https://getstream.io/video/docs/react/advanced/apply-video-filters.md

Add a postinstall script to your package.json to ensure the local assets folder is automatically updated whenever the SDK version changes.

```json
{
  "scripts": {
    "postinstall": "node -e \"require('fs').cpSync('node_modules/@stream-io/video-filters-web/mediapipe', 'public/mediapipe', { recursive: true })\""
  }
}
```

--------------------------------

### Watch calls via get or getOrCreate

Source: https://getstream.io/video/docs/react-native/guides/events.md

Use get or getOrCreate to initialize a call instance and begin receiving events.

```typescript
import { StreamVideoClient } from "@stream-io/video-react-native-sdk";

let client: StreamVideoClient;

client.call("default", "test-call").getOrCreate();
// or
client.call("default", "test-call").get();
```

--------------------------------

### Implement Loopback Recording

Source: https://getstream.io/video/docs/react-native/advanced/loopback-recording.md

Demonstrates setting up a call and using the useLoopbackRecording hook to capture local media tracks.

```tsx
import React, { useCallback, useEffect, useMemo } from "react";
import { Button, View } from "react-native";
import {
  Call,
  StreamCall,
  useLoopbackRecording,
  useStreamVideoClient,
} from "@stream-io/video-react-native-sdk";

export function PreCallTest() {
  const client = useStreamVideoClient();
  const call = useMemo<Call | undefined>(() => {
    if (!client) return undefined;
    return client.call("default", "self-test-" + Date.now());
  }, [client]);

  useEffect(() => {
    if (!call) return;
    call.getOrCreate();
    return () => {
      call.leave();
    };
  }, [call]);

  if (!call) return null;

  return (
    <StreamCall call={call}>
      <RecordButton call={call} />
    </StreamCall>
  );
}

function RecordButton({ call }: { call: Call }) {
  const { startRecording, recordingState } = useLoopbackRecording();

  const onPress = useCallback(async () => {
    await call.join({ create: true, allowOwnTracksLoopback: true });
    const uri = await startRecording();
    call.leave();
    if (uri) {
      // You now have a local video file on disk. Play it back or share it.
      console.log("Recording saved at", uri);
    }
  }, [call, startRecording]);

  return (
    <View>
      <Button title={recordingState} onPress={onPress} />
    </View>
  );
}
```

--------------------------------

### Override Translations

Source: https://getstream.io/video/docs/react-native/advanced/i18n.md

Example of passing custom translation overrides to the StreamVideo provider.

```tsx
const translations = {
    en: {
        ...
        terminate: "terminate"
        ...
    },
    de: {
        ...
        terminate: "beended"
        ...
    },
    ...
}

const App = () => {
    ...
    return (
        <StreamVideo
            client={client}
            translationsOverrides={translations}
        >
            ...
        </StreamVideo>
    );
}
```

--------------------------------

### Control HLS Broadcasting

Source: https://getstream.io/video/docs/react-native/advanced/broadcasting.md

Methods to start and stop HLS broadcasting on a call instance.

```typescript
await call.startHLS();
await call.stopHLS();
```

```typescript
await call.goLive({ start_hls: true });
```

--------------------------------

### Initiating Chat and Video Clients

Source: https://getstream.io/video/docs/react/advanced/chat-with-video.md

Initializes both the chat and video clients using the same credentials and provides them to the application via their respective context providers.

```tsx
import type { UserResponse } from "stream-chat";
import { Chat } from "stream-chat-react";
import { StreamVideo, StreamVideoClient } from "@stream-io/video-react-sdk";
import { Channel } from "./components/Channel";
import { Sidebar } from "./components/Sidebar";
import { Video } from "./components/Video";
import { useCreateChatClient } from "./hooks";

import { useState } from "react";

const Root = ({
  apiKey,
  user,
  userToken,
}: {
  apiKey: string;
  user: UserResponse;
  userToken: string;
}) => {
  const chatClient = useCreateChatClient({
    apiKey,
    tokenOrProvider: userToken,
    userData: user,
  });
  const [videoClient, setVideoClient] = useState<StreamVideoClient>();

  useEffect(() => {
    const _client = new StreamVideoClient({ apiKey, user, token: userToken });
    setVideoClient(_client);

    return () => {
      _client.disconnectUser();
      setVideoClient(undefined);
    };
  }, []);

  if (!chatClient || !videoClient) return null;

  return (
    <Chat client={chatClient}>
      <StreamVideo client={videoClient}>
        <Sidebar user={user} />
        <Channel />
        <Video />
      </StreamVideo>
    </Chat>
  );
};
```

--------------------------------

### Query Upcoming Livestreams

Source: https://getstream.io/video/docs/react-native/guides/querying-calls.md

Filter calls by type and start time to find upcoming livestreams.

```typescript
import { StreamVideoClient } from "@stream-io/video-react-native-sdk";

let client: StreamVideoClient;

const inNext30mins = new Date(Date.now() + 1000 * 60 * 60 * 30);

const { calls } = await client.queryCalls({
  filter_conditions: {
    type: { $eq: "livestream" },
    starts_at: { $gt: inNext30mins.toISOString() },
  },
  sort: [{ field: "starts_at", direction: -1 }],
  limit: 10,
  watch: true,
});
```

--------------------------------

### Create Android Raw Resources Directory

Source: https://getstream.io/video/docs/react-native/incoming-calls/android-custom-ringtone.md

Command to create the necessary directory for storing custom audio files in an Android project.

```bash
mkdir -p android/app/src/main/res/raw
```

--------------------------------

### Enable Media Projection in onCreate

Source: https://getstream.io/video/docs/react-native/guides/screensharing/react-native

Configure the WebRTCModuleOptions instance within the onCreate method to enable the media projection service.

```kotlin
override fun onCreate(savedInstanceState: Bundle?) {
    val options: WebRTCModuleOptions = WebRTCModuleOptions.getInstance()
    options.enableMediaProjectionService = true
    // ..the rest
}
```

```java
 @Override
protected void onCreate(Bundle savedInstanceState) {
    WebRTCModuleOptions options = WebRTCModuleOptions.getInstance();
    options.enableMediaProjectionService = true;
    // ..the rest
}
```

--------------------------------

### Initialize SDK push notification methods

Source: https://getstream.io/video/docs/react-native/incoming-calls/ringing-setup/react-native.md

Call these methods at the application entry point alongside AppRegistry.registerComponent to ensure configuration and callbacks are ready when the app opens from a dead state.

```js
import { AppRegistry } from "react-native";
import { setPushConfig } from "src/utils/setPushConfig";
import { setFirebaseListeners } from "src/utils/setFirebaseListeners";
import App from "./App";

setPushConfig(); // Set push config
setFirebaseListeners(); // Set the firebase listeners

AppRegistry.registerComponent("app", () => App);
```

--------------------------------

### Install Noise Cancellation Library

Source: https://getstream.io/video/docs/react-native/guides/noise-cancellation.md

Commands to add the noise cancellation dependency for Expo and React Native CLI projects.

```bash
npx expo install @stream-io/noise-cancellation-react-native
```

```bash
yarn add @stream-io/noise-cancellation-react-native
npx pod-install
```

--------------------------------

### Initialize useLoopbackRecording hook

Source: https://getstream.io/video/docs/react-native/advanced/loopback-recording.md

Import and initialize the hook to access recording controls and stream references.

```tsx
import { useLoopbackRecording } from "@stream-io/video-react-native-sdk";

const {
  startRecording,
  stopRecording,
  clearRecordings,
  getRecordings,
  recordingState,
  loopbackVideoStream,
  loopbackAudioStream,
} = useLoopbackRecording();
```

--------------------------------

### Start and Stop Closed Captions

Source: https://getstream.io/video/docs/react-native/ui-cookbook/closed-captions.md

Methods to manually control closed captioning state for calls configured in Available mode.

```ts
await call.startClosedCaptions(); // start closed captions
```

```ts
await call.stopClosedCaptions(); // stop closed captions
```

--------------------------------

### Configure Audio Routing Lifecycle

Source: https://getstream.io/video/docs/react-native/advanced/integration-best-practices.md

Manage audio routing by starting the callManager when joining a call and stopping it upon leaving.

```tsx
import { callManager } from "@stream-io/video-react-native-sdk";

// Before joining a call (or immediately after joining)
callManager.start({
  audioRole: "communicator",
  deviceEndpointType: "speaker",
});

// When leaving a call
callManager.stop();
```

--------------------------------

### Initialize Client and Join Call

Source: https://getstream.io/video/docs/react/basics/quickstart.md

Set up the StreamVideoClient at the application root and manage call joining/leaving within a component.

```tsx
import { useEffect, useState } from "react";
import {
  Call,
  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 };

export const MyApp = () => {
  const [client, setClient] = useState<StreamVideoClient>();

  useEffect(() => {
    const myClient = new StreamVideoClient({ apiKey, user, token });
    setClient(myClient);

    return () => {
      myClient.disconnectUser().catch(console.error);
      setClient(undefined);
    };
  }, []);

  if (!client) return null;

  return (
    <StreamVideo client={client}>
      <MyCallUI client={client} />
    </StreamVideo>
  );
};

const MyCallUI = ({ client }: { client: StreamVideoClient }) => {
  const [call, setCall] = useState<Call>();

  useEffect(() => {
    const myCall = client.call("default", "my-first-call");
    myCall.join({ create: true }).catch(console.error);
    setCall(myCall);

    return () => {
      myCall.leave().catch(console.error);
      setCall(undefined);
    };
  }, [client]);

  if (!call) return null;

  return <StreamCall call={call}>{/* <MyVideoUI /> */}</StreamCall>;
};
```

--------------------------------

### Implement a feedback modal

Source: https://getstream.io/video/docs/react-native/ui-cookbook/user-ratings

A React Native component example demonstrating how to capture user ratings and submit them to the Stream API.

```tsx
import React, { useState } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Modal,
  Image,
} from 'react-native';
import { useCall } from '@stream-io/video-react-native-sdk';
import Star from '../assets/Star';
import Close from '../assets/Close';

const FeedbackModal: = () => {
  const call = useCall();
  const [selectedRating, setSelectedRating] = useState<number | null>(null);

  const handleRatingPress = (rating: number) => {
    setSelectedRating(rating);
    await call
      ?.submitFeedback(Math.min(Math.max(1, rating), 5), {
        reason: '<no-message-provided>',
      })
      .catch((err) => console.warn('Failed to submit call feedback', err));
  };

  return (
    <Modal
      transparent
      visible={visible}
      onRequestClose={onClose}
    >
      <TouchableOpacity style={styles.overlay} onPress={onClose}>
        <View style={[styles.modal]}>
          <View style={styles.top}>
            <View style={styles.topRight}>
              <TouchableOpacity onPress={onClose} style={[styles.closeButton]}>
                <IconWrapper>
                  <Close
                    color={colors.typeSecondary}
                    size={variants.roundButtonSizes.sm}
                  />
                </IconWrapper>
              </TouchableOpacity>
            </View>
          </View>
          <Image source={require('../assets/feedbackLogo.png')} />
          <View style={styles.textContainer}>
            <Text style={styles.title}>We Value Your Feedback!</Text>
            <Text style={styles.subtitle}>
              Tell us about your video call experience.
            </Text>
          </View>
          <View style={styles.ratingContainer}>
            {[1, 2, 3, 4, 5].map((rating) => (
              <TouchableOpacity
                key={rating}
                onPress={() => handleRatingPress(rating)}
                style={[styles.ratingButton]}
              >
                <Star
                  color={
                    selectedRating && selectedRating >= rating
                      ? colors.iconAlertSuccess
                      : colors.typeSecondary
                  }
                />
              </TouchableOpacity>
            ))}
          </View>
          <View style={styles.bottom}>
            <View style={styles.left}>
              <Text style={styles.text}>Very Bad</Text>
            </View>
            <View style={styles.right}>
              <Text style={styles.text}>Very Good</Text>
            </View>
          </View>
        </View>
      </TouchableOpacity>
    </Modal>
  );
};
```

--------------------------------

### Initialize StreamVideoClient for Guest Users

Source: https://getstream.io/video/docs/react-native/guides/client-auth.md

Configure the client for a guest user by setting the user type to 'guest' and omitting token parameters.

```typescript
import { StreamVideoClient, User } from "@stream-io/video-react-native-sdk";

const user: User = { id: "jack-guest", type: "guest" };
const apiKey = "my-stream-api-key";
const client = StreamVideoClient.getOrCreateInstance({
  apiKey,
  user,
});
```

--------------------------------

### Querying and Paginating Calls

Source: https://getstream.io/video/docs/react-native/guides/querying-calls.md

Demonstrates filtering calls by type and start time, sorting results, and using the prev/next tokens for pagination.

```typescript
import { StreamVideoClient } from "@stream-io/video-react-native-sdk";

let client: StreamVideoClient;

const inNext30mins = new Date(Date.now() + 1000 * 60 * 60 * 30);
const callQuery = {
  filter_conditions: {
    type: { $eq: "livestream" },
    starts_at: { $gt: inNext30mins.toISOString() },
  },
  sort: [{ field: "starts_at", direction: -1 }],
  limit: 10,
  watch: true,
};

let { calls, prev, next } = await client.queryCalls(callQuery);

// Go to the next page
({ calls, prev, next } = await client.queryCalls({ ...callQuery, next }));

// Go to the previous page
({ calls, prev, next } = await client.queryCalls({ ...callQuery, prev }));
```

--------------------------------

### Enable media devices with error handling

Source: https://getstream.io/video/docs/react-native/advanced/integration-best-practices.md

Wrap camera and microphone enablement in a try-catch block to handle potential device access errors.

```ts
try {
  await call.camera.enable();
  await call.microphone.enable();
} catch (err) {
  console.error("Failed to enable a device", err);
}
```

--------------------------------

### Copy Ringtone File to Android Resources

Source: https://getstream.io/video/docs/react-native/incoming-calls/android-custom-ringtone.md

Example command to copy a custom ringtone file into the Android raw resources folder.

```bash
cp path/to/your/ringtone.mp3 android/app/src/main/res/raw/ringtone.mp3
```

--------------------------------

### JWT Payload for Anonymous Users

Source: https://getstream.io/video/docs/react-native/guides/client-auth.md

Example JWT structure for an anonymous user, requiring the call_cids field to specify authorized calls.

```json
{
  "iss": "@stream-io/dashboard",
  "iat": 1726406693,
  "exp": 1726493093,
  "user_id": "!anon",
  "role": "viewer",
  "call_cids": ["livestream:123"]
}
```

--------------------------------

### Join with Device Configuration

Source: https://getstream.io/video/docs/react/guides/joining-and-creating-calls.md

Configure microphone and camera states before joining the call.

```ts
const call = client.call("default", "test-call");

// enable mic and camera
await call.camera.enable();
await call.microphone.enable();

// alternatively, you can disable them
await call.camera.disable();
await call.microphone.disable();

// and then join the call
await call.join();
```

--------------------------------

### Build the recording UI

Source: https://getstream.io/video/docs/react-native/ui-cookbook/pre-call-self-test.md

Uses useLoopbackRecording to manage the recording state and RTCView to display the live loopback stream.

```tsx
import React, { useCallback, useMemo } from "react";
import { Button, View } from "react-native";
import { RTCView } from "@stream-io/react-native-webrtc";
import {
  CallingState,
  useCall,
  useCallStateHooks,
  useLoopbackRecording,
} from "@stream-io/video-react-native-sdk";

const PreCallTest = () => {
  const call = useCall();
  const { useCallCallingState } = useCallStateHooks();
  const callingState = useCallCallingState();
  const { startRecording, stopRecording, recordingState, loopbackVideoStream } =
    useLoopbackRecording();

  const onStart = useCallback(async () => {
    if (!call) return;
    await call.join({ create: true, allowOwnTracksLoopback: true });
    const uri = await startRecording();
    call.leave();
    if (uri) {
      // `uri` is a `file://` URI of a local video on the device.
      // Use it to play the recording back or to share it via the OS share sheet.
    }
  }, [call, startRecording]);

  const isConnecting =
    (callingState === CallingState.JOINING ||
      callingState === CallingState.JOINED) &&
    recordingState !== "recording";

  const label = useMemo(() => {
    if (recordingState === "recording") return "Stop recording";
    if (isConnecting) return "Connecting…";
    return "Start recording";
  }, [recordingState, isConnecting]);

  const onPress =
    recordingState === "recording" ? () => stopRecording() : onStart;

  return (
    <View style={{ flex: 1 }}>
      {loopbackVideoStream ? (
        <RTCView
          streamURL={loopbackVideoStream.toURL()}
          objectFit="cover"
          style={{ flex: 1 }}
        />
      ) : null}
      <Button title={label} onPress={onPress} disabled={isConnecting} />
    </View>
  );
};
```

--------------------------------

### Initialize StreamVideoClient

Source: https://getstream.io/video/docs/react-native/guides/client-auth.md

Use getOrCreateInstance to initialize the client with an API key, token, and user object.

```ts
import { StreamVideoClient, User } from "@stream-io/video-react-native-sdk";

const user: User = { id: "sara" };
const apiKey = "my-stream-api-key";
const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...";

const client = StreamVideoClient.getOrCreateInstance({ apiKey, token, user });
```
Tokens:
Raw