Coder Social home page Coder Social logo

100ms-android's Introduction

Documentation Slack 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 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 from the create-room API

  • 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

100ms-android's People

Contributors

adityaa30 avatar pratimmallick avatar akashgoswami1 avatar pratikshadake avatar chinmayrelkar avatar deep-codes avatar aniketbehera avatar ygit avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.