Run Agent Starter Project - React

Video SDK provides an open-source sample project agent-starter-app-react on Github. This document introduces how to run the project.

Prerequisites

• Node.js (v18.x or later)
• npm or yarn
• Valid VideoSDK Account

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/agent-starter-app-react.git
cd agent-starter-react

Step 2: Copy the .env.example file to .env file.

2

Copy the .env.example file to .env file

Open your favorite code editor and copy .env.example to .env file.

cp .env.example .env;

Step 3: Modify .env file

3

Modify .env file

Update the .env file with your credentials:

• Add your VideoSDK auth token
• Provide the Agent ID you want to use
• Optionally, include a Meeting ID

.env

VITE_AUTH_TOKEN=your_videosdk_auth_token
VITE_AGENT_ID=your_agent_id
VITE_MEETING_ID=your_meeting_id (optional)

Step 4: Install the dependencies

4

Install the dependencies

Install all the project dependencies.

npm install
# or
yarn install

Step 5: Run the Sample App

5

Run the Sample App

Bingo, it's time to push the launch button!

npm run dev
#or
yarn dev