{"id":21213903,"url":"https://github.com/videosdk-live/videosdk-rtc-javascript-sdk-example","last_synced_at":"2025-07-10T09:33:14.198Z","repository":{"id":41605121,"uuid":"420394824","full_name":"videosdk-live/videosdk-rtc-javascript-sdk-example","owner":"videosdk-live","description":"This code sample demonstrates a one-to-one and group video call application built with Video SDK RTC Javascript SDK","archived":false,"fork":false,"pushed_at":"2024-11-05T07:34:40.000Z","size":303,"stargazers_count":36,"open_issues_count":4,"forks_count":21,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-05T08:28:04.486Z","etag":null,"topics":["javascript","low-latency","video-call","webrtc"],"latest_commit_sha":null,"homepage":"https://docs.videosdk.live/docs/guide/video-and-audio-calling-api-sdk/getting-started","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/videosdk-live.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-23T11:35:18.000Z","updated_at":"2024-11-03T18:55:40.000Z","dependencies_parsed_at":"2024-01-19T14:48:48.949Z","dependency_job_id":"e82cee4d-e886-46d2-a249-5f8e4ec0d39a","html_url":"https://github.com/videosdk-live/videosdk-rtc-javascript-sdk-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/videosdk-live%2Fvideosdk-rtc-javascript-sdk-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/videosdk-live%2Fvideosdk-rtc-javascript-sdk-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/videosdk-live%2Fvideosdk-rtc-javascript-sdk-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/videosdk-live%2Fvideosdk-rtc-javascript-sdk-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/videosdk-live","download_url":"https://codeload.github.com/videosdk-live/videosdk-rtc-javascript-sdk-example/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225631180,"owners_count":17499562,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","low-latency","video-call","webrtc"],"created_at":"2024-11-20T21:24:39.586Z","updated_at":"2024-11-20T21:24:40.097Z","avatar_url":"https://github.com/videosdk-live.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# πŸš€ Video SDK for JS\n\n[![Documentation](https://img.shields.io/badge/Read-Documentation-blue)](https://docs.videosdk.live/react/guide/video-and-audio-calling-api-sdk/concept-and-architecture)\n[![Discord](https://img.shields.io/discord/876774498798551130?label=Join%20on%20Discord)](https://discord.gg/kgAvyxtTxv)\n[![Register](https://img.shields.io/badge/Contact-Know%20More-blue)](https://app.videosdk.live/signup)\n\nAt 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\n\n### πŸ₯³ Get **10,000 minutes free** every month! **[Try it now!](https://app.videosdk.live/signup)**\n\n### ⚑️From Clone to Launch - Get Started with the Example in 5 mins!\n\n[![JS](https://cdn.videosdk.live/docs/images/youtube/JS.png)](https://youtu.be/SeQ6d1efN5A?si=HepO1fEmK-qYKjwL \"JS\")\n\n## πŸ“š **Table of Contents**\n\n- [⚑ **Quick Setup**](#-quick-setup)\n- [πŸ”§ **Prerequisites**](#-prerequisites)\n- [πŸ“¦ **Running the Sample App**](#-running-the-sample-app)\n- [πŸ”₯ **Meeting Features**](#-meeting-features)\n- [🧠 **Key Concepts**](#-key-concepts)\n- [πŸ”‘ **Token Generation**](#-token-generation)\n- [πŸ“– **Examples**](#-examples)\n- [πŸ“ **VideoSDK's Documentation**](#-documentation)\n- [πŸ’¬ **Join Our Community**](#-join-our-community)\n\n\n## ⚑ Quick Setup\n\n1. Sign up on [VideoSDK](https://app.videosdk.live/) to grab your API Key and Secret.\n2. Familiarize yourself with [Token](https://docs.videosdk.live/javascript/guide/video-and-audio-calling-api-sdk/authentication-and-token)\n\n## πŸ›  Prerequisites\n\nYou must have the following installed:\n\n- Node.js v12+\n- NPM v6+ (comes pre-installed with newer Node versions)\n- A valid [Video SDK Account](https://app.videosdk.live/signup)\n\n## πŸ“¦ Running the Sample App\n\nFollow these steps to get the sample app up and running:\n\n### Step 1: Clone the Repository\n\n```sh\ngit clone https://github.com/videosdk-live/videosdk-rtc-javascript-sdk-example.git\n```\n\n### Step 2: Set Up Environment Variables\n\nCopy the example environment file:\n\n```bash\ncp config.example.js config.js\n```\n\n### Step 3: Configure Your `config.js` File\n\nGenerate a temporary token from your [**Video SDK Account**](https://app.videosdk.live/signup) and update the `config.js` file:\n\n```\nTOKEN=\"Your Token Here\"\n```\n\n### Step 4: Run the app\n\n```sh\nnpm install -g live-server\nlive-server --port=8000\n```\n\n## πŸ”₯ Meeting Features\n\nUnlock a suite of powerful features to enhance your meetings:\n\n| Feature | Documentation | Description |\n|--------------------------------|------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------|\n| πŸ“‹ **Precall Setup** | [Setup Precall](https://docs.videosdk.live/javascript/guide/video-and-audio-calling-api-sdk/setup-call/precall) | Configure audio, video devices and other settings before joining the meeting. |\n| ⏳ **Waiting Lobby** | [Waiting Lobby](https://docs.videosdk.live/javascript/guide/video-and-audio-calling-api-sdk/setup-call/waiting-lobby) | Virtual space for participants to wait before joining the meeting. |\n| 🀝 **Join Meeting** | [Join Meeting](https://docs.videosdk.live/javascript/guide/video-and-audio-calling-api-sdk/setup-call/join-meeting) | Allows participants to join a meeting. |\n| 🎀 **Toggle Mic** | [Mic Control](https://docs.videosdk.live/javascript/guide/video-and-audio-calling-api-sdk/handling-media/mute-unmute-mic) | Toggle the microphone on or off during a meeting. |\n| πŸ“· **Toggle Camera** | [Camera Control](https://docs.videosdk.live/javascript/guide/video-and-audio-calling-api-sdk/handling-media/on-off-camera) | Turn the video camera on or off during a meeting. |\n| πŸ–₯️ **Screen Share** | [Screen Share](https://docs.videosdk.live/javascript/guide/video-and-audio-calling-api-sdk/handling-media/screen-share) | Share your screen with other participants during the call. |\n| πŸ“Έ **Image Capture** | [Image Capturer](https://docs.videosdk.live/javascript/guide/video-and-audio-calling-api-sdk/handling-media/image-capturer) | Capture images of other participant from their video stream, handy for Video KYC and identity verification scenarios. |\n| πŸ”Œ **Change Input Device** | [Switch Input Devices](https://docs.videosdk.live/javascript/guide/video-and-audio-calling-api-sdk/handling-media/change-input-device) | Switch between different audio and video input devices. |\n| πŸ”Š **Change Audio Output** | [Switch Audio Output](https://docs.videosdk.live/javascript/guide/video-and-audio-calling-api-sdk/handling-media/change-audio-ouptut-device) | Select an output device for audio during a meeting. |\n| βš™οΈ **Optimize Video Track** | [Video Track Optimization](https://docs.videosdk.live/javascript/guide/video-and-audio-calling-api-sdk/render-media/optimize-video-track) | Enhance the quality and performance of media tracks. |\n| βš™οΈ **Optimize Audio Track** | [Audio Track Optimization](https://docs.videosdk.live/javascript/guide/video-and-audio-calling-api-sdk/render-media/optimize-audio-track) | Enhance the quality and performance of media tracks. |\n| πŸ’¬ **Chat** | [In-Meeting Chat](https://docs.videosdk.live/javascript/guide/video-and-audio-calling-api-sdk/collaboration-in-meeting/pubsub) | Exchange messages with participants through a Publish-Subscribe mechanism. |\n| πŸ“ **Whiteboard** | [Whiteboard](https://docs.videosdk.live/javascript/guide/video-and-audio-calling-api-sdk/collaboration-in-meeting/whiteboard) | Collaborate visually by drawing and annotating on a shared whiteboard. |\n| πŸ“ **File Sharing** | [File Sharing](https://docs.videosdk.live/javascript/guide/video-and-audio-calling-api-sdk/collaboration-in-meeting/upload-fetch-temporary-file) | Share files with participants during the meeting. |\n| πŸ“Ό **Recording** | [Recording](https://docs.videosdk.live/javascript/guide/video-and-audio-calling-api-sdk/recording/Overview) | Record the meeting for future reference. |\n| πŸ“‘ **RTMP Livestream** | [RTMP Livestream](https://docs.videosdk.live/javascript/guide/video-and-audio-calling-api-sdk/live-streaming/rtmp-livestream) | Stream the meeting live to platforms like YouTube or Facebook. |\n| πŸ“ **Real-time Transcription** | [Real-time Transcription](https://docs.videosdk.live/javascript/guide/video-and-audio-calling-api-sdk/transcription-and-summary/realtime-transcribe-meeting) | Generate real-time transcriptions of the meeting. |\n| πŸ”‡ **Toggle Remote Media** | [Remote Media Control](https://docs.videosdk.live/javascript/guide/video-and-audio-calling-api-sdk/control-remote-participant/remote-participant-media) | Control the microphone or camera of remote participants. |\n| 🚫 **Mute All Participants** | [Mute All](https://docs.videosdk.live/javascript/guide/video-and-audio-calling-api-sdk/control-remote-participant/mute-all-participants) | Mute all participants simultaneously during the call. |\n| πŸ—‘οΈ **Remove Participant** | [Remove Participant](https://docs.videosdk.live/javascript/guide/video-and-audio-calling-api-sdk/control-remote-participant/remove-participant) | Eject a participant from the meeting. |\n\n## 🧠 Key Concepts\n\nUnderstand the core components of our SDK:\n\n- `Meeting` - A Meeting represents Real-time audio and video communication.\n\n **` Note: Don't confuse the terms Room and Meeting; both mean the same thing πŸ˜ƒ`**\n\n- `Sessions` - A particular duration you spend in a given meeting is referred as a session, you can have multiple sessions of a specific meetingId.\n- `Participant` - A participant refers to anyone attending the meeting session. The `local participant` represents yourself (You), while all other attendees are considered `remote participants`.\n- `Stream` - A stream refers to video or audio media content that is published by either the `local participant` or `remote participants`.\n\n\n## πŸ” Token Generation\n\nThe token is used to create and validate a meeting using API and also initialize a meeting.\n\nπŸ› οΈ `Development Environment`:\n\n- You can use a temporary token for development. To create one, go to the VideoSDK's [dashboard](https://app.videosdk.live/api-keys) .\n\n🌐 `Production Environment`:\n\n- 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](https://github.com/videosdk-live/videosdk-rtc-api-server-examples)\n\n## πŸ“– Examples\n\n- [**Prebuilt Examples**](https://github.com/videosdk-live/videosdk-rtc-prebuilt-examples)\n- [**React SDK Example**](https://github.com/videosdk-live/videosdk-rtc-react-sdk-example.git)\n- [**React Native SDK Example**](https://github.com/videosdk-live/videosdk-rtc-react-native-sdk-example)\n- [**Flutter SDK Example**](https://github.com/videosdk-live/videosdk-rtc-flutter-sdk-example)\n- [**Android Java SDK Example**](https://github.com/videosdk-live/videosdk-rtc-android-java-sdk-example)\n- [**Android Kotlin SDK Example**](https://github.com/videosdk-live/videosdk-rtc-android-kotlin-sdk-example)\n- [**iOS SDK Example**](https://github.com/videosdk-live/videosdk-rtc-ios-sdk-example)\n\n\n## πŸ“ Documentation\n\nExplore more and start building with our [**Documentation**](https://docs.videosdk.live/)\n\n## 🀝 Join Our Community\n\n- **[Discord](https://discord.gg/Gpmj6eCq5u)**: Engage with the Video SDK community, ask questions, and share insights.\n- **[X](https://x.com/video_sdk)**: Stay updated with the latest news, updates, and tips from Video SDK.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvideosdk-live%2Fvideosdk-rtc-javascript-sdk-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvideosdk-live%2Fvideosdk-rtc-javascript-sdk-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvideosdk-live%2Fvideosdk-rtc-javascript-sdk-example/lists"}