Run Http Live Streaming Project - React Native

Video SDK provides an open-source sample project videosdk-hls-react-native-sdk-example on Github. This document introduces how to run the project.

note

The sample project still uses React Native SDK v1.0.1. To build an app on v2.0.0, follow the HLS Quick Start. The Migration Guide lists what changed in v2.0.0.

Prerequisites

• Node.js 22.11.0 or later
• Valid Video SDK Account
• For Android
  • Java Development Kit (JDK) 17
  • Android Studio (latest version recommended)
  • An Android device running Android 7.0 (API level 24) or later, or an emulator
• For iOS
  • Xcode (latest version recommended)
  • CocoaPods
  • An iPhone or iPad running iOS 18.0 or later

Generate Token

To manage secured communication, every participant that connects to a meeting needs an access token. You can easily generate this token by using your apiKey and secret-key, which you can obtain from the VideoSDK Dashboard.

For development purpose, you can generate a temporary token from VideoSDK Dashboard's API section.

tip

The best practice for obtaining a token involves generating it from your backend server which will help in keeping your credentials safe.

Run the Sample Project

Step 1: Clone the sample project

1

Clone the sample project

Clone the repository to your local environment.

git clone https://github.com/videosdk-live/videosdk-hls-react-native-sdk-example.git

Step 2: Modify src/api/api.js file

2

Modify `src/api/api.js` file

Modify the file by pasting the previously generated temporary token here.

src/api/api.js

export const getToken = async () => {
  return "VIDEOSDK_DASHBOARD_TOKEN"; // Update Token here
};

Step 3: Install the dependencies

3

Install the dependencies

Install all the project dependencies.

npm install

For iOS, also install the pods:

cd ios && pod install && cd ..

Step 4: Run the Sample App

4

Run the Sample App

npm run start
npm run android
npm run ios