GitHub - videosdk-live/videosdk-hls-android-kotlin-example: A ready-to-use Android(Kotlin) 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 Android app here: https://appdistribution.firebase.dev/i/a8156572b0936799

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

Development environment requirements:
- Java Development Kit
- Android Studio 3.0 or later
A physical or virtual mobile device running Android 5.0 or later
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-android-kotlin-example.git

2. Modify local.properties

Generate temporary token from Video SDK Account.

auth_token = "TEMPORARY-TOKEN";

3. Run the sample app

Run the android app with Shift+F10 or the ▶ Run from toolbar.

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.
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-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.BLUETOOTH" />
    <uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />
    <uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />

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.

Initialize a Meeting

For meeting initialization, you have to first initialize the VideoSDK. You can initialize the VideoSDK using initialize() method.

  VideoSDK.initialize(context: Context)

After successfully initialization, you can configure VideoSDK by passing token in config method

  VideoSDK.config(token: String?)

After VideoSDK initialization and configuration, you can initialize the meeting using initMeeting() method. initMeeting() will generate a new Meeting class and the initiated meeting will be returned.

 val meeting: Meeting? = VideoSDK.initMeeting(
                            context: Context?,
                            meetingId: String?,
                            name: String?,
                            micEnabled: Boolean,
                            webcamEnabled: Boolean,
                            participantId: String?,
                            mode: String?,
                            customTracks: Map<String?, CustomStreamTrack?>?
                        )

Join Meeting

meeting!!.join()

Leave or End Meeting

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

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

Change Mode

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

meeting!!.changeMode(mode: String?)

Setup MeetingEventListener

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

  val meetingEventListener: MeetingEventListener = object : MeetingEventListener() {

        override fun onMeetingJoined() {
           // This event will be emitted when a localParticipant(you) successfully joined the meeting.
        }

        override fun onMeetingLeft() {
           // This event will be emitted when a localParticipant(you) left the meeting.
        }

        override fun onParticipantJoined(participant: Participant) {
           // This event will be emitted when a new participant joined the meeting.
           // [participant]: new participant who joined the meeting
        }

        override fun onParticipantLeft(participant: Participant) {
           // This event will be emitted when a joined participant left the meeting.
           // [participant]: participant who left the meeting
        }

        override fun onHlsStateChanged(HlsState: JSONObject) {
           // This event will be emitted whenever meeting HLS state changes.
           // [HlsState] : state of HLS
        }

        override fun onParticipantModeChanged(data: JSONObject) {
           // This event will be emitted when any partcipant's mode changed.
           // [data] : { mode: String, participantId: String }
        }

        override fun onPresenterChanged(participantId: String?) {
           // This event will be emitted when any participant starts or stops screen sharing.
           // [participantId]: Id of participant who shares the screen.
        }

        override fun onSpeakerChanged(participantId: String?) {
           // This event will be emitted when a active speaker changed.
           // [participantId] : Id of active speaker
        }

        override fun onRecordingStateChanged(recordingState: JSONObject) {
           // This event will be emitted whenever meeting recording state changes.
           // [recordingState] : state of meeting recording
        }
    };

Event associated with HLS

onHlsStateChanged - Whenever meeting HLS state changes, then onHlsStateChanged event will trigger.
You can get the playbackHlsUrl and livestreamUrl of the HLS to play it on the Viewer side when the state changes to HLS_PLAYABLE.

private val meetingEventListener: MeetingEventListener = object : MeetingEventListener() {

  override fun onHlsStateChanged(HlsState: JSONObject) {
    when (HlsState.getString("status")) {
        "HLS_STARTING" -> Log.d("onHlsStateChanged", "Meeting hls is starting")
        "HLS_STARTED" -> Log.d("onHlsStateChanged", "Meeting hls is started")
        "HLS_PLAYABLE" -> {
            Log.d("onHlsStateChanged", "Meeting hls is playable now")
            // on hls playable you will receive playbackHlsUrl
            val playbackHlsUrl = HlsState.getString("playbackHlsUrl")
        }
        "HLS_STOPPING" -> Log.d("onHlsStateChanged", "Meeting hls is stopping")
        "HLS_STOPPED" -> Log.d("onHlsStateChanged", "Meeting hls is stopped")
    }
  }

}

Methods and Listeners for Conference(Speaker) mode

Mute/Unmute Local Audio

// unmute mic
meeting!!.unmuteMic()

// mute mic
meeting!!.muteMic()

Change Audio Device

The meeting.mics function allows a participant to list all of the attached microphones (e.g., Bluetooth and Earphone).

 // get connected mics
 val mics= meeting!!.mics

Local participant can change the audio device using changeMic(device: AudioDevice?) method of meeting class.

// change mic
meeting!!.changeMic(device: AudioDevice?)

Please consult our documentation Change Audio Device for more infromation.

Enable/Disable Local Webcam

// enable webcam
meeting!!.enableWebcam()

// disable webcam
meeting!!.disableWebcam()

Switch Local Webcam

// switch webcam
meeting!!.changeWebcam()

Start/Stop HLS

// start HLS
meeting!!.startHls(config: JSONObject?);

// stop HLS
meeting!!.stopHls();

Pin/Unpin Participant

// pin local participant
meeting!!.getLocalParticipant().pin(type: String?);

// unpin local participant
meeting!!.getLocalParticipant().unpin(type: String?);

Setup ParticipantEventListener

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

 val participantEventListener: ParticipantEventListener = object : ParticipantEventListener() {
       override fun onStreamEnabled(stream: Stream) {
          // This event will be triggered whenever a participant's video, audio or screen share stream is enabled.
       }

       override fun onStreamDisabled(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, read the complete documentation of Android VideoSDK

HLS Player

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

Project Structure

We have 3 packages :

common - common package includes all classes/files that are used in both mode.
speakerMode - speakerMode package includes all classes/files related to CONFERENCE mode(speaker).
viewerMode - viewerMode package inclues all the classes/files related to VIEWER mode.

common package

common
└── meeting
└── reactions

1. Create or Join Meeting

common
└── meeting
    └── activity
      └── CreateOrJoinActivity.kt
      └── MainActivity.kt
    └── fragment
      └── CreateOrJoinFragment.kt
      └── CreateMeetingFragment.kt
      └── JoinMeetingFragment.kt

CreateOrJoinActivity.kt and activity_create_or_join.xml
- This activity is used to ask permissions to the partcipant,and to initiate webcam and mic status.
- CreateOrJoinFragment,CreateMeetingFragment,JoinMeetingFragment will be bound to this activity.
CreateOrJoinFragment.kt and fragment_create_or_join.xml - This fragment will include
- Create meeting Button - This button will call api for create a new meeting and navigate to CreateMeetingFragment.
- Join as speaker Button - This button will navigate to JoinMeetingFragment.
- Join as viewer Button - This button will navigate to JoinMeetingFragment.
CreateMeetingFragment.kt and fragment_create_meeting.xml - This fragement will include
- TextView for MeetingId - This textView will contain meeting Id.
- EditText for ParticipantName - This edit text will contain name of the participant.
- Create Meeting Button - This button will navigate to MainActivity.
JoinMeetingFragment.kt and fragment_join_meeting.xml - This fragement will include
- EditText for MeetingId - This edit text will contain the meeting Id that you want to join.
- EditText for ParticipantName - This edit text will contain name of the participant.
- Join Meeting Button - This button will call api for join meeting with meetingId that you provided and navigate to MainActivity.
MainActivity.kt - This activity is used to initialize the meeting and navigate to MainFragemnt or ViewerFragment according to user choice.

2. Live Reactions

common
└── reactions
    └── DirectionGenerator.kt
    └── OverTheTopLayer.kt
    └── ZeroGravityAnimation.kt

DirectionGenerator.kt class,OverTheTopLayer.kt class and ZeroGravityAnimation.kt files used to show Live Reactions.

Viewer Host

speakerMode package

speakerMode
   └── manageTabs
     └── SpeakerFragment.kt
     └── TabAdapter.kt
   └── stage
     └── StageFragment.kt
   └── participantList
     └── ParticipantListAdapter.kt
     └── ParticipantListFragment.kt

1. Manage Tabs

SpeakerFragment.kt & TabAdapter.kt files used to manage tabs.

2. Stage

StageFragment.kt fragment is stage for speaker where he/she controlls meeting.

Audio & Video Settings
- settings_layout.xml file used to show Audio & Video Settings.

3. Participants

ParticipantListAdapter.kt,ParticipantListFragment.kt,fragment_participant.xml and item_participant_list_layout.xml files used to show Participants.
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

viewerMode package

viewerMode
└── ViewerFragment.kt
└── TrackSelectionDialog.kt
└── productsAdapter.kt

1. ViewerFragment

ViewerFragment.kt fragment is main fragment for viewer mode.

2. TrackSelectionDialog

TrackSelectionDialog.kt,track_selection_dialog.xml files used to set quality of media (video).

3. AddToCart

ProductsAdapter.kt,products_layout.xml,item_products.xml file used to show list of products.
Its is optional to show,useful for E-commerce app.

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 13 Commits
.github		.github
.idea		.idea
app		app
assets		assets
gradle/wrapper		gradle/wrapper
.gitignore		.gitignore
README.md		README.md
build.gradle		build.gradle
gradle.properties		gradle.properties
gradlew		gradlew
gradlew.bat		gradlew.bat
settings.gradle		settings.gradle

videosdk-live/videosdk-hls-android-kotlin-example

Folders and files

Latest commit

History

Repository files navigation