100ms-android icon indicating copy to clipboard operation
100ms-android copied to clipboard

Android Video Conferencing App using 100ms SDK

Latest Version Documentation Discord Download App Activity Email

๐ŸŽ‰ 100ms SDK ๏ผ† Sample App ๐Ÿš€

Here you will find everything you need to build experiences with video using 100ms Android SDK. Dive into our SDKs, quick starts, add real-time video, voice, and screen sharing to your web and mobile applications.

โ˜๏ธ Pre-requisites

  • Android Studio 3.0 or higher
  • Support for Android API level 24 or higher
  • Support for Java 8
  • This application uses build tool version 30.0.2

๐Ÿ“ฑ Supported Devices

The Android SDK supports Android API level 21 and higher. It is built for armeabi-v7a, arm64-v8a, x86, and x86_64 architectures.

๐Ÿš‚ Setup Guide

  • Clone this repository
git clone --depth 1 https://github.com/100mslive/sample-app-android.git
  • Get your token generation endpoint by following this guide

  • Create app/gradle.properties

    cp app/example.gradle.properties app/gradle.properties
    
  • Put your endpoint URL as TOKEN_ENDPOINT in app/gradle.properties. Make sure it ends with a backslash (/) For example:

    TOKEN_ENDPOINT="https://prod-in.100ms.live/hmsapi/<your-subdomain>/" # Valid
    TOKEN_ENDPOINT="https://prod-in.100ms.live/hmsapi/<your-subdomain>" # Invalid
    
  • Create firebase project and save the google-services.json in app/google-services.json

๐ŸŽ Run the application

๐Ÿค– Run using Emulator

Follow the official guide at developers.android.com to download and deploying app in a emulator.

๐Ÿ“ฑ Run on Device (recommended)

Follow the official guide at developers.android.com to setup your mobile device for development.

On the first time of launch, user will be prompted with permissions. Then you are good to go to run the application.

๐Ÿž Layout

In the launch screen, here we have Enter Name and Join Room:

We have many examples for each mode in the sample app using RecyclerView, ViewPage2, `LiveData handling all data the right way with smooth updates.

๐Ÿ“ž Join meeting

  • Paste the exact Room ID as obtained after signing up for the [100ms Dashboard] (https://dashboard.100ms.live/register)

  • Click Join Now.

  • Video Conversation will be started ๐ŸŽ‰

Active Speaker Mode

Shows the most actively speaking Peer's in the room. Max number of peer's to be displayed can be configured be Max Rows and Max Columns setting in the Home Page.

Each Peer's VideoTile shows following updates in real-time:

  1. Blue border if speaking at that moment
  2. Audio/Video track's mute/unmute status
  3. Live Updates of Peer's joining and leaving

Related classes/files in this app:

  1. ActiveSpeakerFragment
  2. ActiveSpeakerLRU
  3. fragment_active_speaker.xml
  4. video_card.xml

๐ŸŽต Audio Only Mode

Groups all Peer's by their Peer::role and shows them using a nested RecyclerView:

Each Peer's AudioTile shows following updates in real-time:

  1. Blue border if speaking at that moment
  2. Audio/Video track's mute/unmute status
  3. Live Updates of Peer's joining and leaving

Related classes/files in this app:

  1. AudioCollection
  2. AudioCollectionAdapter
  3. AudioCollectionDiffUtil
  4. AudioItem
  5. AudioItemsAdapter
  6. AudioItemsDiffUtil
  7. AudioModeFragment
  8. fragment_audio.xml
  9. list_item_audio.xml
  10. list_item_chat.xml

๐Ÿ“š Grid View

Show's all Peer's in a 2x2 (default) Grid paginated using a ViewPager.

Each Peer's VideoTile shows following updates in real-time:

  1. Blue border if speaking at that moment
  2. Audio/Video track's mute/unmute status
  3. Live Updates of Peer's joining and leaving
  4. Subscribes/Unsubscribe videos which are not visible in the viewport
  5. Handles updating the peer tracks status and peer-list smoothly without causing any re-renders

Related classes/files in this app:

  1. VideoGridBaseFragment
  2. VideoGridAdapter
  3. VideoGridFragment
  4. VideoGridPageFragment
  5. VideoGridPageItem
  6. VideoGridPageDiffUtil
  7. VideoGridPageViewModel
  8. fragment_video_grid_page.xml
  9. fragment_grid_video.xml
  10. grid_item_video.xml

๐Ÿ™‹๐Ÿ™‹โ€โ™€๏ธ Hero View (experimental support ๐Ÿงช)

Allows pinning any Peer video tile by clicking on respective Peer's VideoTile from the bottom tray. The bottom tray is implemented using a RecyclerView

Related classes/files in this app:

  1. PinnedVideoFragment
  2. VideoListAdapter
  3. VideoListItem
  4. VideoListItemDiffUtil
  5. fragment_pinned_video.xml
  6. fragment_pinned_video.xml
  7. list_item_video.xml

โœ‹ Participant List View

Shows a list of all Peer's in the room.

  1. Entire list can be filter by name of the Peer
  2. Updates the list in real-time as Peer's joins/leaves
  3. Show real-time status of Peer tracks and screen-share

Related classes/files in this app:

  1. ParticipantsAdapter
  2. ParticipantsFragment
  3. fragment_participants.xml
  4. list_item_peer_list.xml

๐Ÿ“‘ 100ms SDK Documentation

Refer the Getting Started - Android guide to get detailed SDK information