/videosdk-rtc-javascript-sdk-example

This code sample demonstrates a one-to-one and group video call application built with Video SDK RTC Javascript SDK

Primary LanguageJavaScript

πŸš€ Video SDK for JS

Documentation Discord Register

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

πŸ₯³ Get 10,000 minutes free every month! Try it now!

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

JS

πŸ“š Table of Contents

⚑ Quick Setup

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

πŸ›  Prerequisites

You must have the following installed:

  • Node.js v12+
  • NPM v6+ (comes pre-installed with newer Node versions)
  • A valid Video SDK Account

πŸ“¦ 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-javascript-sdk-example.git

Step 2: Set Up Environment Variables

Copy the example environment file:

cp config.example.js config.js

Step 3: Configure Your config.js File

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

TOKEN="Your Token Here"

Step 4: Run the app

npm install -g live-server
live-server --port=8000

πŸ”₯ 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.
🎀 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, handy 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 Video Track Video Track Optimization Enhance the quality and performance of media tracks.
βš™οΈ Optimize Audio Track Audio 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 can use a temporary token for development. To create one, go to the 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

πŸ“– 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.