Android

Normal

thumbnail_thibault_rond.png

thibault_rond.png

Thibault Beyou

Tutorials

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

large_28mar23.png

medium_28mar23.png

small_28mar23.png

thumbnail_28mar23.png

28mar23.png

Build your Flutter live streaming application with api.video

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

large_28mar23-copie.png

medium_28mar23-copie.png

small_28mar23-copie.png

thumbnail_28mar23-copie.png

28mar23-copie.png

Switch to api.video Swift player

swift

We have now released the Swift player! The Swift player helps you to playback your videos easily in your iOS and iPadOS applications.

In this tutorial we will see how to add the Swift player to your code.

The [Swift player package](https://github.com/apivideo/api.video-swift-player) allows you to use UIKit and SwiftUI to handle multi-platform projects.
The Swift player package is available on both Cocoapods and Swift Package Manager (SPM).

Before starting with this tutorial, make sure that you set your minimum target to iOS 13 and above.

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

small_capture-d-ecran-2023-03-16-a-16-15-48.png

thumbnail_capture-d-ecran-2023-03-16-a-16-15-48.png

capture-d-ecran-2023-03-16-a-16-15-48.png

## Upload video

Before starting to add the api.video Swift player to your application, you need to upload at least one video to your api.video account. If you haven't yet, see [how to upload a video](https://docs.api.video/docs/upload-a-video-regular-upload).

You'll need a video Id to use this component and play a video from api.video. To get yours, follow these steps:

1. [Log into your account](https://dashboard.api.video/login) or create one [here](https://dashboard.api.video/register).
2. Copy your API key (sandbox or production if you are subscribed to one of our [plans](https://api.video/pricing)).
3. Go to the official [api.video documentation](https://docs.api.video/docs).
4. Log into your account in the top right corner. If it's already done, make sure that it's the account you want to use.
5. Go to *API Reference* -> *Videos* -> *[List all videos](https://docs.api.video/reference/list-videos)*
6. On the right, be sure the *Authentication* section contains the API key you want to use.
7. Generate your upload token by clicking the *Try It!* button in the right section
8. Copy the *videoId* value of one of elements of the response in the right section.

Alternatively, you can find your video Id in the video details of your [dashboard](https://dashboard.api.video/).

## Add the api.video Swift player

In this section, we will go through the three main steps of adding the [api.video](http://api.video/) Swift player to your iOS application.

1. Get the latest version
    
    You can find it in the [release page](https://github.com/apivideo/api.video-swift-player/releases)
    
2. Add the `ApiVideoPlayer` package to your app with:
    1. SPM
        
        Add the following to your package.swift

2. Cocoapods
    
    add the following to your Podfile

Replace X.X.X with the latest version.

3. UIKit
    
    a. Import the package

(!) Replace “YOUR_VIDEO_ID” by your own videoId to display video

(!) Replace “YOUR_PRIVATE_TOKEN” by the private token of the video to display it.

c. To get all player events (optional)

d. Implement the player view in your view controller and add constraints.

4. SwiftUI
    
    a. Import the `ApiVideoPlayer` package

b. In your view you have to instantiate the player and the player events in the init method

(!) Replace “YOUR_VIDEO_ID” by your own videoId to display video

If you want to play private videos:

c. In the body you have to add the player with the specification you want

You will be able to use all the methods available externally, by calling player.methodName, for example :

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

large_api-video-swift-player.png

medium_api-video-swift-player.png

small_api-video-swift-player.png

thumbnail_api-video-swift-player.png

api-video-swift-player.png

How to add an api.video Swift player to your iOS application

live - create

API client

large_img_8063-min-1.jpg

medium_img_8063-min-1.jpg

small_img_8063-min-1.jpg

thumbnail_img_8063-min-1.jpg

img_8063-min-1.jpg

github-brands.svg

GitHub Yohann

5a22d420c9a5a7-416105621512231968826.png

LinkedIn Yohann

Yohann Martzolff

JavaScript

React Native

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

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

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.

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

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/post_live-streams).

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

How to build a live streaming app in 3 steps

Product updates

[api.video](https://api.video) removes the complexity from streaming video. Our simple to use APIs allow you to focus on creating your content -- leave the video streaming details to us.

Few months ago, we announced our [Android API client](https://github.com/apivideo/api.video-android-client), we are now happy to announce the release of our [iOS API client](https://github.com/apivideo/api.video-ios-client). We are replacing the iOS SDK to simplify api.video usages and deployment of the new version. It also provides support for [api.video progressive upload](https://api.video/progressive-upload). We will focus on the progressive upload part in another blog articles.

The [iOS API client](https://github.com/apivideo/api.video-ios-client) comes with:
* [documentation](https://github.com/apivideo/api.video-ios-client#documentation
* [sample code](https://github.com/apivideo/api.video-ios-client/tree/main/Example).

This article is a walkthrough to upload a file with [iOS API client](https://github.com/apivideo/api.video-ios-client).

## Installation
### Cocoapods

1.  Add the following entry to your `Podfile`:

2. Then run `pod install`

3. Import ApiVideoClient in every file you’d like to use [iOS API client](https://github.com/apivideo/api.video-ios-client).

### Carthage

1.  Add the following entry to your `Cartfile`:

2. Then run `carthage update`

3. Import ApiVideoClient in every file you’d like to use [iOS API client](https://github.com/apivideo/api.video-ios-client).

## iOS API configuration

To use the iOS API client, you first have to import the `ApiVideoClient`.

`ApiVideoClient` class provides static fields and methods to configure the iOS API client. You can set your API key, your environment (sandbox or production), chunk size,...

Set your API key with:


If you want to target the sandbox environment:

## Create a video file

If you haven't create a video on api.video, you have to create a video entry on api.video platform with:

Description of the fields of `VideoCreationPayload` is provided [here](https://github.com/apivideo/api.video-ios-client/blob/main/docs/VideoCreationPayload.md).

## Upload a video file

To upload a file, you will have to get the `URL` of your file. You can get it from the image picker component. Have a look at our a [sample code](https://github.com/apivideo/api.video-ios-client/tree/main/Example).


If you want to draw a progress bar that displays the upload progress, there is a `onProgressReady: ((Progress) -> Void)` parameter to the `upload` method.

## iOS API client capabilities

The [iOS API client](https://github.com/apivideo/api.video-ios-client) provides methods to perform every possible actions on the [api.video](https://api.video) API such as list videos (with filters), delete video, add/remove captions,...
If you are not familiar with [api.video](https://api.video) API, you should have a look on [api.video documentation documentation](https://docs.api.video/reference/overview). You will find the same concepts in the [iOS API client documentation](https://github.com/apivideo/api.video-ios-client#documentation). 

## iOS video uploader

If you want to develop an application that only uploads video files. You should have a look at the [iOS video uploader](https://github.com/apivideo/api.video-ios-uploader).

Don't hesitate to share your feedback on [our community](https://community.api.video/). Happy building!

medium_8cd3ef2e-d0ab-4465-86ae-624889fa945d.png

small_8cd3ef2e-d0ab-4465-86ae-624889fa945d.png

thumbnail_8cd3ef2e-d0ab-4465-86ae-624889fa945d.png

8cd3ef2e-d0ab-4465-86ae-624889fa945d.png

New iOS API client

Featured article

# api.video blog

Blog

Follow the api.video Blog to explore tutorials, video use cases, and learn about on-demand and live-streaming video updates.

IOS

Build your Flutter live streaming application with api.video

Switch to api.video Swift player

How to add an api.video Swift player to your iOS application

How to build a live streaming app in 3 steps

New iOS API client