Normal

small_t02cw29ka-u04jtt0jcg3-549047173ac2-512.jpeg

thumbnail_t02cw29ka-u04jtt0jcg3-549047173ac2-512.jpeg

t02cw29ka-u04jtt0jcg3-549047173ac2-512.jpeg

Artem Matinian

Tutorials

React Native

NodeJS

Next.js

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**?

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.

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

We’ll leverage [api.video](http://api.video) with **Ably** 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.

Check out the diagram below on how this works:

livestream-with-realtime-communication-diagram-ably

large_livestream-with-realtime-communication-diagram-ably.jpeg

medium_livestream-with-realtime-communication-diagram-ably.jpeg

small_livestream-with-realtime-communication-diagram-ably.jpeg

thumbnail_livestream-with-realtime-communication-diagram-ably.jpeg

livestream-with-realtime-communication-diagram-ably.jpeg

## 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.notion.so/5c096d5c490d48ba989db87d3ffb1ed0))

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

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](http://api.video) to create and deliver the live stream
- [Ably](https://ably.com/) 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](http://api.video) dashboard

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

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

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

### The [api.video](http://api.video) React Player module

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

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](http://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.** 

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

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

**Programmatically**:

1. You can leverage the livestream endpoint in order to get the list of livestream ids from your workspace: https://docs.api.video/reference/get_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

large_get-livestream-id.png

medium_get-livestream-id.png

small_get-livestream-id.png

thumbnail_get-livestream-id.png

get-livestream-id.png

large_copy-livestream-id-from-dashboard.png

medium_copy-livestream-id-from-dashboard.png

small_copy-livestream-id-from-dashboard.png

thumbnail_copy-livestream-id-from-dashboard.png

copy-livestream-id-from-dashboard.png

You can find more information about the [api.video](http://api.video) React Player in our documentation: 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.

large_Demo.gif

medium_Demo.gif

small_Demo.gif

thumbnail_Demo.gif

Demo.gif

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

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`  

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. 

We created a new class that is called `MessageHandler` where we use the Ably node library:

`import Ably from 'ably';`

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! 

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

large_get-ably-api-key.png

medium_get-ably-api-key.png

small_get-ably-api-key.png

thumbnail_get-ably-api-key.png

get-ably-api-key.png

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

**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

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. 

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. 

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

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.

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`

Happy Hacking! 🙂

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

large_boost-live-stream-engagement.png

medium_boost-live-stream-engagement.png

small_boost-live-stream-engagement.png

thumbnail_boost-live-stream-engagement.png

boost-live-stream-engagement.png

Boost your live streams with user engagement 

It’s natural that one will think about integrating videos into their project. There are so many use cases for a video that we cannot even start to count. From user-generated content like Youtube, TikTok, Instagram, and the likes, through e-learning apps, personal trainers, e-shopping, and the list goes on and on, there’s no limit to what you can do with moving images that zoom across the fiber optics as digital signals from one place to another. 

Is there are catch, though? How easy is it to implement videos into your project, app, or website? in this article, we will look at the options, challenges, and solutions for getting video infrastructure up and running.

## The Casual Cloud Vendor ☁️

Probably, the first thought of every developer (with a mainstream line of thinking) is AWS. It comes naturally, as most of the existing infrastructure is probably set up on AWS, Azure, or the like. Who can blame you? it’s convenient, easily scalable, and…. can get quite expensive. Not only that, it might be difficult to implement as well; think about:

- Having DevOps that specialize not only in AWS but also in the video area
- If you don’t have such a team, then you’ll need to hire people for that.
- Time-consuming setup
- High price

small_So you wanted to use AWS to save costs.png

thumbnail_So you wanted to use AWS to save costs.png

So-you-wanted-to-use-AWS-to-save-costs.png

Here’s the implementation list of all the different services to deploy and setup to have video-on-demand with AWS:

large_AWS requirements.png

medium_AWS requirements.png

small_AWS requirements.png

thumbnail_AWS requirements.png

AWS-requirements.png

That’s not all; you’ll also have to build the client that uploads the videos yourself and plus all of the front-end. You can already understand the costs and time involved with this project. 

“Alright”, you say, now what? isn’t it better to just build the whole architecture myself? what’s the point of using AWS if it’s costly, complex, and resource intensive?

## The DIY solution 🛠️

Let’s go with this simple idea. You want to create an upload button where users upload their videos to your app or website. You already have quite a few users and you know that the feature will be adopted quite quickly, right?

The minimum requirements are:

- Rent a server for $120/month (i.e Cloudflare, DigitalOcean and the likes) with the following available resources (vCPU: 4, 16GB of memory, 250GB HDD)
- Install a web server like Apache, Nginx
- Create a hosting logic on your server
- Find a third-party video player
- Create your application and add an upload button to allow your users to send their videos created with their last smartphone model.
- Allow the user to play their videos freshly uploaded with the video player
- Deploy your application on the server

It does sound easier than AWS, right? why is the AWS solution so complex? why all of these services?

You launch the service, and it seems to run smoothly for a few hours, and then you start to get some emails from customers, like:

MichaelScott777 says:
```
💡 My playback is really choppy, and it takes forever for the video to load! why are you so slow (that’s what she said 😀)
```
TheShrute909 exclaims:

```
💡  Why is the video is so slow?!?!?!??!!?!? it takes the video 5 hours to show! help!!1
```

Your users are calling out that the playback experience is poor. There is a lot of buffering before the video starts to play.

So you start Googling around, and you discover that you can’t just upload the video; you need to encode it with different qualities, plus if you want to stream the videos, you also need to implement some specific protocols, and you start going down the rabbit hole: HLS, DASH, H.264, HEVC, AV1 and etc. “WHAT THE HELL IS ALL OF THIS?” you ask.

Then you stumble upon something that seems like salvation: [FFmpeg](https://ffmpeg.org/)! a video processing “Swiss knife” you hail in victory and pound yourself on the chest. You’ve made it. After several weeks of sleepless nights and 59.7 coffee cups later, it’s installed, it’s running, and magically does the job (you don’t really understand how completely, but it works).

thumbnail_solution.png

solution.png

Everything seems to run smoothly, but you are afraid to touch anything as you focus on your main product, and if you start messing around with the video monster again, you might sink more time into it. But then your users start to ask for more features around video:

CryptoKing001 is asking for this feature:

```
💡 Heellooo!, how can I know how many people watched my videos? <3 <3 <3
```


You grab your head in fear, and the anxiety builds up. You can’t sink in more resources into that video thing, and that 3rd party video player I’ve used doesn’t provide analytics (!!!!). So, you decide to outsource the whole thing, although you did have a limited budget setup for this project, so you go over budget.

The app seems to be running fine for a few weeks, and many users upload their videos daily. You check your monitors and discover that you are running out of disk space! the product is minutes from being down because of all of this video thing; eventually, it goes down, and you generate some bs message to your users about vertical scalability that they have no idea what you are talking about. Eventually, you rent more servers and add more disk space; the product is up again, but, again, you are way over budget already with that analytics stuff; now you have to pay more for space (argh!). At least you’ve evaded a disaster, but you get a new complaint:

obee1kanobeeeeeeeeeeeee writes:
```
💡 why the videos don’t play after I upload them???? I have to wait for 5 minutes before it plays. MY VIEWERS ARE COMPLAINING!!! FIX IT!!!
```

Your head is already missing half of the hair it used to have before you started the project, and now this?! 

You start investigating and find out that you have 100% CPU utilization on the video server; remember that magical salvation that you installed on the server: FFmpeg? now it gobbles up most of the CPU to encode the videos. So, you write another bs message to your users about encoding and some stuff you don’t even know about (and your users don’t even care), and you start sinking more money into the project. You buy more CPU and start scaling again.

Few months past. You don’t need to buy shampoo anymore (at least that’s a good thing, you can save some money), most of your attention has shifted into scaling these wretched video servers, you are now an expert in video encoding and delivery, but you are losing users as they have no interest in your product, as all of your investment and resources went into this video project black hole.  You’ve hired more engineers that are dedicated to doing the video project, and the budget for the video project already went out of control a long time ago.

small_I know kungfu.png

thumbnail_I know kungfu.png

I-know-kungfu.png

You look back and think, how did I end up here? what could I have done better? would it be better to go with AWS? or maybe there are other solutions I could have considered?

## The Perfect Solution

Like with any other service, reinventing the wheel would probably lead to huge financial implications, but as we’ve seen AWS is not perfect as well. However, there are APIs that can solve this problem by providing you with a scalable and easy-to-use service, like api.video.

- With api.video creating an upload scenario and even more is a matter of minutes.
- Much lower cost than AWS (check the cost calculator [here](https://api.video/pricing/aws/)) or DIY
- Scalable and reliable

Check out the [get started guide](https://docs.api.video/vod/get-started-in-5-minutes) to get started in 5 minutes with api.video

Should I build my video infrastructure from scratch?

Image should I build my video infrastructure from scratch

large_should I build my video infrastructure from scratch.png

medium_should I build my video infrastructure from scratch.png

small_should I build my video infrastructure from scratch.png

thumbnail_should I build my video infrastructure from scratch.png

should-I-build-my-video-infrastructure-from-scratch.png

Should I build my video infrastructure from scratch? Challenge accepted

large_Neda.jpg

medium_Neda.jpg

small_Neda.jpg

thumbnail_Neda.jpg

Neda.jpg

Neda Ashrafi Amiri

🌱 Our users wanted an easier way to migrate their videos to api.video. They didn't want to spend hours on the process and preferred a less technical solution. As a response to this feedback, we created a `video import tool` a few months ago.

🕰️ In a previous [blog post](https://api.video/blog/tutorials/switch-to-api-video-with-our-fast-easy-video-import-tool/), we introduced our tool for importing video content from popular providers such as `Dropbox` and `Vimeo` to api.video. Following a successful launch, we received requests from users to support additional providers. We were thrilled by the interest and worked to meet the demand, resulting in an expanded list of supported providers 📈

🔎 In this article, we'll explore some of the reasons why users switch to api.video and take a look at the latest updates to our import tool. For detailed demos and descriptions, please refer to our previous [blog post](https://api.video/blog/tutorials/switch-to-api-video-with-our-fast-easy-video-import-tool/).

## Why do our users switch to api.video 🕊️

Before we reveal the new supported providers, let's review some of the top reasons why users switch to api.video:

- Access to better customer support that's more available 📞
- Adaptive bitrate encoding at no cost 💰
- A developer-friendly API that allows for separate billings and projects for product builders with multiple customers 👨‍💻
- User security that meets the needs of educational website builders 🔒
- Branded and customizable player options for a more tailored video experience 🎬

These are just a few examples of why users choose our platform. Visit our [website](https://api.video) to learn more about how our API can benefit your business.

## Newly supported providers

🥁 Drum roll, please…  We're excited to announce that our video import tool now supports `Zoom`, `Amazon S3`, `Google Cloud Storage`, and `MUX,` in addition to the previously supported providers, `Dropbox` and `Vimeo`.

Import your videos from Dropbox, Vimeo or Amazon S3

small_13apr23.png

thumbnail_13apr23.png

13apr23.png

## Importing your videos A-Z

In this section, we will go through the 3 easy steps to complete your migration process from your provider of choice to api.video.

Let’s do this….

### 1. Before you get started

🎉 Great news! You don't have to be a tech wizard to switch to api.video with our video import tool. It's super easy and user-friendly! Here's all you need to get started:

👉 Basic computer skills

👉 A laptop, of course 💻

👉 An account with api.video (not a paid customer? No worries, you can [join for free](https://dashboard.api.video/register) without any commitments or credit cards)

👉 An account with one of the supported providers (e.g. Google Cloud Storage) with one or more videos uploaded to that account

### 2. Go to the `video import tool`

Here are several ways that you can access the video import tool:

🔑  Directly access the tool [here](https://import.api.video/)

🔑  Go to your [api.video](https://dashboard.api.video/overview) dashboard

### 3. Import your videos

a. First, create an [api.video](https://dashboard.api.video/register) account if you still need to do so.

b. Go to the video import tool using any of the links provided in step 2.

Import your videos with the Video Import Tool

large_screenshot-2023-04-12-at-13-24-08.png

medium_screenshot-2023-04-12-at-13-24-08.png

small_screenshot-2023-04-12-at-13-24-08.png

thumbnail_screenshot-2023-04-12-at-13-24-08.png

screenshot-2023-04-12-at-13-24-08.png

c. Select your provider from the list of options. In this example, we will select Google Cloud Storage. 

Select your video provider: Zoom, Amazon S3, Google Cloud Storage, or MUX.

large_screenshot-2023-04-12-at-13-24-25.png

medium_screenshot-2023-04-12-at-13-24-25.png

small_screenshot-2023-04-12-at-13-24-25.png

thumbnail_screenshot-2023-04-12-at-13-24-25.png

screenshot-2023-04-12-at-13-24-25.png

d. Each provider has its own way of authorizing access. For Google Cloud Storage, you'll need to sign in to both your api.video account and enter the name of your Storage bucket and granting the Import tool read access to your Google Cloud Storage bucket as described [here](https://import.api.video/doc/grant-read-access-to-your-google-cloud-storage-bucket). 

Each provider has its own way of authorizing access.

large_screenshot-2023-04-12-at-13-24-47.png

medium_screenshot-2023-04-12-at-13-24-47.png

small_screenshot-2023-04-12-at-13-24-47.png

thumbnail_screenshot-2023-04-12-at-13-24-47.png

screenshot-2023-04-12-at-13-24-47.png

e. After signing in, you'll be prompted to select the api.video project that you want to import your Google Cloud Storage videos to.

Select the api.video project that you want to import to

large_capture-d-ecran-2023-04-13-a-14-31-15.png

medium_capture-d-ecran-2023-04-13-a-14-31-15.png

small_capture-d-ecran-2023-04-13-a-14-31-15.png

thumbnail_capture-d-ecran-2023-04-13-a-14-31-15.png

capture-d-ecran-2023-04-13-a-14-31-15.png

f. Finally, select the videos you want to import from your provider and import them directly to api.video.

select the videos you want to import from your provider and import them directly to api.video.

large_capture-d-ecran-2023-04-13-a-14-31-42.png

medium_capture-d-ecran-2023-04-13-a-14-31-42.png

small_capture-d-ecran-2023-04-13-a-14-31-42.png

thumbnail_capture-d-ecran-2023-04-13-a-14-31-42.png

capture-d-ecran-2023-04-13-a-14-31-42.png

## Switch to api.video

api.video's updated import tool offers an easy and efficient way to migrate your videos to our developer-friendly platform. So if you're looking to switch to a video API that offers robust and powerful features, [sign up](https://dashboard.api.video/register) today and explore our range of tools and features to enhance your video product!

Switch to api.video in minutes: updates on our import tool

large_13apr23.png

medium_13apr23.png

Switch to api.video in minutes: Latest updates on our import tool

Android

thumbnail_thibault_rond.png

thibault_rond.png

Thibault Beyou

Dart

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

untitled-1.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

1680077433-untitled-3-copy.png

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

#### **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!

### **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:

### **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 _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

screenshot_20220411-112808.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

screenshot-2022-03-22-at-08-24-00.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

screenshot-2022-03-25-at-17-1-1.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`.

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](http://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, [subscribes](https://api.video/pricing) 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

Build your Flutter live streaming application

large_28mar23.png

medium_28mar23.png

small_28mar23.png

thumbnail_28mar23.png

28mar23.png

Player

small_api-video-romain-petit.png

thumbnail_api-video-romain-petit.png

api-video-romain-petit.png

Romain Petit

Swift

Have you already developed your own player, but find it challenging to switch to the api.video player?

We have a solution. In this tutorial, we will demonstrate how to play a video from api.video on your player.

## Before starting

Before you start, make sure that you have already uploaded at least one video to api.video. If you haven't done so yet, you can follow this [guide](https://docs.api.video/vod/upload-a-video-regular-upload) for assistance.

## Extensions

In this tutorial, we will discuss extensions. If you are not familiar with extensions, I will explain them briefly, but if you are, feel free to skip ahead.

Extensions enable you to add custom functionality to a code without altering the original implementation.

For example, let's say you have a struct named "Person" with "firstname" and "lastname" as properties. You can create an extension to retrieve their full name.

 ## Adding the api.video Swift player library

In this section, we will cover the two main steps involved in adding the api.video Swift player to your project:

1. Get the latest version by accessing it [here](https://github.com/apivideo/api.video-swift-player/releases).
2. Add the `ApiVideoPlayer` package to your app using one of the following methods:

    a. SPM:
	* In the Project Navigator, select your project.
	* Click on the "Package Dependencies" tab in the Project section.
	* Click the "+" button at the bottom.
	* Paste the URL below into the search bar in the top right.
	* Finally, click the "Add package" button.


  b. Cocoapods:
* Add the following to your Podfile.

## VideoOptions

Every video on api.video is assigned a unique identifier called the `videoId`, which can be found on the Dashboard or in the video list.

As you follow this tutorial, make sure to replace `YOUR_VIDEO_ID` with the actual `videoId` of your video.

If you are using private videos, it will be necessary to provide the private token as well.

A private token is an exclusive token that guarantees access to a specific private video, but it can be used only once.

## AVPlayer Extension

The api.video Swift Player provides an extension for playing new videos with AVPlayer:

If, for any reason, you encounter an error with the HLS stream, you can try again with an MP4 video.

To do this, you need to add an observer to your player and retry when the status fails:

Congrats, you did it; you can now play your video from [api.video](http://api.video) 🥳🥳🥳🥳

(!) To get info on failed mp4, feel free to add an else statement after the if 

## Explore more

With the Swift Player client, you are not limited to just replacing the `currentItem`.

It offers the flexibility to construct a player by using either UIKit or SwiftUI.

To explore this feature further, I suggest checking out this [article](https://api.video/blog/tutorials/how-to-add-an-api-video-swift-player-to-your-ios-application/) or the project on [GitHub](https://github.com/apivideo/api.video-swift-player).

Video on demand

Live streaming

Analytics

See all features

Online learning

Short-form videos

Marketplace & E-commerce

Video messaging and recording

Quick start guides

Documentation

Ecosystem catalog

Clients & SDKs

Community

Blog

Demos

Help center

Blog

Huge pricing update! Introducing video encoding at zero cost