Android

Normal

thumbnail_thibault_rond.png

thibault_rond.png

Thibault Beyou

large_api-video-blog-tutorials.png

medium_api-video-blog-tutorials.png

small_api-video-blog-tutorials.png

thumbnail_api-video-blog-tutorials.png

api-video-blog-tutorials.png

Tutorials

Dart

Flutter

A few months ago, my colleague Yohann wrote a fantastic article on [How to create a React Native live streaming application for mobile targets](https://api.video/blog/tutorials/how-to-build-a-live-streaming-app-in-3-steps/). This time, you will learn how to create the same application with a React Native competitor: Flutter.

In this article, you will develop a live streaming application in Dart. For further details, check out our official [Flutter live stream repository](https://github.com/apivideo/api.video-flutter-live-stream).

## **Few words about Flutter**

Google developed Flutter in 2015. In 2021, it was the most used cross-platform mobile framework (42% against 38% for React Native, [source](https://www.statista.com/statistics/869224/worldwide-software-developer-working-hours/)). It is used to develop cross-platform applications (including iOS and Android) quickly. The main difference between Flutter and React Native is that Flutter compiles Dart code to native bytecode/libraries, whereas React Native uses an engine to interpret JavaScript or TypeScript code. If you haven't heard of Flutter, you can learn more on the [Flutter website](https://flutter.dev/). 

## **Getting started**

First, follow the development setup steps from [Flutter's official documentation](https://docs.flutter.dev/get-started/install).

If you're new to Flutter, you may also need to [learn the basics](https://docs.flutter.dev/get-started/codelab).

*Quick reminder: iOS development is only enabled for macOS users. If you're on Windows or Linux, you can develop for Android.*

### **Create a new Flutter app**

1. Open Android Studio.
3. You should see a “New Flutter Project” button. Click on it.
5. Verify the Flutter SDK path and click on “Next.”
7. Enter your project name: “live_stream_app” (according to the [pubspec documentation](https://dart.dev/tools/pub/pubspec#name), the name must be lower_case_with_underscore.)
9. Make sure the project type is set to Application.
11. Click on “Finish.”

### **Launch the application**

Once Android Studio is launched, you can directly run your application with the control toolbar:

run your application with the control toolbar

medium_untitled-1.png

small_untitled-1.png

thumbnail_untitled-1.png

run-app-control-toolbar.png

1. Select your phone.
2. Click on the *Run* ▶️ icon.

It will take several minutes to finish, stay calm and grab a coffee ☕️

When the application build completes, it will be launched on your phone. Check your phone 🤳🏾

medium_1680077433-untitled-3-copy.png

small_1680077433-untitled-3-copy.png

thumbnail_1680077433-untitled-3-copy.png

application-build-completed.png

🎉🎉🎉Congratulations, you have created your first Flutter application 🎉🎉🎉  

&nbsp;  

#### **Signs your iOS application (optional)**

If you have trouble building the application for an iOS device, it might be because the application is not associated with a development profile.

Open Xcode, click  "Open a project or file," and open the `Runner.xcworkspace` located in `live_stream_app/ios.`

Click on Runner, go to the `Signing & Capabilities` tab, add your team, and create a unique bundle identifier.

## Add the **live streaming client to your app**

Now let's install the [Flutter live streaming client](https://api.video/catalog/flutter-live-stream/)!

### **Installation**

Open a terminal in your `live_stream_app` folder and the following command:

Also, you need to set the Android minSdkVersion to the one supported by Flutter live stream client.

Open your application build.gradle. It's located in the live_stream_app/android/app directory and replace:

The Flutter default project Kotlin version and the `apivideo_live_stream` Kotlin version might not be in sync.
In this case, when building the application, you face errors like `was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.9.0, expected version is 1.7.1.`.

To fix this, open `android/settings.gradle` and set the `org.jetbrains.kotlin.android` in the `plugins` section to the appropriate version (`1.9.0` in the previous error log).

### **Permissions**

⚠️ Both iOS and Android need permission to broadcast from your device's camera and record audio.

You will also need to ask for internet permission for Android.

#### Android

From your project folder, open the `AndroidManifest.xml` file. It’s located in the `live_stream_app/android/app/src/main` directory.
Add the following content just under the opening `<manifest>` tag to enable internet, audio recording, and the camera for your application:

#### iOS

From your project folder, open the `Info.plist` file. It's located in the `live_stream_app/ios/Runner` directory.
Add the following content just under the opening `<dict>` tag to enable the camera and microphone:

Don't forget to add the app description, as shown above, if you want to deploy your application in app stores.

### **Usage**

You can check the [Flutter live streaming sample application](https://github.com/apivideo/api.video-flutter-live-stream/tree/master/example) for the whole application picture.

#### **Create a controller and the camera preview**

Change your `main.dart` file located in the `live_stream_app/lib` with the following code:

Launch your application. You now have the camera preview.

#### **Manage application lifecycle**

The next step is to manage application lifecycle. You will have to stop/start the camera when your application goes to/from the background. 

The class `_MyHomePageState` must implement the abstract class `WidgetsBindingObserver`. Replace its declaration with:

Register the lifecycle observer, add in `initState`:

#### **Add a control panel**

You still can't start a live stream because there is no way to do it. 

We are going to add a [Row](https://api.flutter.dev/flutter/widgets/Row-class.html) of [IconButton](https://api.flutter.dev/flutter/material/IconButton-class.html) that can control your live streaming.

Import the following package:

Then, add the following code in `_MyHomePageState`:

Then, add the `_controlRowWidget()` in the Colum under the `ApiVideoCameraPreview`. Replace your `_MyHomePageState` `build` method by:

Finally, update the `_isStreaming` variable in the controller’s callbacks to update the `IconButton` state when the live streaming is stopped.

Replace `createLiveStreamController` by:

medium_screenshot_20220411-112808.png

small_screenshot_20220411-112808.png

thumbnail_screenshot_20220411-112808.png

video-application-running.png

#### **Launch your first live stream**

⚠️⚠️⚠️ If you want to run your live stream, you will need to change `YOUR_STREAM_KEY` to a real one. 

You can find yours in the [api.video dashboard](https://dashboard.api.video/). If you don't have an account yet, create one, it's free. Then, create a livestream from the overview or the “Live streams” page.

Find this action card and click on "Start live stream"

large_screenshot-2022-03-22-at-08-24-00.png

medium_screenshot-2022-03-22-at-08-24-00.png

small_screenshot-2022-03-22-at-08-24-00.png

thumbnail_screenshot-2022-03-22-at-08-24-00.png

start-live-stream-action-card.png

A modal will appear with several pieces of information in it, including the shareable link and stream key. Save the shareable link to access your live stream later.

This modal should appear once you click on "Start live stream"

large_screenshot-2022-03-25-at-17-1-1.png

medium_screenshot-2022-03-25-at-17-1-1.png

small_screenshot-2022-03-25-at-17-1-1.png

thumbnail_screenshot-2022-03-25-at-17-1-1.png

api-video-modal-start-live-stream.png

💡 You can also use the api.video API to create a live stream and retrieve your stream key dynamically. Find how to do this right here. Paste your stream key in place of `YOUR_STREAM_KEY`. Paste your stream key in place of `YOUR_STREAM_KEY`.  

&nbsp;  
Click on the live button in your application; it should be disabled if the live streaming properly starts. Then, go to the shareable link you just saved. 

There you go! You can see what your mobile is streaming in real-time! If not, wait a few seconds and check your stream key value.

🎉🎉🎉 Congratulations, you have created your first live streaming Flutter application 🎉🎉🎉

You can now do an actual live stream directly from your Android and iOS devices. 

## And now what?

[api.video](https://api.video) provides two development environments. The sandbox allows you to live stream directly from your computer or mobile, but a watermark will be applied to your video, and there is a 30-minute limit for live streams.  

&nbsp;  

To avoid these limitations, [sign up](https://dashboard.api.video/register) to api.video and go into production mode 🚀.

Also, the Flutter RTMP live stream client allows us to do much more in terms of configuration!

You can match both audio and video configuration to your needs.

Also, there are some properties can be updated during the live stream:

* Camera: front or back
* Audio: muted or unmuted.

Check out the [README](https://github.com/apivideo/api.video-flutter-live-stream/blob/master/README.md) for exhaustive information about the `apivideo_live_stream` package.

Build your Flutter live streaming application with api.video

small_Frame 427319153.jpg

thumbnail_Frame 427319153.jpg

build-flutter-live-stream-app-api-video.jpg

api-video-blog-product-updates.png

Product updates

After hearing from our customers about the need for low-latency live streaming, we at api.video have been relentlessly chasing seconds of latency everywhere, from ingest to delivery. Having already provided the best performance for on-demand delivery in terms of playback and [encoding](https://api.video/blog/product-updates/video-encoding-pricing-update/), we're excited to announce our latest upgrade: low-latency live streaming!

&nbsp;

Keeping true to our core belief of making video easy and manageable for you, we've rolled out our live streaming product with latency as low as 3 seconds in best conditions. Now, you can stream your videos with a latency of 3 seconds in ideal conditions, revolutionizing the way you connect with your audience.

## What does this mean for you?

With this latest upgrade, you can stream your videos live with a minimal delay of 3 seconds. This means that you can ensure better interaction with your viewers, lower bounce offs due to viewer frustration and a smoother viewing experience. 

&nbsp;

Additionally, you also get the flexibility to push a live stream using Real-Time Messaging Protocol (RTMP) or Secure Reliable Transport [(SRT)](https://api.video/blog/product-updates/SRT-livestreaming/) protocol based on your needs. 

&nbsp;

[*How do you choose between SRT or RTMP protocols? Read on!*](https://api.video/blog/video-trends/srt-vs-rtmp/)

## How can your business benefit from low latency?

Several use cases benefit significantly from low latency in live streaming:

### 1. Esport live streams
Low-latency live streaming is crucial for esports viewing as it ensures real-time action with minimal delay, providing a more immersive and engaging experience for fans. It allows viewers to stay in sync with live events, participate in interactive chats, and react instantly to game-changing moments. This immediacy becomes crucial to build the excitement and zeal of watching an esport live, making viewers feel as if they are right there in the arena.

&nbsp;

Additionally, top level games that are being broadcast all over the globe and possess official data feeds are where the issues of latency have the biggest impact. It can be unfair for punters who are watching and betting on the event as the stream does not reflect what is actually happening on the field. 

&nbsp;

As opposed to online gaming where latency as low as 25 miliseconds is ideal, esport broadcasting industry usually has a [latency of under 10 seconds](https://sbcnews.co.uk/features/2021/07/27/how-latency-stream-delay-work-esports/).

### 2. Live events and concerts

For virtual concerts, conferences, and other live events, low latency is crucial for delivering a seamless viewing experience to remote audiences. By minimizing delay, organizers can create a sense of presence and immersion, allowing viewers to feel like they're part of the action, even from afar.

### 3. Webinars and workshops

Low-latency live streaming can significantly enhance webinars and workshops by providing an  interactive experience for participants. With reduced delay between the presenter and the audience, feedback, questions, and discussions can take place with ease. The low latency here helps instructors or guest speakers of the webinar to adapt their content on the fly based on audience input. In case a webinar is being streamed live and is also happening in-person, the minimal delay for the virtual audience keeps the whole event synchronised.

### 4. Telehealth and live patient monitoring

A good usage of low-latency lives treaming in the healthcare industry is for remote patient monitoring and live consultations. These demand streaming capabilities with minimal delays to ensure the highest quality of care. For individual healthcare professionals and hospitals that offer this service, being able to monitor and interact with patients live is crucial for accurately assessing symptoms, providing diagnoses, and making treatment decisions within time. Delays or interruptions in the video feed in this scenario may hinder the communication between patients and providers, which shows the relevance low-latency live streaming holds in this space.

## How to live stream with api.video: Step-by-step guide

- In order to establish a video live stream, you must first create a live stream container at api.video.
- Then, you can begin streaming with the tool of your choice.
- For this guide, we’ll see how you can [create a live stream with OBS](https://api.video/blog/tutorials/live-stream-tutorial/) – free and open source software for video streaming. 

### **Step 1: Authenticate**

You need an access_token in order to create and upload a video.

&nbsp;

You will need your API key to obtain the access_token. You’ll find your API key in [your api.video dashboard](https://dashboard.api.video/overview).

&nbsp;

(This guide uses the sandbox endpoint. To upload your video in production, simply replace all `sandbox.api.video` instances with `ws.api.video`.)

&nbsp;

First, call the authentication endpoint and get your access token.
&nbsp;

**Example - Curl Request**

### **Step 2: Create the live stream**

Now we [create the live stream](https://docs.api.video/reference/api/Live-Streams#create-live-stream). In the JSON parameter, feel free to edit the name of the live stream from "Your Stream Name" to whatever you want to name your stream.

&nbsp;

**Example - Curl Request**

Your Stream Name

Now the server is ready to accept our live stream, and once broadcast begins (JSON above shows broadcasting:false), it will be viewable on the URLs listed in the JSON response.

### **Connecting live video**

The JSON response above lists your live stream's streamKey, which will be needed in OBS to connect your video to the server.

&nbsp;

Now in the OBS application,

1. Establish a source. In the sources section, choose a video feed to share. You could choose to share your screen, or to share your camera (on a Mac: Video Capture Device, and then in the "Device" dropdown choose the camera). You should now see the video source in the main OBS window.
2. Connect OBS to api.video. Under Settings, choose Stream. You'll see a choice for service - choose custom.
3. The server should be `rtmp://broadcast.api.video/s` and the `streamKey` is the value you received in the Json when you created the stream. Click OK to accept the changes.
4. Press ‘Start Streaming’.
5. Share the embed, iFrame, so that others can watch your stream!

## Player support for low-latency live streaming

We are pleased to announce that our low-latency live streaming feature has been thoroughly tested with several popular video players to ensure optimal performance and seamless integration. The players we have tested include:

&nbsp;

- api.video embed player
- THEOplayer 7.4.1
- Video.js 8.14.0
- hls.js 1.5.11
- JW Player 8.34.1

&nbsp;

These players have been verified to support low-latency streaming. However, if you encounter any issues with a specific player, please reach out to our support team through chat with detailed information about the problem.

&nbsp;

We highly value and appreciate any feedback you can provide to help us improve our services. Your insights and experiences are crucial to identifying potential issues, enhancing features, and ensuring the overall quality and performance of our product. 

&nbsp;

_To start live streaming with api.video, [sign-up](https://dashboard.api.video/register) now! For questions, [talk to our team](https://meetings.hubspot.com/apivideo/talk-to-us) and we’ll try to answer your queries._

Stream smarter, not slower: Introducing low-latency live streaming

Low-latency live streaming with api.video

small_Low latency livestreaming with api.video (1).png

thumbnail_Low latency livestreaming with api.video (1).png

low-latency-live-streaming-api-video.png

How do you make sure that your live stream viewer stays **engaged**? what are the tools that you can leverage in order to make **the most out of the experience**? and how can you **analyze the viewer's reaction**?  

&nbsp;  

In this article, you can learn about the way you can integrate real time communication into your live stream in order to make an engaging user experience with your live streams.  

&nbsp;  

Although we will only learn how to share emojis between viewers in your live stream, you will be able to leverage the example in order to build **robust analytics** that will provide you **great insight into when and how the viewers reacted to the stream**.  

&nbsp;  

We’ll leverage api.video with [Ably](https://ably.com/) to create a real time communication scenario where one viewer of the live stream will post an emoji, and all of the other viewers of the same live stream will be able to see the reaction.  

&nbsp;  

Check out the diagram below on how this works:

## Why do Livestream viewers need to be engaged?

Live streaming is growing at a very rapid pace. Let’s talk statistics:

- Did you know that the revenue for the entire video streaming app industry reached **$82.3 billion in 2022**, and is projected to reach **$115 billion by 2026.** according to some resources it’s going to be **$118 billion by 2025**. ([Business of Apps](https://www.businessofapps.com/data/video-streaming-app-market/))

- Live commerce-initiated sales could account for as much as **10 to 20 percent** of all e-commerce by 2026 ([McKinsey](https://www.mckinsey.com/capabilities/mckinsey-digital/our-insights/its-showtime-how-live-commerce-is-transforming-the-shopping-experience)) and **41.2%** of consumers said they tune in to live streams focused on home products, and **37.5%** said they watch [live shopping events](https://tinuiti.com/blog/paid-social/live-shopping-tips/) for electronics ([Retail Touchpoints](https://www.retailtouchpoints.com/topics/digital-commerce/livestreaming-update-coresight-debunks-5-common-myths)).

- In 2022, there were **532 million** esports viewers worldwide ([Insider Intelligence](https://www.insiderintelligence.com/insights/esports-ecosystem-market-report/)).

- **52%** of live video viewers stream content through social media ([eMarketer](https://www.insiderintelligence.com/content/livestream-viewers-social-media)).

- Brands earn nearly **40%** more engagement with Instagram Reels compared to other Instagram content formats ([Business Wire](https://www.businesswire.com/news/home/20220907005644/en/Brands-Earn-Nearly-40-More-Engagement-with-Reels-Compared-to-Other-Instagram-Content-Formats)).  

&nbsp;  

And this is just a small part of some impressive live stream and video content statistics. So you ask yourself, how do I start integrating livestream into my app or website? 

## How to build a scalable and engaging live stream quickly?

What we’ll be leveraging:
- **api.video** to create and deliver the live stream
- **Ably** for the real-time communication handling
- For streaming, you can use **OBS**, [one of our live streaming SDKs](https://docs.api.video/sdks/livestream/react-native-livestream-component), or stream directly from the [api.video dashboard](https://dashboard.api.video/overview)  

&nbsp;  

With api.video, you can integrate livestream into any project in a few minutes. You can find the article on how to get started here: [Create a live stream](https://docs.api.video/live-streaming/create-a-live-stream).  

&nbsp;  

We’ll start with this simple example that was built using Next.js. You can go ahead and clone it from here: [Live stream with Ably](https://github.com/apivideo/livestream-with-realtime-ably).  

&nbsp;  

Let’s break it down; what are we looking at here? 

### The api.video React Player module

We are using api.video in order to create a stream and then the [api.video React player SDK](https://api.video/catalog/react-js-player/) in order to create a responsive on-screen video delivery while removing the control elements.  

&nbsp;   

If you navigate to the `src/pages/index.tsx` file, here’s where we consume the player and buildout the video delivery:
- We consume the api.video React player SDK here: `import ApiVideoPlayer from '@api.video/react-player';`
- And we pass it as a component to be rendered:

_**Disclaimer! In this example, the streamId is hardcoded in the index file, however, you’ll probably want to serve the streamId dynamically from your backend when you get to production.**_  

&nbsp;  

You can notice that we are passing the `ApiVideoPlayer` component all of these parameters; let’s break it down a bit; I’ll focus on the important ones:
- With Style, we are passing CSS parameters in order for the video to fit the screen first while the `size` parameter is dynamic, as `size` is a state:

Each time you resize the window, the video player size will adapt to the size of the screen.

- `chromeless` parameter removes all the player controls, which will give the user a better experience.
- With the `video` parameter, we are passing an object that includes the stream id and the optional parameter `live` that is set to true in order to give the player the indication that we are passing in a live stream and not a video  

&nbsp;  

Getting the live stream id can be done in two ways.  

&nbsp;  

### Programmatically:

1. You can leverage the livestream endpoint in order to get the list of livestream ids from your workspace: [GET Livestreams](https://docs.api.video/reference/api/Live-Streams#list-all-live-streams).

2. You’ll get a JSON response from which you can get the stream id you need:


### Manually from the dashboard:

1. Click on the live stream in Live Streams

You can find more information about the api.video React Player in our documentation: [api.video React player](https://github.com/apivideo/api.video-react-player).

### Everyone loves Emojis!

Now let’s get to the fun part; the example gives you the ability to share emojis between all the viewers of the stream; each person in the stream gets an emoji picker; once the emoji is clicked, a cool little animation will play where the emoji is hovering and then disappearing. The cool thing about that is that the animation will be played to all the viewers.

This example is very basic; however, you can take the example and **expand** on it in order to create **real time statistics** for the live stream session, for example: 
- Count the reactions from the users
- Map the different reaction emojis and get the timeframe with the most reactions
- Get real time feedback from the users
- And more...  

&nbsp;  

The emoji animation is built with [React Simple Animate](https://www.npmjs.com/package/react-simple-animate), it has a bit of complex logic, but you are free to reuse it in your app. You can find the actual animation parameters in `src/utils/randomframevalues.tsx`  

&nbsp;  

The random values are being passed to the `<AnimateKeyframes>` component that includes the actual emoji:

Go ahead and play around with the random values and the parameters, should be fun 😃

### Spread the emojis

And now we get to the challenge, how do you get these emojis across to all other users? this was an interesting task, but with Ably, it wasn’t that difficult to implement.  

&nbsp;  

We created a new class that is called `MessageHandler` where we use the Ably node library: `import Ably from 'ably';`  

&nbsp;  

Ably has a great API that allows you to create channels, get users to subscribe to them, and then broadcast and listen to any events that happen inside these channels; that’s a great fit for our use case!  

&nbsp;  

In the example, all you need to do is to replace the values of the `#apiKey`  with the one that you get from Ably:

**Disclaimer! Please note that these keys should be consumed from the backend. In this example, just to make it easy, we expose the keys on the front end. Please ensure that the backend serves the keys when you go to production.**  

&nbsp;  

**Briefly on what we are doing in the `MessageHandler` class:**

When we use Ably there are a few things we need to understand and utilize:
- Channels
- Users
- Subscriptions (listeners)
- Message publishing  

&nbsp;  

Every time the user opens a new window, they will be assigned a user id for a session (this logic works in the `index.tsx` file); the userId is passed to the class when it is initialized in order to create a unique user id for each user that watches the stream.  

&nbsp;  

Then we use the stream id as the channel id for Ably, of course, you can generate any channel id, however, it’s easier to just leverage the values that we already have.  

&nbsp;  

We then subscribe to the same channel and also broadcast the messages to it at the same time.  

&nbsp;  

The caveat is that we set the listener in the `/src/components/emoji.tsx` file, if you look closely at the listener, we have a logic that will make sure that the listener is not getting duplicated. We check if there are no listeners created already; if there aren’t, we create one. This situation is caused by the fact that each time the state changes, React will re-render and will run the same code again, causing the listener to be created multiple times, so we do something like this:

Finally, we have two functions to generate the message (which will include the emoji) and publish the message to the channel.  

&nbsp;  

Now that you know how it works, you can run the example and play around with it.
- Just make sure to install all the dependent modules by running `npm install` or `yarn install`
- After the installation is done, run the example by `npm run dev`
- The example will run on `localhost:3000`  

&nbsp;  

Happy Hacking! 🙂  

&nbsp;  

If you have any questions about the article, feel free to raise issues on the [Github repo](https://github.com/apivideo/livestream-with-realtime-ably), reach out to me directly: artem@api.video, or just open a ticket with our support team.

Boost your live streams with user engagement & real time data

Boost your live streams with user engagement

live-streams-boost-user-engagement.jpg

SRT vs RTMP: Which one to choose for your livestream?

Choosing the right bitrate for your OBS live stream

Boost your live streams with user engagement 

api.video player for Flutter: playback videos on your apps

How to build a live streaming app in 3 steps

Video trends

Here at [api.video](https://api.video/), we talk with lots of developers who are looking for ways to build cool and innovative services with video. Many are still figuring out all of their use cases, and trying to match them with the technical capabilities of different video services.

[Streaming live video](https://api.video/product/live-stream/) is one feature that we receive many questions about. At api.video, **our video streaming solution uses HTTP Live Streaming (HLS) to live stream video**. Another technology we are frequently asked about is WebRTC.  Both technologies are great, but have significantly different applications. In this post, we’ll look at the features and advantages of both, and the primary applications that they are suited for.

## What is HLS?

HTTP Live Streaming (HLS) was developed by Apple, and is currently the primary way that video is streamed on the web today.  The “live streaming” in the name HLS is a bit of a misnomer, as the video does not need to be live - YouTube, Netflix and other video on demand services use HLS to stream video that is not live.  This is an advantage of using HLS for live streaming - the same files used to deliver the video live can be used to playback the video later ‘on demand.’

The ‘HTTP’ in HLS indicates that it uses traditional web protocols to transmit the data over a TCP connection. The video is cut into small segments and sent from the server to the user. The player on the user’s device recombines the video for playback based on a text based manifest file that is transmitted with the video segments. What makes this powerful is that if you have different versions of the same video (different dimensions and bitrates), the player can optimise the delivery based on the actual conditions for each user (primarily network speed and screen size).

When a live video is being transmitted with HLS, the video is sent to a server and transcoded into segments for transmission to end users. This makes HLS ideal for live streaming in one-to-many streams - once the files are recorded, the files are sent like any other HTTP request and the limitation is essentially the server hosting the video. (and of course with CDNs this overhead can be further reduced).

**Latency**: HLS streaming does suffer from about 6-15 seconds of latency (and depending on architectures, it can even be longer). Since the video is transcoded into segments of finite length, the video must be held up for at least as long as the segment length. To reduce transmission errors, some players require 2 segments to be stored in the playback buffer before playback begins, further pushing playback time away from the exact live event.

NOTE: There is active work being done today to reduce HLS streaming latency, and this is expected to improve over the coming months (and api.video is investing in bringing low latency HLS to our users in the *very* near future).

**HLS Summary**: A robust solution for streaming to many users. The current state of HLS includes 10-20 seconds latency that makes HLS not ideal for interactive presentations. HLS videos are also available for playback after the live event.



## WebRTC

“Web Real Time Communication” or WebRTC is a W3C standard that is supported in all browsers, allowing for - as you might have guessed - real time communication. WebRTC has near instantaneous delivery, typically under 300ms, making it ideal for interactive back and forth conversations like in web conferencing solutions.  

The reduction in latency is (partly) due to the use of UDP instead of TCP, and because the formats being used do not require any transcoding before transmitting.

However, since there is instantaneous delivery of video between peers, there is a limit to the number of users who can share video, typically under 6. There are implementations for WebRTC where a small number of users (under 5) share their video, and another number of users can watch in real time (but this number is usually small - under 300.).  

Each person sharing video uses about 1 MBPS of bandwidth. If there are 4 people streaming, the video is 4 MBPS per viewer - the bandwidth coming out of the server will quickly be the limiting factor for the number of users who may join the stream. Additionally, users on low quality networks may not be able to ingest 4MBPS of video, and have trouble playing back the video due to the size. 

In order to save the video for later playback, the WebRTC implementation will use the MediaRecorder attribute to save the video on a local computer. For later playback, this video will have to be uploaded to a server.

WebRTC is ideal for real-time instantaneous communication, but is for small groups of viewers - typically 1-4 sharing video, and a small number of viewers.


## Are HLS and WebRTC independent?

Melding HLS and WebRTC is actually quite common. For example, if you are hosting a panel of speakers, they could join over WebRTC (like a Zoom call), and then stream the call over HLS to a large audience (Zoom offers this as a feature to increase your audience).

How are you using WebRTC and HLS in your video applications? Feel free to continue this conversation on our developer forum: [community.api.video](https://community.api.video).

Delivering live video: Streaming vs. WebRTC

webrtc.png

Live streaming your content is a great way to connect with your audience. In this tutorial, we'll walk through the steps you need to follow to set up a video livestream.

Note: we have example code of setting up a live stream in the [browser](https://api.video/blog/tutorials/live-stream-tutorial/), with [Zoom](https://api.video/blog/video-trends/start-remote-work-with-online-video-and-zoom-us/)
and with [OBS](https://api.video/blog/video-trends/video-live-streaming-in-just-5-easy-steps/).

[Here](https://docs.api.video/reference/api/Live-Streams#create-live-stream) is the direct link to the technical docs to create a live stream.

In order to establish a video livestream, you must first create a livestream container at api.video. Then you can begin streaming with the tool of your choice. In this example, the live stream will be created with OBS, free and open source software for video streaming.  

## Creating Live Stream

### Step 1: Authenticate

You need an access_token in order to create and upload a video.

You will need your API key to obtain the access_token. You can find your API key in [your dashoard](https://dashboard.api.video).  

This tutorial uses the sandbox endpoint. To upload your video in production, simply replace all `sandbox.api.video` instances with `ws.api.video`.

First, call the authentication endpoint and get your access token.


#### Example - Curl Request


### Step 2: Create the Live Stream

Now we [create the live stream](https://docs.api.video/reference/api/Live-Streams#create-live-stream). In the JSON parameter, feel free to edit the name of the live stream from "Your Stream Name" to whatever you want to name your stream.

#### Example - Curl Request

Now the server is ready to accept our live stream, and once broadcast begins (JSON above shows broadcasting:false), it will be viewable on the urls listed in the JSON response.

### Connecting Live Video

The JSON response above lists your live stream's streamKey, which will be needed in OBS to connect your video to the server.

in the OBS application:

1. Esablish a source.  In the sources section, choose a video feed to share.  You could choose to share your screen, or to share your camera (on a Mac: Video Capture Device, and then in the "Device" dropdown choose the camera).  You should now see the video source in the main OBS window.
2. Connect OBS to api.video. Under Settings, choose Stream.  You'll see a choice for service - choose custom.
3. The server should be `rtmp://broadcast.api.video/s` and the `streamKey` is the value you received in the Json when you created the stream. Click OK to accept the changes.
4. Press Start Streaming.
5. Share the embed, iFrame, so that others can watch your stream!


Extra Step:  The default video poster that your users will see is api.video branded.  You can update the thumbnail with an image of your choice:

## Conclusion

That's all it takes. We've walked through the process of creating a livestream at [api.video](https://api.video), and then how to connect that video's streamKey into OBS. Using OBS, we are then able to broadcast video to all our viewers, who can watch using the player (oriframe) url provided by the api.

[Give it a try](https://dashboard.api.video/register), and let us know how it worked for you in our [community forum](https://community.api.video). We're also there to help out if you run into any difficulties.

Create a Live Stream

create-a-live-stream.png

Flutter has a strength that only a handful of frameworks have: the power to build a multi-platform application with a single codebase. 

What if you need to display some videos in your new or future worldwide famous app? At the time I write this article, it’s fair to say that there aren’t many video players available for Flutter out there. Here comes our solution at [api.video](https://api.video)!

api-video-player-screenshot.png

## A single video player for all platforms

If you’re new to Flutter or cross-platform development, welcome to this wonderful, fast, and simple world! No more separate logics or codebase to create an application that works across multiple platforms. Better yet, no need to have multiple developers working to create different applications for various operating systems. Create an application once, and use it everywhere!

The api.video player for [Flutter](https://pub.dev/packages/apivideo_player) is built natively for Android, iOS, and web and can be implemented on these three platforms easily. All you need is a computer and an [api.video](https://dashboard.api.video/register) account.

Continue reading this article for a full tutorial 👀

## Upload a video to display it

In order to display a video, you need to first upload it! To upload a video, [login](https://dashboard.api.video/login) to your api.video account or if you are not registered already, you can easily [create an account](https://dashboard.api.video/register) for free.

Once you reach the dashboard, check if you have previously uploaded any videos, and if not, no worries! You can easily upload a video by clicking the “Create Video Object” button on the overview and follow the steps on the dashboard. 

💡 You can also upload videos to your workspace with one of our [SDKs](https://docs.api.video/reference/api/Videos#upload-a-video)

upload-video-api-video.png

## Add the api.video player to your application on Flutter

If you’re new to Flutter, or if you don’t already have a Flutter app running, [please follow the official guide](https://docs.flutter.dev/get-started/install).

Once your application is running, add the api.video player package to you Flutter.

### Option 1

Run the following command at the root of your project:

### Option 2

Modify your project’s `pubspec.yaml` file:

## For iOS usage

This package only works on iOS 13 and above. Please update your `ios/Podfile` platform property as follows, or update the iOS version in xCode.

## Display your first video

You can display your first video by following the easy steps below 👇

### 1. Import the package

Add the following line at the top of the file where you want to use the api.video player:

### 2. Create a new video player controller

You need to first instantiate a `ApiVideoPlayerController` to be able to use the video player widget.

To instantiate the `ApiVideoPlayerController`, you will need an api.video video id. Find the video id in the api.video dashboard by clicking on one of your videos found under the section called [videos](https://dashboard.api.video/videos).

Create a new widget or modify an existing one like this:

Run your application on the device of your choice and a simple line of text should appear on your application.

## 3. Create a new video player

Now that you have a functional `ApiVideoPlayerController`, you can create a new `ApiVideoPlayer` and associate your controller to the player.

Modify your widget by replacing the `Text` widget with an `ApiVideoPlayer` one:

`ApiVideoPlayer` comes with a parameter `fit` or type `BoxFit` to set how it will behave in its parent widget.

### 4. Make it yours!

You can customize your brand new video player the way you want by changing its colors and adding some event listeners.

## Add some event listeners

There are two ways to add an event listener to your video player controller:

1. When you instantiate the player controller

2. After the player controller has been initialized.

The following sample code shows you how to add an `onPlay` event listener on `ApiVideoPlayerController` instantiation and an `onPause` event listener after the controller has been initialized in the `initState` method.

Modify your code like this to test these two event listeners:

## Customize the theme of your player

You can change your video player’s style by attributing a `PlayerStyle` class to the `style` parameter of your `ApiVideoPlayer` widget:

## Go further

You can access and control the video player features such as the play button, reverse, or forward features from outside of the player. 

Let’s see how we can retrieve the video’s information and control our video player from elsewhere.

### Retrieve the video’s information

The `ApiVideoPlayerController` gives you access to a lot of information about the current video: duration, current time, volume, and many more.

Let’s add a simple button to retrieve the current video duration.

Modify your widget as follows:

## Control the video from outside of the player

You can control the video player from outside of the player thanks to the controller methods.

For instance, we can add an icon button to mute and unmute the video on press.

Modify your widget as follows:

## Full documentation and example

Find the [full documentation](https://github.com/apivideo/api.video-flutter-player) and a [full sample app](https://github.com/apivideo/api.video-flutter-player/tree/main/example) in our GitHub repository. 

If you're looking for an easy way to integrate video into your application, check out our **[docs](https://docs.api.video/)** and **[sign up for a free account](https://dashboard.api.video/register)**.

large_05dec22-copie-4.png

medium_05dec22-copie-4.png

small_05dec22-copie-4.png

thumbnail_05dec22-copie-4.png

api-video-player-for-flutter.png

In this tutorial, you will learn how to build our own live streaming broadcast application with React Native and api.video.
We're also going to use TypeScript, but you can choose either TypeScript or JavaScript. Both work well with api.video's clients. For further details, check out our [official repository](https://github.com/apivideo/api.video-reactnative-live-stream).

Congratulations! The live streaming app is done!

ezgif-com-gif-maker-2.gif

## Getting started

First, follow the development setup steps from [React Native's official documentation](https://reactnative.dev/docs/environment-setup).

If you're new to React Native, you may also need to [learn the basics](https://reactnative.dev/docs/tutorial).

Make sure that you have the latest Node stable version installed.

*Quick reminder: iOS development is only enabled for macOS users. If you're on Windows or Linux, you can develop for Android.*

The official React Native documentation states, "you can follow the **Expo CLI Quickstart** to learn how to build your iOS app using Expo instead."


## Create a new React Native app

Open a new terminal. Go to the folder of your choice and run the following command to create a new React Native application with TypeScript:

### Launch the application

Inside your new project start Metro to bundle your application:

Once Metro is connected and ready, open another terminal. Go to your project folder, and launch your application.

This command line can take several minutes to finish, stay calm and grab a coffee ☕

If everything is set up correctly, you should see your new app running in your iOS / Android emulator like this

screenshot-2022-03-21-at-11-56-07-2.png

## Add the live stream client to your app

Congratulations! 🎉 You've just created a React Native application!
Now, it's time to install the [api.video RTMP live stream client](https://github.com/apivideo/api.video-reactnative-live-stream) into it to live stream directly from your mobile device for free.


### Installation

At this time, the `npx react-native init` command creates a React Native application with `yarn`.

Yarn is a package manager, like NPM. Don't worry if you've not worked with it before; it's easy to use and similar to NPM.


To install the api.video RTMP live stream client, open a terminal. Go to your project folder and run this command:

For iOS usage, you will need to complete two more steps:
1. Install the native dependencies with [Cocoapods](https://cocoapods.org/):

2. This project contains Swift code. If it's your first dependency with swift code, you’ll need to create an empty Swift file in your project (with the bridging header) from Xcode. [You can find instructions here](https://github.com/apivideo/api.video-reactnative-live-stream/#ios).


### Permissions

⚠️ Both iOS and Android need permission to broadcast from your device's camera and record audio.

You will also need to ask for internet permission for Android.

#### Android

From your project folder, open the `AndroidManifest.xml` file. It’s located in the `LiveStreamApp/android/app/src/main` directory.
Add the following content just under the opening `<manifest>` tag to enable internet, audio recording, and the camera for your application:

#### iOS

From your project folder, open the `Info.plist` file. It’s located in the `LiveStreamApp/ios/LiveStreamApp` directory.
Add the following content just under the opening `<dict>` tag to enable the camera and microphone:

Don't forget to add the app description, as shown above, if you want to deploy your application in stores.

#### Sign your iOS application (optional)

You may need to [sign your iOS application](https://github.com/apivideo/api.video-reactnative-live-stream#ios). I recommend doing it now to avoid issues later. 

### Usage

#### Component

Change your `App.tsx` file with the following code:

⚠️ You may need to relaunch your Metro after this.

A black screen with a round button at the bottom should appear in your emulator: it's your live stream view.

screenshot-2022-03-30-at-15-06-54-2.png

#### Launch your first live stream

If you want to test to live stream from an actual device (iOS in our case), open Xcode. Click on “Open a project or file,” select the `LiveStreamApp/ios` folder, and open it.
Connect your device to your iMac/Macbook and run your application.
For Android, you can check the [official documentation](https://developer.android.com/studio/run/device).

You will need to change `YOUR_STREAM_KEY` to a real one. You can find yours in the [api.video dashboard](https://dashboard.api.video/). If you don't have an account yet, create one, it's free.
Then, create a livestream from the overview or the “Live streams” page.

💡 You can also use the [api.video](https://api.video/) API to create a live stream and retrieve your stream key dynamically. [Find how to do this right here](https://docs.api.video/reference/api/Live-Streams#create-live-stream).

Paste your stream key in place of `YOUR_STREAM_KEY`.

Click on the button in your application; it should turn red. Them, go to the shareable link you just saved. There you go! You can see what your mobile is streaming in real-time! If it's not the case, wait a few seconds and check your stream key value.


## Make it dynamic

Our application is working; we can now do an actual live stream directly from our smartphone. 
But api.video RTMP live stream client allows us to customize our live stream the way we want. 
In this section, we will see how to customize our live stream parameters and make our application UI better.

Check the [official README](https://github.com/apivideo/api.video-reactnative-live-stream/tree/v1.0.0) for exhaustive information about the `@api.video/react-native-livestream` package.

Some properties can be updated during the live stream:

- Camera: front or back
- Audio: muted or not

We can leave these properties on the live stream view. This way, we can update them during our live stream.


### Add icons

We will need icons in our application.
Install the corresponding dependency before going further.

1. Stop your application
2. Delete the pods (only for iOS usage.)

3. Add the [react-native-vector-icons](https://www.npmjs.com/package/react-native-vector-icons) NPM package:

4. Go into `/ios` and install your pods (only for iOS usage.)

5. To display an icon, import it and use it as a component

⚠️ An import error could be displayed in Visual Studio Code, but it should work anyway.


### Live stream view

Right now, we only have a single button at the bottom of our live stream view, contained in the `App.tsx` file.

We can customize this component a little bit to make it more obvious.

#### Streaming button

Let's add text if our live stream is not running and an icon when it is.
Replace the above code by this one:

Don't forget to update your style to display the streaming button conditionally:

#### Camera button

To change the camera input (front or back), we need to add a button we can access during our live stream.

To do this, a local state is needed, like the `streaming` one:

1. Add it in your `App` component and replace your static string for the camera props:

2. Handle the change of camera with this handler. Place it in your `App` component:

3. Add this code under your streaming button. It’s our camera icon component:

When you press the camera icon, displayed in the bottom right corner, you should switch from the back camera to the front and vice versa.

#### Muted button

We may want to mute our stream at a specific time. For this, we also need a local state and a button.

1. Add a new local state under the other ones and replace your static boolean for the `isMuted` props:

2. Handle the change of `muted` state with this handler. Place it in your `App` component:

3. Add this code under your camera button. It’s our mute icon component:

When you press the mute icon, displayed in the bottom left corner, you should switch from muted to unmuted.

And voilà! You can now launch a live stream directly from your device, choose which camera you want to use, and allow sound recording or not.

## And now what?

Congratulations! You just created a fully functional live streaming broadcast application. You can go further and implement the logic to modify all other settings provided by [api.video](https://api.video).
You can check the [React Native live streaming sample application](https://github.com/apivideo/api.video-reactnative-live-stream/tree/main/example) to get an idea of the potential of this tool (product?).

api.video provides two development environments. The sandbox allows you to live stream directly from your computer or mobile, but a watermark will be applied to your video and there is a 30 minute limit for live streams. 

To avoid these limitations, try one of the plans found [here](https://api.video/pricing/) and go into production mode 🚀

large_image.png

medium_image.png

small_image.png

thumbnail_image.png

image.png

Video upload

Kotlin

This article presents a new way to upload files to api.video from an Android application. It is based on a specific Android component called: WorkManager. To simplify the usage for developers, we added dedicated methods to the [Android API client](https://github.com/apivideo/api.video-android-client) and the [Android API uploader](https://github.com/apivideo/api.video-android-uploader) that we are going to discover in this paper.

On a previous article, we demonstrated how to use an Android service: the [UploadService](https://api.video/blog/tutorials/how-to-easily-upload-videos-on-your-android-app/). The WorkManager is an even easier and more powerful way to upload files. 🚀🚀👌👌

## 👷‍♀️👷‍♂️ Android WorkManager

The [WorkManager](https://developer.android.com/topic/libraries/architecture/workmanager) is a component of the Android Jetpack. It is a library that makes it easy to schedule deferrable, asynchronous tasks that are expected to run even if the app exits or the device restarts. The tasks could be constraint to specific device state before it is launched. For example, the WorkManager will execute the task only when the network is available.

For these reasons, it is perfect to perform long running tasks on background such as uploads.

To simplify the usage, we have developed dedicated API available in our [Android API client](https://github.com/apivideo/api.video-android-client) and in the [Android API uploader](https://github.com/apivideo/api.video-android-uploader).

## 👌 api.video for WorkManager

With the API provided by api.video with the WorkManager, you can:

- upload with video id
- upload with upload token
- upload with progressive upload
- display the progress notification of the upload of the current file
- get the progress of the upload of the files
- get the state of the upload of the files: success, error,…
- multiple uploads: it uploads files from an internal queue
- cancel the upload of a specific file or all files
- upload only when your device is connected

### 🛠️ Implementation

Before uploading a video, you have to create a video client with the `VideosApiStore`:

You also have to set notification Ids with the `NotificationConfigurationStore`. The `NotificationConfigurationStore` is a singleton store that contains configuration for the notification. We will have a look on the customization further.

You can now call methods to upload your files. The easiest way is to use [api.video](https://api.video) WorkManager extensions.

To upload a file with a video Id in your `Activity`:

And to upload a file with an upload token:

### 👂 Listen to Worker events

To listen the upload worker, use the `WorkInfo` . Get it with:

To listen to the upload status, use `workInfo.state`. You can also get the `Video` object with the `toVideo()` when the upload succeeds:

To listen to the progress of your upload, use `WorkInfo.progress` with the `toProgress()` extension.

### 🎨 Notifications customization

A light customization of the notifications could be performed with the `NotificationConfigurationStore`. 

For example, you can set the notification icon:

To have more controls over the notifications (such as changing messages), you can extend both `UploadWorker` and `ProgressiveUploadWorker` and overwrite the `onUploadStarted, onUploadError` and `onUploadProgressNotification`.

With this article, you should be able to quickly add a state of the art upload to api.video feature in your application 💪 

To start building right now with the WorkManager, check out this [example](https://github.com/apivideo/api.video-android-uploader/tree/main/examples/workmanager) and **[sign up for a free account](https://dashboard.api.video/register).**

Upload videos on your Android app with WorkManager

How to easily upload videos on your Android app with WorkManager

small_Frame 427319203.jpg

thumbnail_Frame 427319203.jpg

upload-videos-on-android-app-workmanager.jpg

How to easily upload videos on your Android app with WorkManager?

Mobile

Private Videos

Player

Player update

We have now released an [api.video](https://api.video/) player for Android. The api.video player helps you to include your videos in your Android applications very easily and quickly. In this tutorial, we are going to show how to add an api.video player to your Android application. It will only take 5 minutes. Let’s do this! 👊

Before starting this tutorial, you can upload a video to your api.video. If you haven’t yet, you can check [Upload your first video guide](https://docs.api.video/vod/upload-a-video-regular-upload), which will walk you through your first video upload. The video that you have uploaded to your api.video account will have an assigned `videoId`. In the following steps, we will call for your videoId using the `YOUR_VIDEO_ID` parameter.

To just give you a quick preview, we are going to create an Android application with an api.video player that looks like this:

## The api.video player for Android

The api.video Android player is available on GitHub and comes with an example application, and the artifact is hosted on Maven Central.

The minimum Android API version supported by the api.video Android player is 24. Make sure that you don’t have a `minSdk` version under 24.

The API is divided into 2 main components:

- **The player view:** This component displays the video and its controls: `ApiVideoExoPlayerView` class.
- **The player controller:** This component controls the video and its events: `ApiVideoPlayerController` class.

## Add api.video Android player to your project

If you don’t have an Android application yet, you need to create one before you go further. The [Build Your First Android App in Java](https://developer.android.com/codelabs/build-your-first-android-app#0) is a simple guide that will help you create your Android application. 

### Dependency

The first thing is to add the [api.video](https://api.video/) Android player to your project dependencies. In your application `build.gradle`, add your `dependencies` tag as shown below:

It’s always good to check out if a [new version](https://github.com/apivideo/api.video-android-player/releases) is available.

To have access to the view, I am going to use `ViewBinding` in this tutorial because it is elegant to use as it will be more user-friendly. Now we add the `android` tag:

### XML Layout

In your `Activity` layout, add a player view:

You might have some constraints to add depending on the parent layout.

With `ViewBinding`, we can access our `ApiVideoExoPlayerView` by using the following field:

### Implementation

The main part of the implementation is to create a player controller, but it depends on several other components.

To manipulate video from api.video, the `videoId` is wrapped in an object called `VideoOptions`:

Create a player controller in your `Activity`. For example, in the `onResume`:

Launch the application. You have successfully integrated the [api.video](https://api.video) Android player in your application! 🥳🥳🥳

### Video privacy setting

For more information on changing video privacy settings, see this [article](https://api.video/blog/product-updates/video-access-management-how-to-create-deliver-and-manage-private-videos-and-what/).

If your application requires the use of private videos, then pass your private token to the `VideoOptions`:

### Fullscreen

For the fullscreen button, you will have to develop the fullscreen behavior. The base principles are: 

* When full screen is activated, hide all surrounding views, menu,…, and lock the application in landscape mode.
* When the full screen is deactivated, display surrounding views and unlock the application orientation.

These behaviors must be implemented on the `onFullScreenModeChanged` of `ApiVideoExoPlayerView.Listener`:

In this quick tutorial, you learned about how to simply add an [api.video](https://api.video) player for your Android application. Now you know how to add the api.video player as a dependency, configure the XML layout, and implement the player controller. Moreover, you learned how to change your video privacy and how to set up a fullscreen behavior. 

You can successfully integrate the api.video Android player in your own application by following the steps in this tutorial. For an example of api.video Android player, see the [example](https://github.com/apivideo/api.video-android-player/tree/main/example) provided in the player repository.

If you miss any features, face any bugs, or come across any other issues, we will be happy to help you on our [GitHub issues](https://github.com/apivideo/api.video-android-player/issues) page.🤝

How to add an api.video player to your Android application

large_23nov22-1.png

medium_23nov22-1.png

small_23nov22-1.png

thumbnail_23nov22-1.png

How-to-add-api-video-player-to-your-android-app.png

This article is about how to easily add an upload mechanism from [api.video](https://api.video) to your Android application with a specific component from the Android API client and the Android video uploader called the UploadService.

In your Android application, if you use the `upload` API with the [Android API client](https://github.com/apivideo/api.video-android-client) or the [Android video uploader](https://github.com/apivideo/api.video-android-uploader), you might have noticed that it is not a piece of cake. Here are the main reasons why:

- **NetworkOnMainThreadException**: on the modern Android version, you must not perform network calls on the main thread; otherwise your application will crash with an `android.os.NetworkOnMainThreadException` . As `upload` is a synchronous API, you must call it from a Thread.
- **Background**: performing long-running tasks in your Activity is forbidden, so if the user sends your application to the background while an upload is in progress, the system might kill the process at some point and the file will never be uploaded
- **Upload management**: with the `upload` API you can't just cancel a running upload, you can't efficiently perform multiple uploads unless you have implemented it in a separate Thread.

At some point, you will have to implement the `upload` API in a dedicated Thread or an [Executor](https://developer.android.com/reference/java/util/concurrent/Executor) or, even better with [Kotlin coroutines](https://kotlinlang.org/docs/coroutines-overview.html). It might be a lengthy task if you are not familiar with these components. A Thread won't be able to handle uploads when the application is in the background. If you are already familiar with Android Services, you know that implementing a Service is a good solution for this kind of issue. Let's have a deeper look at this component.

## 1. Android Service

According to Android [documentation](https://developer.android.com/guide/components/services):

"A [Service](https://developer.android.com/reference/android/app/Service) is an [application component](https://developer.android.com/guide/components/fundamentals#Components) that can **perform long-running operations in the background**. It does not provide a user interface. Once started, a **service might continue running for some time, even after the user switches to another application**. Additionally, a component can bind to a service to interact with it and perform interprocess communication (IPC). For example, **a service can handle network transactions**, play music, perform file I/O, or interact with a content provider from the background."

Nice!

There is another interesting part about the service:

"When a service is running, it can notify the user of events using [snack bar notifications](https://developer.android.com/develop/ui/views/notifications/snackbar)
 or [status bar notifications](https://developer.android.com/develop/ui/views/notifications/build-notification)."

For a type of service called Foreground Service, your service must display a notification. The notification can look like a text, but it can also be an audio player.

When you start looking for Service notifications, they are everywhere.

Video on demand

Live streaming

Analytics

Video infrastructure

Video player

AI features

See all features

Online learning & Corporate training

Social & Entertainment

Marketplace & E-commerce

Communication & UGC

Generative AI

Quickstart guides

Documentation

Ecosystem catalog

Clients & SDKs

Community

Blog

Demos

Customer success stories

Help center

Android