VideoSDK for React JS

At Video SDK, we’re building tools to help companies create world-class collaborative products with capabilities of live audio/videos, compose cloud recordings/rtmp/hls and interaction APIs

Setup Guide

Sign up on VideoSDK and visit API Keys section to get your API key and Secret key.
Get familiarized with Authentication and tokens

Prerequisites

React Js 16 or later
Node 10 or later
Valid Video SDK Account

Run the Sample App

Step 1: Clone the sample project

Clone the repository to your local environment.

git clone https://github.com/videosdk-live/quickstart.git
cd quickstart/react

Step 2: Update the `API.js` file.

Update the API.js file with your Authentication Token generated from VideoSDK Dashboard.

Step 3: Install the dependecies

Install all the dependecies to run the project.

npm install

Step 4: Run the Sample App

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

npm run start

Key Concepts

Meeting - A Meeting represents Real time audio and video communication.

Note : Don't confuse with Room and Meeting keyword, both are same thing 😃
Sessions - A particular duration you spend in a given meeting is a referred as session, you can have multiple session of a particular meetingId.
Participant - Participant represents someone who is attending the meeting's session, local partcipant represents self (You), for this self, other participants are remote participants.
Stream - Stream means video or audio media content that is either published by local participant or remote participants.

Token Generation

Token is used to create and validate a meeting using API and also initialise a meeting.

🛠️ Development Environment:

You may use a temporary token for development. To create a temporary token, go to VideoSDK dashboard .

🌐 Production Environment:

You must set up an authentication server to authorise users for production. To set up an authentication server, refer to our official example repositories. videosdk-rtc-api-server-examples

API: Create and Validate meeting

create meeting - Please refer this documentation to create meeting.
validate meeting- Please refer this documentation to validate the meetingId.

Initialize a Meeting

You can initialize the meeting using MeetingProvider. Meeting Provider simplifies configuration of meeting with by wrapping up core logic with react-context.

<MeetingProvider
  config={{
    meetingId: "meeting-id",
    micEnabled: true,
    webcamEnabled: true,
    name: "Participant Name",
  }}
  token={"token"}
  joinWithoutUserInteraction // Boolean
></MeetingProvider>

Enable/Disable Local Webcam

const { toggleWebcam } = useMeeting();

const onClick = () => {
  // Enable/Disable Webcam in Meeting
  toggleWebcam();
};

Mute/Unmute Local Audio

const { toggleMic } = useMeeting();

const onClick = () => {
  // Enable/Disable Mic in Meeting
  toggleMic();
};

Leave or End Meeting

const { leave, end } = useMeeting();

const onClick = () => {
  // Leave Meeting
  leave();

  //End Meeting
  end();
};

Meeting Event callbacks

By registering callback handlers, VideoSDK sends callbacks to the client app whenever there is a change or update in the meeting after a user joins.

function onMeetingJoined() {
  // This event will be emitted when a localParticipant(you) successfully joined the meeting.
  console.log("onMeetingJoined");
}
function onMeetingLeft() {
  // This event will be emitted when a localParticipant(you) left the meeting.
  console.log("onMeetingLeft");
}

const { meetingId, meeting, localParticipant } = useMeeting({
  onMeetingJoined,
  onMeetingLeft,
});

If you want to learn more about the SDK, read the Complete Documentation of React VideoSDK

Examples

Documentation

Read the documentation to start using VideoSDK.

Community

Discord - To get involved with the Video SDK community, ask questions and share tips.
Twitter - To receive updates, announcements, blog posts, and general Video SDK tips.

blakeparkinson/rumchata