videosdk-rtc-flutter-sdk-example icon indicating copy to clipboard operation
videosdk-rtc-flutter-sdk-example copied to clipboard

Published 20 hours ago • verified publisher icon videosdk-live
→

Metadata

WebRTC based video conferencing SDK for Flutter (Android / iOS)

Video SDK for Flutter (Android and iOS)

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

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

Features

  • [x] Real-time video and audio conferencing
  • [x] Enable/disable camera
  • [x] Mute/unmute mic
  • [x] Switch between front and back camera
  • [x] Change audio device
  • [x] Screen share
  • [x] Chat
  • [x] Recording

Setup Guide


Prerequisites

  • If your target platform is iOS, your development environment must meet the following requirements:
    • Flutter 2.0 or later
    • Dart 2.12.0 or later
    • macOS
    • Xcode (Latest version recommended)
  • If your target platform is Android, your development environment must meet the following requirements:
    • Flutter 2.0 or later
    • Dart 2.12.0 or later
    • macOS or Windows
    • Android Studio (Latest version recommended)
  • If your target platform is iOS, you need a real iOS device.
  • If your target platform is Android, you need an Android simulator or a real Android device.
  • Valid Video SDK Account

Run the Sample App

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 temporary token from Video SDK Account.

AUTH_TOKEN = "TEMPORARY-TOKEN";

4. Install the dependecies

Install all the dependecies to run the project.

flutter pub get

4. Run the sample app

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

flutter run

Key Concepts

  • Meeting - A Meeting represents Real time audio and video communication.

    Note : Don't confuse with Room and Meeting keyword, both are same thing 😃

  • Sessions - A particular duration you spend in a given meeting is a referred as session, you can have multiple session of a particular meetingId.

  • Participant - Participant represents someone who is attending the meeting's session, local partcipant represents self (You), for this self, other participants are remote participants.

  • Stream - Stream means video or audio media content that is either published by local participant or remote participants.


Android Permission

Add all the following permissions to AndroidManifest.xml file.

    <uses-feature android:name="android.hardware.camera" />
    <uses-feature android:name="android.hardware.camera.autofocus" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />

    <!-- Needed to communicate with already-paired Bluetooth devices. (Legacy up to Android 11) -->
    <uses-permission
        android:name="android.permission.BLUETOOTH"
        android:maxSdkVersion="30" />
    <uses-permission
        android:name="android.permission.BLUETOOTH_ADMIN"
        android:maxSdkVersion="30" />

    <!-- Needed to communicate with already-paired Bluetooth devices. (Android 12 upwards)-->
    <uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />

iOS Permission

Add the following entry to your Info.plist file, located at <project root>/ios/Runner/Info.plist:

<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) Camera Usage!</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) Microphone Usage!</string>

iOS Screen share Setup

Please refer to this documentation guide to setup screenshare for iOS


Token Generation

Token is used to create and validate a meeting using API and also initialise a meeting.

🛠️ Development Environment:

  • For development, you can use temporary token. Visit VideoSDK dashboard to generate temporary token.

🌐 Production Environment:

  • For production, you have to set up an authentication server to authorize users. Follow our official example repositories to setup authentication server, videosdk-rtc-api-server-examples

Note :

The expiry of development environment token lasts 7 days only.


API: Create and Validate meeting

  • create meeting - Please refer this documentation to create meeting.
  • validate meeting- Please refer this documentation to validate the meetingId.

Initialize a Meeting

  • You can initialize the meeting using createRoom() method. createRoom() will generate a new Room object and the initiated meeting will be returned.
  Room room = VideoSDK.createRoom(
        roomId: "abcd-efgh-ijkl",
        token: "YOUR TOKEN",
        displayName: "GUEST",
        micEnabled: true,
        camEnabled: true,
        maxResolution: 'hd',
        defaultCameraIndex: kIsWeb ? 0 : 1,
        notification: const NotificationInfo(
          title: "Video SDK",
          message: "Video SDK is sharing screen in the meeting",
          icon: "notification_share", // drawable icon name
        ),
      );

Mute/Unmute Local Audio

// unmute mic
room.unmuteMic();

// mute mic
room.muteMic();

Change Audio Device

  • The meeting.getAudioOutputDevices() function allows a participant to list all of the attached audio devices (e.g., Bluetooth and Earphone).
 // get connected audio devices
 List<MediaDeviceInfo> outputDevice = room.getAudioOutputDevices()
  • Local participant can change the audio device using switchAudioOutput(MediaDeviceInfo device) method of Room class.
// change mic
room.switchAudioOutput(mediaDeviceInfo);

Enable/Disable Local Webcam

// enable webcam
room.enableCam();

// disable webcam
room.disableCam();

Switch Local Webcam

// switch webcam
room.changeCam(deviceId);

Chat

  • The chat feature allows participants to send and receive messages about specific topics to which they have subscribed.
// publish
room.pubSub.publish(String topic,String message, PubSubPublishOptions pubSubPublishoptions);

// pubSubPublishoptions is an object of PubSubPublishOptions, which provides an option, such as persist, which persists message history for upcoming participants.


//subscribe
PubSubMessages pubSubMessageList = room.pubSub.subscribe(String topic, Function(PubSubMessage) messageHandler)


//unsubscribe
room.pubSub.unsubscribe(topic, Function(PubSubMessage) messageHandler);


// Message Handler
void messageHandler(msg){
  // Do something
  print("New message received: $msg");
}

Leave or End Meeting

// Only one participant will leave/exit the meeting; the rest of the participants will remain.
room.leave();

// The meeting will come to an end for each and every participant. So, use this function in accordance with your requirements.
room.end();

Listen for Room Events

By registering callback handlers, VideoSDK sends callbacks to the client app whenever there is a change or update in the meeting after a user joins.

    room.on(
      Events.roomJoined,
      () {
        // This event will be emitted when a localParticipant(you) successfully joined the meeting.
      },
    );

    room.on(Events.roomLeft, (String? errorMsg) {
      // This event will be emitted when a localParticipant(you) left the meeting.
      // [errorMsg]: It will have the message if meeting was left due to some error like Network problem
    });

    room.on(Events.recordingStarted, () {
      // This event will be emitted when recording of the meeting is started.
    });

    room.on(Events.recordingStopped, () {
      // This event will be emitted when recording of the meeting is stopped.
    });

    room.on(Events.presenterChanged, (_activePresenterId) {
      // This event will be emitted when any participant starts or stops screen sharing.
      // [participantId]: Id of participant who shares the screen.
    });

    room.on(Events.speakerChanged, (_activeSpeakerId) {
      // This event will be emitted when a active speaker changed.
      // [participantId] : Id of active speaker
    });

    room.on(Events.participantJoined, (Participant participant) {
      // This event will be emitted when a new participant joined the meeting.
      // [participant]: new participant who joined the meeting
    });

    room.on(Events.participantLeft, (participantId) => {
      // This event will be emitted when a joined participant left the meeting.
      // [participantId]: id of participant who left the meeting
    });

Listen for Participant Events

By registering callback handlers, VideoSDK sends callbacks to the client app whenever a participant's video, audio, or screen share stream is enabled or disabled.

  participant.on(Events.streamEnabled, (Stream _stream) {
    // This event will be triggered whenever a participant's video, audio or screen share stream is enabled.
  });

  participant.on(Events.stereamDisabled, (Stream _stream) {
    // This event will be triggered whenever a participant's video, audio or screen share stream is disabled.
  });

If you want to learn more about the SDK, read the Complete Documentation of Flutter VideoSDK


Project Description


Note :

  • master branch: Better UI with One-to-One call experience.
  • v1-code-sample branch: Simple UI with Group call experience.

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 maximum 6 participants on screen.


Project Structure

  • We have seprated screens and widget in following folder structure:
    • one-to-one - It includes all files related to OneToOne meeting.
    • common - It inclues all the files that are used in both meeting type (OneToOne and Group calls).
    • conference-call - It includes all files related to the conference call.

Common Content

1. Create or join Meeting

  • join_screen.dart: It shows the user with the option to create or join a meeting and to initiate webcam and mic status.

    • api.dart : It incldes all the API calls for create and validate meeting.

    • joining_details.dart: This widget allows user to enter the meetingId and name for the meeting.

    • If Join Meeting is clicked, it will show following:

      • Dropdown for Meeting Type - These dropdown is to select the meeting mode: Group Call or One To One call.
      • EditText for ParticipantName - This edit text will contain name of the participant.
      • EditText for MeetingId - This edit text will contain the meeting Id that you want to join.
      • Join Meeting Button - This button will call api for join meeting with meetingId that you entered.

    • If Create Meeting is clicked, it will show following:

      • Dropdown for Meeting Type - These dropdown is to select the meeting mode: Group Call or One To One call.
      • EditText for ParticipantName - This edit text will contain name of the participant.
      • Join Meeting Button - This button will call api for join meeting with a new meetingId

2. PartcipantList

  • participant_list.dart and participant_list_item.dart files are used to show Participant list.

3. Meeting Actions

  • Meeting actions are present in the meeting_action_bar.dart

    • MoreOptions:

    • AudioDeviceList:

    • LeaveOrEndDialog:

4. Meeting Top Bar

  • meeting_appbar.dart: It contains the meeting timer, switch camera option and recording indicatior.

5. Chat

  • chat_screen.dart: It contains the chat screen made using PubSub.

One-to-one

  • one_to_one_meeting_screen.dart: It contains the complete layout for one to one meeting.

  • one_to_one_meeting_container.dart: It contains the logic to render the participants in the miniview and large view.

  • participant_view.dart: It is used to display the individual stream of the participant.

conference-call

  • conference_participant_grid.dart: It contains the management of participant grid.

  • participant_grid_tile.dart: It contains the widget for a single participant which is displayed int he grid.

  • conference_screenshare_view.dart: It contains the widget which will dislpay the screenshare in the meeting.


Examples

Examples for Conference

Examples for Live Streaming


Documentation

Read the documentation to start using Video SDK.


Community

  • Discord - To get involved with the Video SDK community, ask questions and share tips.
  • Twitter - To receive updates, announcements, blog posts, and general Video SDK tips.

← Metadata

74
Stars
28
Forks
Watchers

Owner

verified publisher icon videosdk-live

Metadata

WebRTC based video conferencing SDK for Flutter (Android / iOS)

Back