Stream chat android app

Приложения для Стрима на Андроид

Представленные в подборке Android приложения предназначены для трансляции экранного видео в режиме реального времени. С их помощью пользователи могут стримить игры, а также демонстрировать фотографии, видеоклипы и презентации. Есть возможность общаться со зрителями в текстовом чате.

Самым универсальным приложением для стриминга можно назвать Screen Stream Mirroring. Утилита позволяет передавать экранное видео на компьютеры, ноутбуки, смарт телевизоры и другие устройства, подключенные к локальной сети. Также поддерживается интеграция с большинством платформ, например, Twitch, YouTube и Facebook Gaming. Есть возможность стримить видеоигры в режиме реального времени. Кроме того, пользователи могут рисовать на экране и добавлять оверлеи.

Приложение StreamCraft позволяет вести собственные трансляции и смотреть стримы других пользователей. На платформе представлены преимущественно видеоигры, такие как Dota 2, Minecraft, WOT и другие. Можно подписываться на каналы и получать уведомления о начале трансляций. Утилита позволяет общаться с автором стрима и зрителями.

Для проведения киберспортивных трансляций также используется приложение Omlet Arcade. Есть возможность собрать собственную команду и принять участие в турнире. Доступна функция записи лучших игровых моментов. Имеется сообщество, в котором можно обсуждать мобильные игры.

Среди специализированных стриминговых платформ можно выделить Twitch. Сервис позволяет смотреть не только игровые, но и трансляции на тему кулинарии, музыки, искусства, спорта и так далее. Для общения со зрителями и подписчиками имеется встроенный текстовый чат. С помощью Android приложения можно зарегистрироваться и создать свой канал для проведения стримов мобильных игр.

Источник

Build a Livestream Video & Chat App for Android

Table of Contents

Creating the UI

Adding Chat with Stream

Cleaning up the UI

Android Chat SDK

• over 1 year ago

As we seek to still connect with friends and family while we all #stayhome, Live Streaming and Video Conferencing have become insanely popular. These technologies have always been great tools for connecting with coworkers and loved ones who are not located nearby; however, we are now seeing incredible growth in their use for connecting with people near and far. Artists are live-streaming their performances; teachers are educating children via online classes; friends and family are meeting online using group video chat, etc.

With this being the case, the apps that support these connections have also been taking off, and we thought it might be fun to show you just how easy it would be to build a live streaming application powered by video and chat! In this tutorial, we’ll walk through how to build a live-video-streaming application on Android. What’s more, the app we build here won’t just be an ugly, bare-bones application; thanks to Stream’s Chat API, which will allow for seamless communication between users within the live video chat, we’ll have a friendly and appealing UI!

Note: If you’d like to jump right into the code, you can find the complete open-source codebase on GitHub.

At the end of the tutorial, you will have created the following application from scratch:

To incorporate chat into our application, this tutorial will leverage Stream’s Low-Level Android Client; if you’d like to read more about using it, check out Stream’s Android Chat Docs and our Android SDK!

Getting Started

Let’s start by cloning the step-1 branch of the app repo from GitHub, which will serve as our initial codebase for this tutorial. Head over to your preferred working directory on your machine and clone the project using the following snippet:

The step-1 branch contains the necessary project code with a basic UI that consists of the following:

• A simple YouTube-style video streaming view
• A customized input box with a send button, for adding comments
• All of the required Gradle dependencies, including Stream’s Low-Level Android client – one of the core dependencies of this tutorial

To start, you will need to generate a file called secret.properties within the root directory of your project. Populate your new file with the following code:

Replace the and defaults with the values from your own Stream Dashboard. The StreamApiKey is a public key which you can get by registering your chat app at https://getstream.io/dashboard/. The UserToken is the JWT token of your app user. To ease the process of generating a JWT on the fly, we’ve created a simple generator within our docs, which can be found here.

Once you have finished adding the necessary secrets, just run the ./gradlew build command. At this point, you should have the project building successfully!

After running the app, you should see the following screen with the video playing automatically and comment input controls present at the bottom:

Creating the UI

Let’s add the UI code responsible for displaying the chat messages over the video!

We will start by modifying the activity_main.xml to add a RecyclerView widget, which will display chat messages as a vertical list. The RecyclerView will be placed at the bottom of the screen, leaving the space at the top for the video, to give it more real estate and make it the focal point. Behind the list view, we are also going to add a gradient to improve the readability of the latest incoming messages, which happens to be useful when bright video frames are displayed on the device, as well.

Let’s start by adding the following views to the activity_main.xml file:

Next, we will need to implement the adapter class to be responsible for rendering the chat messages in the RecyclerView widget. To do this, we will add a “ MessagesListAdapter.kt ” file with the following code:

As you can see, we are using the ListAdapter class from the androidx.recyclerview package – this is a wrapper over the standard RecyclerView.Adapter class and is a great way to optimize the way items render when you update the list.

To read more about the ListAdapter class, head over to the Android docs.

We also declared the layout for the single chat message element as R.layout.item_message . Let’s define that layout now! Create a new layout file called “ item_message.xml ” in in the app/res/layout directory and add the following code:

At the end of this step, we are going to instantiate the adapter and set it to the RecyclerView in the LiveStreamActivity.onCreate() hook method. We are also going to add the updateMessagesList(messages: List ) function, which will be responsible for updating the message items in the list:

The Message type in the updateMessagesList() function belongs to the io.getstream.chat.android.client.models package from the Stream Low-Level client library.

In the next part of this tutorial, we are going to implement simple message sending logic and handle incoming message events!

Adding Chat with Stream

Now that you have completed the previous steps, your code should be the same as the step-2 branch of the app repo.

You can check out the step-2 branch if you’d like to start from this part and skip the previous portion of the tutorial.

Let’s start by initiating the ChatClient instance. Let’s add the following line inside the onCreate() function of our App class:

Next, let’s jump into the LiveStreamViewModel.kt file. This is the place where the actual connection with the chat backend will be managed. Let’s start by defining the User and Channel metadata in the companion object at the bottom of the class:

Then, obtain the ChatClient instance and assign it into a class property called chatClient . Now, let’s use the ChatClient instance to initiate the Channel . We will do so by calling the setUser() function within the init <> block:

If the chatClient.setUser() operation is successful, we are going to receive the ConnectionData object in the onSuccess() callback.

At this point, we set the channel by calling the chatClient.channel() function. This function takes two parameters: the CHANNEL_TYPE and CHANNEL_ID . For the purposes of our sample application, we are setting CHANNEL_TYPE to “livestream” and CHANNEL_ID to a hardcoded value.

In your production application, you will want to pass a unique ID specific to the video stream you wish to present.

This function returns the ChannelController instance, which we assign to the private lateinit var channelController: ChannelController class property.

We will also use this instance later, to perform requests to the chat backend.

When we receive the onSuccess callback, we are calling two functions: requestChannel() and subscribeToNewMessageEvent() :

Inside requestChannel() , we are creating an instance of QueryChannelRequest() and calling channelController.query(request) followed by an enqueue() call, which executes our function. The request contains channel data that specifies the name of the channel, the number of latest messages we want to obtain, and the watch flag. The withWatch() method informs our app that we want to receive channel events (e.g. new message events).

subscribeToNewMessageEvent() calls chatClient.events().subscribe() , in order to subscribe to the stream of chat events. It uses only the events of the NewMessageEvent type and updates the LiveData channel with newly received Message objects. In addition, once the QueryChannelRequest is successful, we obtain the list of messages and pass it to the LiveData .

Now, our Activity will subscribe to this channel and update the screen to show the received messages on the screen! Inside the LiveStreamActivity onCreate() hook, we obtain an instance of LiveStreamViewModel and subscribe to the LiveStreamViewModel.viewState ’s LiveData . In doing so, the Activity will receive State updates informing it about new messages and errors:

We call the updateMessageList() function whenever we receive State.Messages or State.NewMessage updates. Note that, in the case of receiving a State.NewMessage , we are adding the new message to the existing list that we get from the messagesList adapter.

At this point, when running the application, we should be able to post new messages to the chat, and new messages should be displayed in the chat view. In the next step, we are going to add a little animation to make the chat list updates more smooth!

Cleaning up the UI

At this point, your code should correspond to the step-3 branch of the app repo; you can checkout this branch if you’d like to start from this section of the tutorial.

Let’s declare an instance of LinearSmoothScroller as a class property in the LiveStreamActivity class:

We are now going to modify the updateMessagesList() so that we can use it to animate the list to scroll to the latest message after notifying the adapter about new data:

That’s it! We have just implemented the chat feature! Your app should now look like this:

Hint: Click the play button to view on YouTube!

Wrapping Up

I hope getting through this tutorial gave you a sense of how fast it can be to add a live chat feature into a video streaming app on Android. Thanks to Stream and the Low-Level Android Chat Client, we were able to avoid dealing with any complex chat backend or with WebSockets, entirely!

Note: For the production live streaming application, you’ll need to tune up this demo app a bit. Ideally, you will want to create a separate chat channel for each group, and allow multiple users to join the conversation.

Here are a few more links to resources which will help you get up and running quickly:

Please feel free to reach out in the comments below should you have any questions.

Источник

Add Livestream Chat to your Android App

Table of Contents

Initialize the Stream SDK

Create a New Channel

Subscribe to New Messages

Send a New Message

7 UX Best Practices for Livestream Chat

How to Build a Messaging App

Livestream Chat Demo

• over 1 year ago

Live streaming apps have become the most popular type of application in the App Stores. Big companies, like Google, Amazon, Facebook, and Twitter, have, at least, one app offering this kind of service. For example: YouTube, Twitch, Instagram, and Periscope. All of those have a common companion feature: Livestream Chat.

Livestream Chat is a crucial feature to improve the user’s engagement on your app. It allows your users to interact with others in real-time. In this article, I am going to show you how easy it could be to have Livestream Chat in your Android app in less than 20 minutes.

The result will look similar to this:

Sample Overview

The sample project will consist of two screens. The first of them shows a list of items. Each one represents a video. When the user clicks on one of them, they will navigate to another screen where the video starts to play. Below the video, there is a chat where all messages are, and there is a textbox that allows you to write a new one and send it. The app can be opened in multiple devices at the same time, and messages are sent/received in real-time in all devices

Because this is a sample project, you will find some datastores on the Models file. There is a list of videos that simulates the result of an API call. To also simplify the sample, the user on the app is selected randomly. In a real app, there will be a login process, receiving a proper JWT token to use with the Stream Services.

To keep the sample as simple as possible, we have not added any extra layer to the project nor created any complex architecture. Still, you can (and should) use the architecture you are most familiar with.

You can find the complete code sample can in the following GitHub repository:
https://github.com/GetStream/livestream-chat-android-example

Initialize the Stream SDK

Stream provides three complementary SDKs that you can use on your app:

• Stream Chat Client -> The low-level client used to communicate with Stream Services
• Stream Chat Livedata & Offline -> A wrapper over the Stream Chat Client that provides you some features like Offline Support and subscribe to the events using Jetpack LiveData
• Stream Chat UI Components -> A collection of UI Components ready to use Out of the box to build your chat feature.

In this example, we are going to use the low-level client.
The first step we need to take is to initialize the chat SDK with the API Key. To do that, we will use the ChatClient.Builder class, and we are going to enable logs on it to be able to see what is happening during the debugging process.

Once we have started the ChatClient , we need to specify which user will use it. To set the current user, the ChatClient has a method setUser() that can we can configure with different attributes. It will need a User object that represents the user that will be chatting and store some information such as id, name, profile picture, and the token that identifies this user. If the JWT token used by our server has an expiration time, we can configure it with a function that will refresh the token every time it expires. The last attribute we will need to pass to this method is a callback that will be called when the process finishes with a success or failure message.

That’s it! We have our chat client configured and ready to start using it.

Create a New Channel

Once we have the ChatClient initialized, we need to obtain the channel where messages are sent. Stream provides some pre-configured types of channels with custom rules and allows you to create your own types. The most common types needed are already configured, and you can check them here. In our example we are going to use the Channel Type «Livestream». To interact with a channel, we will need to create a ChannelController that will help us query the Stream Services.
To create the ChannelController we need to indicate the ChannelType and the id that will identify it.

Now that we have our ChannelController ready, we can use it to obtain the message history. To do it we use the method query() with a QueryChannelRequest . We can configure QueryChannelRequest to request different information to the Stream server. In the following example, we are giving a name to the channel and asking for the last 100 messages sent.

Subscribe to New Messages

We have the channel and the last 100 messages sent to it. Now we want to receive any new messages. To do that, we can subscribe to new events happening on the channel. The different types of events that can occur on a channel are detailed here, but we only need to get the ones that represent a new message. To do that, we need to add a filter to our subscription. The following code shows you how to do it:

Now, every new message sent to the channel will be received on the lambda we pass to the subscribe() method, and we are ready to render the new message.
When the user goes out of the stream, we don’t want to receive messages anymore, so we will need to unsubscribe and stop watching the channel.

Send a New Message

For the last step, we are going to cover sending messages to the channel. To post a new one, we need to use the previous ChannelController we have created and call the method sendMessage() that receives the message as a parameter.

Final Thoughts

And that is all the logic you need to implement a Livestream chat. In the repository example, you can see how I designed the views for it, they are remarkably simple, and you can customize them to fit your app. (Also, check out our UX best practices for livestream chat.)

I hope you now understand how easy it is to integrate Stream in your app to build a simple live streaming chat. In the sample, we only cover basic integration. Still, Stream provides you a lot of features like: Roles, delete/update messages, reactions, push notifications, and all of them are available in multiple platforms: Android, iOS, React, and Flutter.
You can check the documentation and there are additional messaging tutorials on our blog that you might find helpful.

Источник