videosdk-live/videosdk-rtc-flutter-sdk-example

🚀 Video SDK for Flutter

Documentation Firebase TestFlight 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!

Flutter

📚 Table of Contents

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

🖥️ Demo App

📲 Download the sample iOS app here: https://testflight.apple.com/join/C1UOYbxh

📱 Download the sample Android app here: https://appdistribution.firebase.dev/i/80c2c6cc9fcb89b0

📱 Video SDK Compatibility

Android	iOS	Web	MacOS	Windows	Safari
✅	✅	✅	✅	✅	❌

⚡ Quick Setup

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

🛠 Prerequisites

• Flutter 2.0 or later
• Dart 3.3.0 or later
• A valid Video SDK Account

📦 Running the Sample App

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

1. Clone the sample project

Clone the repository to your local environment.

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

2. Copy the .env.example file to .env file.

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

cp .env.example .env

3. Modify .env file

Generate a temporary token from Video SDK Account.

AUTH_TOKEN = "TEMPORARY-TOKEN";

4. Install the dependencies

Install all the dependencies to run the project.

flutter pub get

5. Set Up for iOS/macOS (if applicable)

For iOS or macOS, navigate to the respective folder and install the pods.

cd ios // or cd macos
pod install

6. Run the sample app

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

flutter run

🔥 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.
🤝 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.
🔊 Change Audio Output	Switch Audio Output	Select an output device for audio during a meeting.
🔌 Change Video Output	Switch Video Output	Select an output device for audio during a meeting.
⚙️ Optimize Audio Track	Audio Track Optimization	Enhance the quality and performance of media tracks.
⚙️ Optimize Video Track	Video Track Optimization	Enhance the quality and performance of media tracks.
🖼️ Virtual Background	Virtual Background	Add a virtual background or blur effect to your video during the call.
💬 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.
📼 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

App Behaviour with Different Meeting Types

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

🏗️ Project Structure

• We have separated screens and widgets in the following folder structure:
  • one-to-one - It includes all files related to the OneToOne meeting.
  • common - It includes all the files used in both meeting types (OneToOne and Group calls).
  • conference-call - It includes all files related to the conference call.

1. Pre-Call Setup on Join Screen

• lib/widgets/common/pre_call/selectAudioDevice.dart : This file implements the SelectAudioDevice widget, which allows users to select an audio output device.

• lib/widgets/common/pre_call/selectVideoDevice.dart : This file provides the SelectVideoDevice widget for choosing a video input device (camera).

• lib/widgets/common/pre_call/dropdowns_Web.dart : This file defines the DropdownsWebWidget, a stateful widget that manages dropdown menus for selecting video and audio devices in a web interface.

2. Create or Join Meeting

• lib/utils/api.dart : This file handles the API interactions, including fetching a token, creating a meeting, validating a meeting, and fetching session data.

• lib/widgets/common/joining/join_view.dart : This file defines the JoinView widget, which provides the user interface for joining a meeting.

• lib/screens/common/join_screen.dart :

  • This file implements the JoinScreen widget, the main screen for joining or creating meetings.
  • It includes logic for handling device permissions, displaying the camera preview, and navigating to different meeting screens (one-to-one or group) after joining or creating a meeting.

• lib/widgets/common/joining_details/joining_details.dart :

  • This file defines the JoiningDetails widget, where users input meeting details like the meeting ID and their display name.
  • It includes a dropdown for selecting the meeting type (e.g., "One to One" or "Group Call"), and text fields for the meeting ID (when joining) and display name.

3. Waiting Screen

• lib/widgets/common/joining/waiting_to_join.dart : The waiting_to_join.dart file defines a basic UI screen that displays a loading animation and a message to notify users that a room is being set up as they wait.

4. Meeting App Bar for Mobile

• lib/widgets/common/app_bar/meeting_appbar.dart : This file defines the MeetingAppBar widget, which shows details like the meeting ID, recording status, and the session's elapsed time.

5. Meeting Bottom Bar for Mobile

• lib/widgets/common/meeting_controls/meeting_action_bar.dart : This file defines the MeetingActionBar widget, which provides essential meeting controls at the bottom of the screen. Its main components include meeting controls like ending/ leaving a call, toggling the microphone and camera, and accessing chat. It also provides options for recording, screen sharing, and viewing the participant list.

6. Meeting App Bar for Web

• lib/widgets/common/app_bar/web_meeting_appbar.dart : This file defines the WebMeetingAppBar widget, serving as the top control bar for a web meeting interface. It features a meeting ID display with a copy button, recording indicator, microphone and camera controls with device options, screen sharing control, chat and participant list buttons, and an option to leave or end the meeting for all participants.

7. Chat

• lib/widgets/common/chat.dart : This file defines the ChatView widget. It displays incoming messages and enables users to send new messages.

8. Participant List

• lib/widgets/common/participant/participant_list_item.dart and lib/widgets/common/participant/participant_list.dart : Displays the list of participants present in the meeting.

9. Participant View

OneToOne Call

• lib/screens/one-to-one/one_to_one_meeting_screen.dart : It contains the complete layout for one to one meeting.

• lib/widgets/one-to-one/one_to_one_meeting_container.dart : The OneToOneMeetingContainer widget manages the display of local and remote participant streams in a one-on-one meeting, dynamically adjusting for video, audio, and screen share streams with responsive layout support.

• lib/widgets/one-to-one/participant_view.dart : It is used to display the individual stream of the participant.

Conference Call

• lib/widgets/conference-call/conference_participant_grid.dart : The ConferenceParticipantGrid widget organizes and displays participants in a grid layout.

• lib/widgets/conference-call/participant_grid_tile.dart : The ParticipantGridTile widget displays single participant which is displayed in the grid.

• lib/widgets/conference-call/manage_grid.dart : The ManageGrid class organize participants into grid layouts for different device types (mobile, tablet, desktop) during a conference, adjusting the number of rows and columns based on the participant count and presentation mode.

• lib/widgets/conference-call/conference_screenshare_view.dart : The ConferenseScreenShareView widget handles the display of a screen share stream during a meeting.

📖 Examples

• Prebuilt Example
• JavaScript SDK Example
• React SDK Example
• React Native SDK Example
• Android Java SDK Example
• Android Kotlin SDK Example
• iOS SDK Example

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