Skip to content

A ready-to-use Android(Java) 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

Notifications You must be signed in to change notification settings

videosdk-live/videosdk-hls-android-java-example

Repository files navigation


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


Prerequisites


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

  1. For meeting initialization, you have to first initialize the VideoSDK. You can initialize the VideoSDK using initialize() method.
  VideoSDK.initialize(Context context)
  1. After successfully initialization, you can configure VideoSDK by passing token in config method
  VideoSDK.config(String token)
  1. 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.
  Meeting meeting = VideoSDK.initMeeting(
                       Context context,
                       String meetingId,
                       String name,
                       boolean micEnabled,
                       boolean webcamEnabled,
                       String participantId,
                       String mode,
                       Map<String, CustomStreamTrack> customTracks)
meeting.join();
// 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();
  • If you want to change the mode of a participant, use the meeting's changeMode() method.
meeting.changeMode(String mode)

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

  MeetingEventListener meetingEventListener = new MeetingEventListener() {
        @Override
        public void onMeetingJoined() {
           // This event will be emitted when a localParticipant(you) successfully joined the meeting.
        }

        @Override
        public void onMeetingLeft() {
           // This event will be emitted when a localParticipant(you) left the meeting.
        }

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

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

        @Override
        public void onHlsStateChanged(JSONObject HlsState) {
           // This event will be emitted whenever meeting HLS state changes.
           // [HlsState] : state of HLS
        }

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

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

        @Override
        public void onSpeakerChanged(String participantId) {
           // This event will be emitted when a active speaker changed.
           // [participantId] : Id of active speaker
        }

        @Override
        public void onRecordingStateChanged(String recordingState) {
           // 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 final MeetingEventListener meetingEventListener = new MeetingEventListener() {

  @Override
  public void onHlsStateChanged(JSONObject HlsState) {
      switch (HlsState.getString("status")) {
          case "HLS_STARTING":
              Log.d("onHlsStateChanged", "Meeting hls is starting");
              break;
          case "HLS_STARTED":
              Log.d("onHlsStateChanged", "Meeting hls is started");
              break;
          case "HLS_PLAYABLE":
              Log.d("onHlsStateChanged", "Meeting hls is playable now");
              // on hls playable you will receive playbackHlsUrl
              String playbackHlsUrl = HlsState.getString("playbackHlsUrl");
              break;
          case "HLS_STOPPING":
              Log.d("onHlsStateChanged", "Meeting hls is stopping");
              break;
          case "HLS_STOPPED":
              Log.d("onHlsStateChanged", "Meeting hls is stopped");
              break;
      }
  }

}

Methods and Listeners for Conference(Speaker) mode

// unmute mic
meeting.unmuteMic();

// mute mic
meeting.muteMic();
  • The meeting.getMics() function allows a participant to list all of the attached microphones (e.g., Bluetooth and Earphone).
 // get connected mics
 Set<AppRTCAudioManager.AudioDevice> mics = meeting.getMics();
  • Local participant can change the audio device using changeMic(AppRTCAudioManager.AudioDevice device) method of meeting class.
// change mic
 meeting.changeMic(AppRTCAudioManager.AudioDevice device);

Please consult our documentation Change Audio Device for more infromation.

// enable webcam
meeting.enableWebcam();

// disable webcam
meeting.disableWebcam();
// switch webcam
meeting.changeWebcam();
// start HLS
meeting.startHls(JSONObject config);

// stop HLS
meeting.stopHls();
// pin local participant
meeting.getLocalParticipant().pin(String type);

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

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

  ParticipantEventListener participantEventListener = new ParticipantEventListener() {
       @Override
       public void onStreamEnabled(Stream stream) {
          // This event will be triggered whenever a participant's video, audio or screen share stream is enabled.
       }

       @Override
       public void 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 :

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

common
└── meeting
└── reactions

1. Create or Join Meeting

common
└── meeting
    └── activity
      └── CreateOrJoinActivity.java
      └── MainActivity.java
    └── fragment
      └── CreateOrJoinFragment.java
      └── CreateMeetingFragment.java
      └── JoinMeetingFragment.java
  • CreateOrJoinActivity.java 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.java 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.java 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.java 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.java - This activity is used to initialize the meeting and navigate to MainFragemnt or ViewerFragment according to user choice.

2. Live Reactions

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

Viewer                     Host

        


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

1. Manage Tabs

2. Stage

3. Participants


viewerMode
└── ViewerFragment.java
└── TrackSelectionDialog.java
└── productsAdapter.java

1. ViewerFragment

2. TrackSelectionDialog

3. AddToCart


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.

About

A ready-to-use Android(Java) 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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Languages