GitHub - videosdk-live/videosdk-hls-flutter-sdk-example: A ready-to-use Flutter UI kit Example for interactive live streaming that enable real-time communication between broadcasters and their audience, allowing for features like chat, screen share, or other forms of engagement

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/RiYh4KQQ

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

Interactive Livestream (HLS)

Interactive live stream (HLS) is a media streaming protocol for delivering visual and audio media to viewers over the internet.
Interactive live stream (HLS) allows you to distribute content and ensure excellent viewing experiences across devices, playback platforms, and network conditions. It is the ideal protocol for streaming video to large audiences scattered across geographies.

VideoSDK also allows you to configure the interactive livestream layouts in numerous ways like by simply setting different prebuilt layouts in the configuration or by providing your own custom template to do the livestream according to your layout choice.

Note :

With VideoSDK, you can also use your own custom designed layout template to livestream the meetings. In order to use the custom template, you need to create a template for which you can follow these guide. Once you have setup the template, you can use the REST API to start the livestream with the templateURL parameter.

Setup Guide

Sign up on VideoSDK and visit API Keys section to get your API key and Secret key.
Get familiarized with API key and Secret key.
Get familiarized with Token.

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 Project

1. Clone the sample project

Clone the repository to your local environment.

git clone https://github.com/videosdk-live/videosdk-hls-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

Room - A Room/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.
Mode - There are 2 types of modes:
1. CONFERENCE: Both audio and video streams will be produced and consumed in this mode.
2. VIEWER: Audio and video streams will not be produced or consumed in this mode.

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

API: Create and Validate meeting

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

Create a Room

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: 1,
        notification: const NotificationInfo(
          title: "Video SDK",
          message: "Video SDK is sharing screen in the meeting",
          icon: "notification_share", // drawable icon name
        ),
      );

Join Meeting

room.join();

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();

Change Mode

If you want to change the mode of a participant, use the meeting's changeMode() method.

room.changeMode(Mode mode)

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.hlsStateChanged, (Map<String, dynamic> data) {
      // This event will be emitted whenever meeting HLS state changes.
      // [data] : { state: String, playbackHlsUrl: String, livestreamUrl:String }

    });

    room.on(Events.participantModeChanged, (Map<String, dynamic> data) {
      // This event will be emitted when any partcipant's mode changed.
      // [data] : { mode: String, participantId: String }
    });

    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
    });

Methods and Listeners for Conference(Speaker) mode

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);

Please consult our documentation Change Audio Device for more infromation.

Enable/Disable Local Webcam

// enable webcam
room.enableCam();

// disable webcam
room.disableCam();

Switch Local Webcam

// switch webcam
room.changeCam(deviceId);

Start/Stop HLS

// start HLS
room.startHls(Map < String, dyanmic > config);

// stop HLS
room.stopHls();

Pin/Unpin Participant

// pin local participant
room.localParticipant.pin();

// unpin local participant
room.localParticipant.unpin();

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

HLS Player

Here, we're using flutter_vlc_player to show the viewer interactive live streaming. Click here to know more about flutter_vlc_player.

Project Structure

We have 3 packages :

screens - screens package includes all screens that are used in app.
widget/common - common package includes all widgets that are used in both mode.
widget/speaker - speakerMode package includes all widgets related to CONFERENCE mode(speaker).
widget/viewer - viewerMode package inclues all the widgets related to VIEWER mode.

screens package

screens
└── home_screen.dart
└── ils_screen.dart
└── speaker_join_screen.dart
└── viewer_join_screen.dart
└── splash_screen.dart

Create or Join Meeting

home_screen.dart will navigate the user to the joining screen based on the selected mode i.e speaker_join_screen for Speaker and viewer_join_screen for Viewer.
ils_screen.dart will determine what view to show based on the room state and participants mode.

Speaker Viewer

speaker package

speaker
└── participant_list
      └── participant_list.dart
      └── participant_list_item.dart
└── stats
      └── call_state_bottom_sheet.dart
      └── call_stats.dart
└── grid
      └── participant_grid_tile.dart
      └── participant_grid.dart
└── screenshare_view.dart
└── speaker_action_bar.dart
└── speaker_appbar.dart
└── speaker_view.dart

1. Speaker View

speaker_view.dart is responsible to show all the speaker controls like camera, mic, screenshare controls along with options to go live and add viewer as co-host.

2. Participants

participant_list.dart and participant_list_item.dart are responsible to show the participants list, from where a speaker can invite the viewer to the co-host.
Add as a co-Host
- Here, we are using pubSub to request a viewer to be co-host. Click here to know more about pubSub.
Host Viewer

viewer package

viewer
└── livestream_player.dart
└── viewer_appbar.dart
└── viewer_view.dart
└── waiting_for_hls.dart

Viewer View

viewer_view.dart is responsible to show the view the livestream and also them to interact with chat.
livestream_player.dart is responsible to to play the HLS video for which we are using the flutter_vlc_player library.

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.

Name		Name	Last commit message	Last commit date
Latest commit History 48 Commits
.github		.github
.vscode		.vscode
android		android
assets		assets
gifs		gifs
ios		ios
lib		lib
linux		linux
macos		macos
web		web
windows		windows
.env.example		.env.example
.gitignore		.gitignore
.metadata		.metadata
README.md		README.md
analysis_options.yaml		analysis_options.yaml
pubspec.yaml		pubspec.yaml

videosdk-live/videosdk-hls-flutter-sdk-example

Folders and files

Latest commit

History

Repository files navigation