Video SDK 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

Demo App

Check out demo here

Meeting Features

• Real-time video and audio conferencing
• Enable/disable camera
• Mute/unmute mic
• Chat
• Raise hand
• Screen share
• Recording

Setup Guide

• Sign up on VideoSDK and visit API Keys section to get your API key and Secret key.

• Get familiarized with Token

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/videosdk-rtc-react-sdk-example.git

Step 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

Generate temporary token from Video SDK Account.

REACT_APP_VIDEOSDK_TOKEN = "TEMPORARY-TOKEN";

Step 4: Install the dependecies

Install all the dependecies to run the project.

npm install

Step 5: 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",
    participantId: "xyz",
    // For Interactive Live Streaming we can provide mode, `CONFERENCE` for Host and  `VIEWER` for remote participant.
    mode: "CONFERENCE", // "CONFERENCE" || "VIEWER"
  }}
  token={"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcGlrZXkiOiIzMmMxNmQ5ZC1hOTQ4LTRiZjUtYWUyZi01OTQzMjhjOTJmMDEiLCJwZXJtaXNzaW9ucyI6WyJhbGxvd19qb2luIl0sImlhdCI6MTY5NTk4MDMxNSwiZXhwIjoxODUzNzY4MzE1fQ.ji-q4DvqoTJWPQ75iuDg76PnkJnJfjyyeUYio9Jj7cU"}
  joinWithoutUserInteraction // Boolean
></MeetingProvider>

Enable/Disable Local Webcam

const onPress = () => {
  // Enable Webcam in Meeting
  meeting?.enableWebcam();

  // Disable Webcam in Meeting
  meeting?.disableWebcam();
};

Change Local Webcam

const onPress = () => {
const webcams = await meeting?.getWebcams(); // returns all webcams

const { deviceId, label } = webcams[0];

meeting?.changeWebcam(deviceId);
}

Mute/Unmute Local Audio

const onPress = () => {
  // Enable Mic in Meeting
  meeting?.unmuteMic();

  // Disable Mic in Meeting
  meeting?.muteMic();
};

Change Local Mic

const onPress = () => {
const mics = await meeting?.getMics(); // returns all mics

const { deviceId, label } = mics[0];

meeting?.changeMic(deviceId);
}

Chat

• The chat feature allows participants to send and receive messages about specific topics to which they have subscribed.

// importing usePubSub hook from react-sdk
import { usePubSub } from "@videosdk.live/react-sdk";

// CHAT Topic
const { publish, messages } = usePubSub("CHAT");

// publish message
const sendMessage = () => {
  const message = "Hello People!";
  publish(message, { persist: true });
};

// get latest messages
console.log("Messages : ", messages);

Raise Hand

• This feature allows participants to raise hand during the meeting.

// importing usePubSub hook from react-sdk
import { usePubSub } from "@videosdk.live/react-sdk";

// RAISE_HAND Topic
const { publish } = usePubSub("RAISE_HAND");

// Publish Message
const RaiseHand = () => {
  publish("Raise Hand");
};

Share Your Screen

• This featute allows participant to share either the complete screen, a specific window or, a browser tab.

const onPress = () => {
  // Enabling ScreenShare
  meeting?.enableScreenShare();

  // Disabling ScreenShare
  meeting?.disableScreenShare();
};

Recording

• Record meeting allows participants to record video & audio during the meeting. The recording files are available in developer dashboard. Any participant can start / stop recording any time during the meeting.

const onPress = () => {
  // Start Recording
  meeting?.startRecording(webhookUrl, awsDirPath);

  // Stop Recording
  meeting?.stopRecording();
};

Interactive Live Streaming

• Interactive Live Streaming allows participants to to broadcast live streaming to other participants. Host can start / stop HLS any time during the meeting.

const onPress = () => {
  // Start HLS
  const layout = {
    type: "SPOTLIGHT",
    priority: "PIN",
    gridSize: 9,
  },

  meeting?.startHls({ layout, theme: "DARK" });

  // Stop HLS
  meeting?.stopHls();
};

Leave or End Meeting

const onPress = () => {
  // Only one participant will leave/exit the meeting; the rest of the participants will remain.
  meeting?.leave();

  // The meeting will come to an end for each and every participant. So, use this function in accordance with your requirements.
  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");
}
function onParticipantJoined(participant) {
  // This event will be emitted when a new participant joined the meeting.
  // [participant]: new participant who joined the meeting
  console.log(" onParticipantJoined", participant);
}
function onParticipantLeft(participant) {
  // This event will be emitted when a joined participant left the meeting.
  // [participantId]: id of participant who left the meeting
  console.log(" onParticipantLeft", participant);
}
const onSpeakerChanged = (activeSpeakerId) => {
  // This event will be emitted when any participant starts or stops screen sharing.
  // [activeSpeakerId]: Id of participant who shares the screen.
  console.log(" onSpeakerChanged", activeSpeakerId);
};
function onPresenterChanged(presenterId) {
  // This event will be emitted when a active speaker changed.
  // [presenterId] : Id of active speaker
  console.log(" onPresenterChanged", presenterId);
}
function onRecordingStarted() {
  // This event will be emitted when recording of the meeting is started.
  console.log(" onRecordingStarted");
}
function onRecordingStopped() {
  // This event will be emitted when recording of the meeting is stopped.
  console.log(" onRecordingStopped");
}

const { meetingId, meeting, localParticipant } = useMeeting({
  onMeetingJoined,
  onMeetingLeft,
  onParticipantJoined,
  onParticipantLeft,
  onSpeakerChanged,
  onPresenterChanged,
  onRecordingStarted,
  onRecordingStopped,
});

Participant Events Callback

By registering callback handlers, VideoSDK sends callbacks to the client app whenever a participant's video, audio, or screen share stream is enabled or disabled.

  function onStreamEnabled(stream) {
    // This event will be triggered whenever a participant's video, audio or screen share stream is enabled.
    console.log(" onStreamEnabled", stream);
  }
  function onStreamDisabled(stream) {
    // This event will be triggered whenever a participant's video, audio or screen share stream is disabled.
    console.log(" onStreamDisabled", stream);
  }
  function onMediaStatusChanged(data) {
    // This event will be triggered whenever a participant's video or audio is disabled or enabled.
    const { kind, newStatus} = data;

    console.log("onMediaStatusChanged", kind,newStatus)

  }

  const {
    displayName
    ...
  } = useParticipant(participantId,{
    onStreamEnabled,
    onStreamDisabled,
    onMediaStatusChanged,
  });

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

Project Description

Note :

• main branch: Meeting and Interactive live streaming with better UI includes basic features.
• design/v1 branch: Simple UI with all features and methods.

Use case type

• Meeting - In Meeting you can enable mic and webcam, record the meeting, raise hand, chat, share your screen.

Project Structure

There are 1 folder :

1. meeting - This folder includes components or file related to meeting.

Common components

1. Create or join Meeting

• components/screens/JoiningScreen.js : It shows the user with the option to meeting type and create or join a meeting and to initiate webcam and mic status.

• api.js : It includes all the API calls for create and validate meeting.

• If you select Meeting type and click Create Meeting, it will show following:

  • MeetingId - You can copy this meetingId and share it with other participants that wants to join the meeting.
  • TextField for ParticipantName - This text field will contain name of the participant.
  • Start Meeting Button - This button will call api to create meeting with meetingId that participant want to join.

  

• If you select Meeting type and click Join Meeting, it will show following:

  • TextField for MeetingId - This text field will contain the meeting Id that you want to join.
  • TextField for ParticipantName - This text field will contain name of the participant.
  • Join Meeting Button - This button will call api to validate meeting with meetingId that participant want to join.

  

• If you select Interactive Live Streaming type and click Join as a Host, it will show following:

  • Studio code - You can copy this studio code and share with other participants that wants to join the meeting.
  • TextField for ParticipantName - This text field will contain name of the participant.
  • Join Studio Button - This button will call api to create meeting with studio code that participant want to join.

  

• If you select Interactive Live Streaming type and click Join as a Viewer, it will show following:

  • TextField for StudioCode - This text field will contain the studio code that you want to join.
  • TextField for ParticipantName - This text field will contain name of the participant.
  • Join Streaming Room Button - This button will call api to validate meeting with studio code that viewer want to join.

  

2. PresenterView

components/PresenterView.js - It contains the view when participant share their screen.

3. ParticipantView

components/ParticipantView.js - It contains single participant video and corner display name.

4. ParticipantGrid

components/ParticipantGrid.js - It contains the grid of participant that are displayed in the main screen.

5. ParticipantList

sidebar/ParticipantPanel.js - This file is used to show the list of participants present in the meeting.

6. Chat

sidebar/ChatPanel.js - It contains the chat side panel with chat input and chat messages list.

7. Waiting Screen

components/screens/WaitingToJoin.js - It contains the lottie animation with messages. Untill you receive isMeetingJoined true from meeting that you intialize using useMeeting() from @videosdk.live/react-sdk, this screen will be displayed.

8. Leave Screen

components/screens/LeaveScreen.js - This file contains the leave screen.

9. SidebarContainer

• components/sidebar/SidebarContainer.js - It containes Participanel, ChatPanel, CreatePoll, PollList and SubmitPollList component rendering.

Meeting Project Structure

1. MeetingContainer : It contains the PresenterView , ParticipantView, SidebarContainer and BottomBar.

2. Meeting Bottom Bar

• meeting/components/BottomBar.js: It contains the buttons that are displayed in bottom of the screen.

  • Starting from left it shows meetingId with copy icon button.

  • In middle, it shows recording indicator, raise hand icon button, mic icon button with available mics list, webcam icon button with available webcam list, screen share and leave meeting icon button.

  • In right most corner, it shows chat icon button and partcipants icon with participant count.

  • When screen resolution change to mobile, tab or lg screen, the order of bottom bar elements changes to leave meeting button, recording button, mic & webcam button and more actions button.

  • On click of more actions button it opens a drawer that contains other remaining buttons.

3. ParticipantView

• meeting/components/ParticipantView.js - It contains the grid of participant that are displayed in the main screen.

Examples

Examples for Conference

• videosdk-rtc-prebuilt-examples
• videosdk-rtc-javascript-sdk-example
• videosdk-rtc-react-sdk-examplee
• videosdk-rtc-react-native-sdk-example
• videosdk-rtc-flutter-sdk-example
• videosdk-rtc-android-java-sdk-example
• videosdk-rtc-android-kotlin-sdk-example
• videosdk-rtc-ios-sdk-example

Examples for Live Streaming

• videosdk-hls-react-sdk-example
• videosdk-hls-react-native-sdk-example
• videosdk-hls-flutter-sdk-example
• videosdk-hls-android-java-example
• videosdk-hls-android-kotlin-example

Documentation

Read the documentation to start using Video SDK.

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.