Skip to content

Latest commit

 

History

History
253 lines (164 loc) · 16.7 KB

README.md

File metadata and controls

253 lines (164 loc) · 16.7 KB
Raw

🚀 Video SDK for React JS

Documentation Discord Register

At Video SDK, we’re building tools to help companies create world-class collaborative products with capabilities for live audio/video, cloud recordings, RTMP/HLS streaming, and interaction APIs.

🥳 Get 10,000 minutes free every month! Try it now!

⚡️From Clone to Launch - Get Started with the Example in 5 mins!

React

📚 Table of Contents

🖥️ Demo App

Curious to see it in action? Check out our live demo here.

⚡ Quick Setup

  1. Sign up on VideoSDK to grab your API Key and Secret.
  2. Familiarize yourself with Token

🛠 Prerequisites

📦 Running the Sample App

Follow these steps to get the sample app up and running:

Step 1: Clone the Repository

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

Step 2: Set Up Environment Variables

Open your favorite code editor and copy the example environment file:

cp .env.example .env

Step 3: Configure Your .env File

Generate a temporary token from your Video SDK Account and update the .env file:

REACT_APP_VIDEOSDK_TOKEN="YOUR_TEMPORARY_TOKEN"

Step 4: Install Dependencies

Install the necessary packages:

npm install

Step 5: Launch the App

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

npm run start

🔥 Meeting Features

Unlock a suite of powerful features to enhance your meetings:

Feature Documentation Description
📋 Precall Setup Setup Precall Configure audio, video devices and other settings before joining the meeting.
⏳ Waiting Lobby Waiting Lobby Virtual space for participants to wait before joining the meeting.
🤝 Join Meeting Join Meeting Allows participants to join a meeting.
🚪 Leave Meeting Leave Meeting Allows participants to leave a meeting.
🎤 Toggle Mic Mic Control Toggle the microphone on or off during a meeting.
📷 Toggle Camera Camera Control Turn the video camera on or off during a meeting.
🖥️ Screen Share Screen Share Share your screen with other participants during the call.
📸 Image Capture Image Capturer Capture images of other participant from their video stream, particularly useful for Video KYC and identity verification scenarios.
🔌 Change Input Device Switch Input Devices Switch between different audio and video input devices.
🔊 Change Audio Output Switch Audio Output Select an output device for audio during a meeting.
⚙️ Optimize Tracks Track Optimization Enhance the quality and performance of media tracks.
💬 Chat In-Meeting Chat Exchange messages with participants through a Publish-Subscribe mechanism.
📝 Whiteboard Whiteboard Collaborate visually by drawing and annotating on a shared whiteboard.
📁 File Sharing File Sharing Share files with participants during the meeting.
📼 Recording Recording Record the meeting for future reference.
📡 RTMP Livestream RTMP Livestream Stream the meeting live to platforms like YouTube or Facebook.
📝 Real-time Transcription Real-time Transcription Generate real-time transcriptions of the meeting.
🔇 Toggle Remote Media Remote Media Control Control the microphone or camera of remote participants.
🚫 Mute All Participants Mute All Mute all participants simultaneously during the call.
🗑️ Remove Participant Remove Participant Eject a participant from the meeting.

🧠 Key Concepts

Understand the core components of our SDK:

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

    Note: Don't confuse the terms Room and Meeting; both mean the same thing 😃

  • Sessions - A particular duration you spend in a given meeting is referred as a session, you can have multiple sessions of a specific meetingId.

  • Participant - A participant refers to anyone attending the meeting session. The local participant represents yourself (You), while all other attendees are considered remote participants.

  • Stream - A stream refers to video or audio media content that is published by either the local participant or remote participants.

🔐 Token Generation

The token is used to create and validate a meeting using API and also initialize a meeting.

🛠️ Development Environment:

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

🌐 Production Environment:

  • You must set up an authentication server to authorize users for production. To set up an authentication server, please take a look at our official example repositories. videosdk-rtc-api-server-examples

🧩 Project Overview

1. Pre-Call Setup on Join Screen

  • components/DropDown.js : A dropdown component for selecting audio input devices (microphones), monitoring audio via the Web Audio API, and managing microphone settings.

  • components/DropDownCam.js : A dropdown component for selecting camera devices and managing camera permissions.

  • components/DropDownSpeaker.js : Allows users to select speakers, test them with sample sounds, and track playback progress for confirmation.

  • components/NetworkStats.js : Displays real-time network statistics, such as upload and download speeds.

2. Create or Join Meeting

  • components/screens/JoiningScreen.js : Provides users the option to create or join a meeting, manage webcam and mic status, select devices (microphone, camera, speakers), check permissions, preview video, and monitor network statistics to ensure proper setup before entering the meeting.

  • api.js : Includes all API calls for creating and validating meetings.

  • components/MeetingDetailsScreen.js : Displays options for creating or joining a meeting.

3. Waiting Screen

  • components/screens/WaitingToJoin.js : Displays a Lottie animation with messages while waiting to join the meeting. This screen is shown until the isMeetingJoined flag is true, which is received from the meeting initialized using useMeeting() from @videosdk.live/react-sdk.

4. Participant View

5. Meeting Bottom Bar

  • meeting/components/BottomBar.js
    Contains the buttons displayed at the bottom of the screen:
    • Shows the meeting ID with a copy icon button on the left.
    • Displays the recording indicator, raise hand button, mic button (with a list of available mics), webcam button (with available webcam list), screen share button, and leave meeting button in the middle.
    • The rightmost corner contains the chat button and participant count button.
    • On a mobile, tablet, or smaller screens, the bottom bar reorders to show the leave button, recording button, mic/webcam buttons, and a more actions button. The more actions button opens a drawer containing the remaining options.

6. Presenter View

7. Chat

  • sidebar/ChatPanel.js : Contains the chat side panel, with a chat input field and a list of chat messages.

8. Participant List

9. Leave Screen


📖 Examples

📝 Documentation

Explore more and start building with our Documentation

🤝 Join Our Community

  • Discord: Engage with the Video SDK community, ask questions, and share insights.
  • X: Stay updated with the latest news, updates, and tips from Video SDK.