{"id":13692031,"url":"https://github.com/videosdk-live/videosdk-rtc-react-sdk-example","last_synced_at":"2025-04-04T08:07:08.186Z","repository":{"id":40352832,"uuid":"386559238","full_name":"videosdk-live/videosdk-rtc-react-sdk-example","owner":"videosdk-live","description":"WebRTC based video conferencing SDK for React JS ","archived":false,"fork":false,"pushed_at":"2025-02-10T08:45:31.000Z","size":11651,"stargazers_count":126,"open_issues_count":12,"forks_count":78,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-28T07:08:38.664Z","etag":null,"topics":["chat","javascript","live-streaming","react","reactjs","realtime","sdk","video","video-conferencing","video-sdk","video-streaming","webrtc"],"latest_commit_sha":null,"homepage":"https://docs.videosdk.live/react/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-07-16T08:04:35.000Z","updated_at":"2025-03-23T20:58:08.000Z","dependencies_parsed_at":"2023-11-06T06:29:28.327Z","dependency_job_id":"4b4ea411-4b48-487f-9704-c1ec201a675e","html_url":"https://github.com/videosdk-live/videosdk-rtc-react-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-react-sdk-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/videosdk-live%2Fvideosdk-rtc-react-sdk-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/videosdk-live%2Fvideosdk-rtc-react-sdk-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/videosdk-live%2Fvideosdk-rtc-react-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-react-sdk-example/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247142065,"owners_count":20890652,"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":["chat","javascript","live-streaming","react","reactjs","realtime","sdk","video","video-conferencing","video-sdk","video-streaming","webrtc"],"created_at":"2024-08-02T17:00:52.759Z","updated_at":"2025-04-04T08:07:08.167Z","avatar_url":"https://github.com/videosdk-live.png","language":"JavaScript","funding_links":[],"categories":["Samples"],"sub_categories":[],"readme":"# πŸš€ Video SDK for React 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 for live audio/video, cloud recordings, RTMP/HLS streaming, 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[![React](https://cdn.videosdk.live/docs/images/youtube/React.png)](https://www.youtube.com/watch?v=Yho3zNYLVg8 \"React\")\n\n## πŸ“š **Table of Contents**\n\n- [πŸ–₯️ **Demo App**](#%EF%B8%8F-demo-app)\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- [🧩 **Project OverView**](#-project-overview)\n- [πŸ“– **Examples**](#-examples)\n- [πŸ“ **VideoSDK's Documentation**](#-documentation)\n- [πŸ’¬ **Join Our Community**](#-join-our-community)\n\n\n## πŸ–₯️ Demo App\n\nCurious to see it in action? Check out our [live demo here](https://videosdk.live/prebuilt/demo). \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/react/guide/video-and-audio-calling-api-sdk/authentication-and-token)\n\n## πŸ›  Prerequisites\n\n- **React** v16 or later\n- **Node** v10 or later\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```bash\ngit clone https://github.com/videosdk-live/videosdk-rtc-react-sdk-example.git\n```\n\n### Step 2: Set Up Environment Variables\n\nOpen your favorite code editor and copy the example environment file:\n\n```bash\ncp .env.example .env\n```\n\n### Step 3: Configure Your `.env` File\n\nGenerate a temporary token from your [**Video SDK Account**](https://app.videosdk.live/signup) and update the `.env` file:\n\n```env\nREACT_APP_VIDEOSDK_TOKEN=\"YOUR_TEMPORARY_TOKEN\"\n```\n\n### Step 4: Install Dependencies\n\nInstall the necessary packages:\n\n```bash\nnpm install\n```\n\n### Step 5: Launch the App\n\nBingo, it's time to push the launch button.\n\n```bash\nnpm run start\n```\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/react/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/react/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/react/guide/video-and-audio-calling-api-sdk/setup-call/join-meeting) | Allows participants to join a meeting. |\n| πŸšͺ **Leave Meeting** | [Leave Meeting](https://docs.videosdk.live/react/guide/video-and-audio-calling-api-sdk/setup-call/leave-end-meeting) | Allows participants to leave a meeting. |\n| 🎀 **Toggle Mic** | [Mic Control](https://docs.videosdk.live/react/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/react/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/react/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/react/guide/video-and-audio-calling-api-sdk/handling-media/image-capturer) | Capture images of other participant from their video stream, particularly useful for Video KYC and identity verification scenarios. |\n| πŸ”Œ **Change Input Device** | [Switch Input Devices](https://docs.videosdk.live/react/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/react/guide/video-and-audio-calling-api-sdk/handling-media/change-audio-ouptut-device) | Select an output device for audio during a meeting. |\n| βš™οΈ **Optimize Tracks** | [Track Optimization](https://docs.videosdk.live/react/api/sdk-reference/custom-tracks) | Enhance the quality and performance of media tracks. |\n| πŸ’¬ **Chat** | [In-Meeting Chat](https://docs.videosdk.live/react/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/react/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/react/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/react/guide/video-and-audio-calling-api-sdk/recording/Overview) | Record the meeting for future reference. |\n| πŸ“‘ **RTMP Livestream** | [RTMP Livestream](https://docs.videosdk.live/react/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/react/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/react/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/react/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/react/guide/video-and-audio-calling-api-sdk/control-remote-participant/remove-participant) | Eject a participant from the meeting. |\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 may use a temporary token for development. To create a temporary token, go to 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\n## 🧩 Project Overview\n\n### 1. Pre-Call Setup on Join Screen\n\n- **[components/DropDown.js](https://github.com/videosdk-live/videosdk-rtc-react-sdk-example/blob/main/src/components/DropDown.js)** : A dropdown component for selecting audio input devices (microphones), monitoring audio via the Web Audio API, and managing microphone settings.\n\n- **[components/DropDownCam.js](https://github.com/videosdk-live/videosdk-rtc-react-sdk-example/blob/main/src/components/DropDownCam.js)** : A dropdown component for selecting camera devices and managing camera permissions.\n\n- **[components/DropDownSpeaker.js](https://github.com/videosdk-live/videosdk-rtc-react-sdk-example/blob/main/src/components/DropDownSpeaker.js)** : Allows users to select speakers, test them with sample sounds, and track playback progress for confirmation.\n\n- **[components/NetworkStats.js](https://github.com/videosdk-live/videosdk-rtc-react-sdk-example/blob/main/src/components/NetworkStats.js)** : Displays real-time network statistics, such as upload and download speeds.\n\n\u003cp align=\"center\"\u003e\n\u003cimg width=\"600\" height=\"338\" src=\"public/precall-screen.gif\"/\u003e\n\u003c/p\u003e\n\n### 2. Create or Join Meeting\n\n- **[`components/screens/JoiningScreen.js`](https://github.com/videosdk-live/videosdk-rtc-react-sdk-example/blob/main/src/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.\n\n- **[`api.js`](https://github.com/videosdk-live/videosdk-rtc-react-sdk-example/blob/main/src/api.js)** : Includes all API calls for creating and validating meetings.\n\n- **[`components/MeetingDetailsScreen.js`](https://github.com/videosdk-live/videosdk-rtc-react-sdk-example/blob/main/src/components/MeetingDetailsScreen.js)** : Displays options for creating or joining a meeting.\n\n\u003cp align=\"center\"\u003e\n\u003cimg width=\"600\" height=\"338\" src=\"public/create-meeting.gif\"/\u003e\n\u003c/p\u003e\n\n### 3. Waiting Screen\n\n- **[`components/screens/WaitingToJoin.js`](https://github.com/videosdk-live/videosdk-rtc-react-sdk-example/blob/main/src/components/screens/WaitingToJoinScreen.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`.\n\n\u003cp align=\"center\"\u003e\n\u003cimg width=\"600\" height=\"338\" src=\"public/waiting-screen.gif\"/\u003e\n\u003c/p\u003e\n\n### 4. Participant View\n\n- **[`components/ParticipantView.js`](https://github.com/videosdk-live/videosdk-rtc-react-sdk-example/blob/main/src/components/ParticipantView.js)** : Displays a single participant's video with a corner display for the participant's name.\n\n- **[`components/ParticipantGrid.js`](https://github.com/videosdk-live/videosdk-rtc-react-sdk-example/blob/main/src/components/ParticipantGrid.js)** : Displays a grid of participants shown on the main screen.\n\n- **[`meeting/components/ParticipantView.js`](https://github.com/videosdk-live/videosdk-rtc-react-sdk-example/blob/main/src/meeting/components/ParticipantView.js)** : Manage how many participants will be displayed in the participant grid.\n\n\u003cp align=\"center\"\u003e\n\u003cimg width=\"600\" height=\"338\" src=\"public/participant_view.png\"/\u003e\n\u003c/p\u003e\n\n### 5. Meeting Bottom Bar\n\n- **[`meeting/components/BottomBar.js`](https://github.com/videosdk-live/videosdk-rtc-react-sdk-example/blob/main/src/meeting/components/BottomBar.js)** \n Contains the buttons displayed at the bottom of the screen:\n - Shows the meeting ID with a copy icon button on the left.\n - 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.\n - The rightmost corner contains the chat button and participant count button.\n - 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.\n\n\u003cp align=\"center\"\u003e\n\u003cimg width=\"1363\" src=\"public/bottombar.png\"/\u003e\n\u003c/p\u003e\n\n### 6. Presenter View\n\n- **[`components/PresenterView.js`](https://github.com/videosdk-live/videosdk-rtc-react-sdk-example/blob/main/src/components/PresenterView.js)** : Displays the view when a participant shares their screen.\n\n\u003cp align=\"center\"\u003e\n\u003cimg width=\"600\" height=\"338\" src=\"public/presenter-view.gif\"/\u003e\n\u003c/p\u003e\n\n### 7. Chat\n\n- **[`sidebar/ChatPanel.js`](https://github.com/videosdk-live/videosdk-rtc-react-sdk-example/blob/main/src/components/sidebar/ChatPanel.js)** : Contains the chat side panel, with a chat input field and a list of chat messages.\n\n\u003cp align=\"center\"\u003e\n\u003cimg width=\"600\" height=\"338\" src=\"public/chat.gif\"/\u003e\n\u003c/p\u003e\n\n### 8. Participant List\n\n- **[`sidebar/ParticipantPanel.js`](https://github.com/videosdk-live/videosdk-rtc-react-sdk-example/blob/main/src/components/sidebar/ParticipantPanel.js)** : Displays the list of participants present in the meeting.\n\n\u003cp align=\"center\"\u003e\n\u003cimg width=\"600\" height=\"338\" src=\"public/participant_list.gif\"/\u003e\n\u003c/p\u003e\n\n### 9. Leave Screen\n\n- **[`components/screens/LeaveScreen.js`](https://github.com/videosdk-live/videosdk-rtc-react-sdk-example/blob/main/src/components/screens/LeaveScreen.js)** : Displays the leave screen when participant exit the meeting.\n\n\u003cp align=\"center\"\u003e\n\u003cimg width=\"600\" src=\"public/leave-screen.png\"/\u003e\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\n## πŸ“– Examples\n\n- [**Prebuilt Examples**](https://github.com/videosdk-live/videosdk-rtc-prebuilt-examples)\n- [**JavaScript SDK Example**](https://github.com/videosdk-live/videosdk-rtc-javascript-sdk-example)\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-react-sdk-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvideosdk-live%2Fvideosdk-rtc-react-sdk-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvideosdk-live%2Fvideosdk-rtc-react-sdk-example/lists"}