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.

• 🖥️ Demo App
• ⚡ Quick Setup
• 🔧 Prerequisites
• 📦 Running the Sample App
• 🔥 Meeting Features
• 🧠 Key Concepts
• 🔑 Token Generation
• 🧩 Project OverView
• 📖 Examples
• 📝 VideoSDK's Documentation
• 💬 Join Our Community

📱 Download the Sample iOS app here: https://testflight.apple.com/join/LYj3QJPx

📱 Download the Sample Android app here: https://appdistribution.firebase.dev/i/a4c63049415c4356

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

• React Native 0.59.10 or later
• Node 10 or later
• Valid Video SDK Account
• For Android
  • Java Development Kit (JDK) 8 or later
  • Android Studio (latest version recommended)
  • A physical or virtual mobile device running Android 5.0 or later
• For iOS
  • Xcode 10 or later
  • CocoaPods
  • A physical or virtual mobile device running iOS 12.0 or later

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

Clone the repository to your local environment.

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

Open your favorite code editor and copy .env.example to .env file.

cp .env.example .env

Generate a temporary token from Video SDK Account.

REACT_APP_VIDEOSDK_TOKEN = "TEMPORARY-TOKEN";

Install all the dependencies to run the project.

npm install

For iOS, navigate to the ios folder and install the pods.

cd ios
pod install

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

npm run start
npm android
npm ios

Unlock a suite of powerful features to enhance your meetings:

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.

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

• One-to-One meeting - The One-to-One meeting allows 2 participants to join a meeting in the app.

• Group Meeting - The Group meeting allows any number of participants to join a meeting in the app with a maximum of 6 participants on screen.

We have separated screens and components in the following folder structure:

src
└── scenes
    └── join
      └── index.js
    └── meeting

• scenes/join/index.js: This file provides an interface for users to create or join meetings, allowing control over audio, video, and camera orientation.

scenes
└── meeting
    └── index.js
    └── MeetingContainer.js
    └── Components
    └── Conference
    └── OneToOne

• meeting/index.js : This file essentially initializes the meeting based on the provided configuration, such as meeting ID, participant name, and mic/camera status.
• meeting/MeetingContainer.js : MeetingContainer.js manages joining and leaving meetings, tracking participant status and limits using useMeeting. It dynamically renders either ConferenceMeetingViewer, OneToOneMeetingViewer, or a waiting view based on the meeting type and participant count.

This folder contains all the common components used in the Conference and OneToOne meeting types.

Components
    └── ChatViewer
    └── ParticipantListViewer
    └── LocalParticipantPresenter.js
    └── WaitingToJoinView.js

• ChatViewer provides a real-time chat interface, displaying messages in a scrollable list with sender names and timestamps.

  

• ParticipantListViewer displays a list of meeting participants using their IDs, with each participant represented by a ParticipantListItem component.

  

• LocalParticipantPresenter.js displays a view indicating that the local user is presenting, with options to manage screen sharing.

  

• WaitingToJoinView.js provides a waiting screen with animation and message while a meeting room is being created.

  

The whole user interface and business logic for the meeting type Conference are contained in this folder.

Conference
    └── ConferenceMeetingViewer.js
    └── ConferenceParticipantGrid.js
    └── ParticipantView.js
    └── PauseInvisibleParticipant.js
    └── RemoteParticipantPresenter.js

• ConferenceMeetingViewer.js manages the primary layout and interaction for conference-style meetings, showing participant views, recording status, and controls for toggling audio, video, and screen sharing.

  

• ConferenceParticipantGrid.js arranges participant video feeds in a responsive grid, adjusting the number of participants per row and video quality based on the total participant count and whether someone is presenting. It uses a memoized ParticipantView to improve rendering efficiency and includes a BottomSheet for viewing individual participant stats.

• ParticipantView.js maintains the stream of a particular participant as well as the status of controls (Mic and Cam).

• PauseInvisibleParticipant.js optimizes resource usage by pausing video streams of participants who are not visible on the screen. It maps through all participants and checks if each participant ID is within the list of visible participants, resuming streams for visible ones and pausing others.

• RemoteParticipantPresenter.js displays the screen share of a remote participant.

  

The whole user interface and business logic for the meeting type OneToOne are contained in this folder.

OneToOne
    └── index.js
    └── LargeView
    └── MiniView
    └── LocalViewContainer.js
    └── ParticipantLimitViewer.js

• The OneToOneMeetingViewer component defines the layout for one-on-one meetings, managing primary views for LargeView and MiniView participants. It provides controls for toggling audio, video, and screen sharing, and includes a BottomSheet for viewing participant stats, chat, and the participant list. The interface adapts dynamically based on participant count, screen-sharing status, and device orientation.

  

• LargeView displays a participant's video or screen share in full view, prioritizing high video quality.

• MiniView is dedicated to displaying a minimized view of a local participant’s video stream.

• LocalViewContainer.js handles displaying the local participant’s video stream when no other participants are present in the meeting.

  

• ParticipantLimitViewer.js notifies users when the maximum participant limit is reached in a meeting, displaying a message that only two participants are allowed.

  

• Prebuilt Examples
• JavaScript SDK Example
• React SDK Example
• Flutter SDK Example
• Android Java SDK Example
• Android Kotlin SDK Example
• iOS SDK Example

Explore more and start building with our Documentation

• 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.