End of Life for Twilio Programmable Video - Upgrade to VideoSDKLearn More

Video Calling API for React JS with Video SDK

Easily build beautiful video conferencing into your React JS app.

Fully Customizable UI
Fully Customizable UI
Native Mobile SDK’s
Native Mobile SDK’s
5000 Participant Support
5000 Participant Support
RTMP Live Stream
RTMP Live Stream
Cloud Recording
Cloud Recording
HD Screen Sharing
HD Screen Sharing
Breakout Rooms
Breakout Rooms
Real-time Messaging
Real-time Messaging

Installation

1. Install the package via your favorite package manager

1# npm
2npm install "@videosdk.live/react-sdk" --save
3
4# yarn
5yarn add "@videosdk.live/react-sdk"

2. Initialize Video SDK factory

1import { MeetingProvider, useMeeting } from "@videosdk.live/react-sdk";
2
3const App = () => {
4    // Init Meeting Provider
5    return (
6        <MeetingProvider
7            config={{
8                meetingId: "<Id-on-meeting>",
9                name: "<Name-of-participant>",
10                micEnabled: "<Flag-to-enable-mic>",
11                webcamEnabled: "<Flag-to-enable-webcam>",
12                maxResolution: "<Maximum-resolution>",
13            }}
14            token={"<Authentication-token>"}
15        >
16            <MeetingView>...</MeetingView>
17        </MeetingProvider>
18    );
19};
20
21const MeetingView = () => {
22    // Get Meeting object using useMeeting hook
23    const meeting = useMeeting();
24
25    return <>...</>;
26};

3. Join the meeting

1meeting?.join();

Fork it.

We love issues, pull requests, forks,
and compliments (constructive criticism counts too).

10,000 minutes free, every month.

Get started for FREE. No credit card required.