Normal

small_t02cw29ka-u04jtt0jcg3-549047173ac2-512.jpeg

thumbnail_t02cw29ka-u04jtt0jcg3-549047173ac2-512.jpeg

t02cw29ka-u04jtt0jcg3-549047173ac2-512.jpeg

Artem Matinian

Tutorials

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/docs/get-started-in-5-minutes) to get started in 5 minutes with api.video

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_20190712_201317.jpg

medium_20190712_201317.jpg

small_20190712_201317.jpg

thumbnail_20190712_201317.jpg

20190712_201317.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 📞
- More cost-effective pricing plans for businesses 💰
- 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!

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

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

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

large_28feb23-1.png

medium_28feb23-1.png

small_28feb23-1.png

thumbnail_28feb23-1.png

28feb23-1.png

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

next.js

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

Next.js

Typescript

React

There’s no doubt that Next.js is a leading solution for creating a full-stack web application. Some of the biggest and finest companies around the world are using this React framework such as Twitch, Nike, and Notion.

On October 2022, Vercel released one of its biggest updates in a brand new version: Next.js 13. This new release ships React 18 with it and some big new features. 

*Read the full [Next.js 13](https://nextjs.org/blog/next-13) / [React 18](https://reactjs.org/blog/2022/03/29/react-v18.html) release notes to learn more.*

Let’s see how we can manage videos in a Next.js 13 and React 18 web application with [api.video](http://api.video) 🧘🏽‍♂️

## Create a Next.js 13 application 🚀

If you already have a Next.js project with a version under 13, you can upgrade it to v13 by [following this guide](https://nextjs.org/docs/upgrading). To keep this article simple, we will create a new application.

1. Run one of the following commands in a new terminal and follow the command prompts

We will name our brand new application videos_app. We will use TypeScript, ESLint (not mandatory), the src/ directory, and the app/ directory (since there is a new V13 feature available). 
Don’t configure any alias yet.

large_screenshot-2023-02-07-at-16-30-34.png

medium_screenshot-2023-02-07-at-16-30-34.png

small_screenshot-2023-02-07-at-16-30-34.png

thumbnail_screenshot-2023-02-07-at-16-30-34.png

screenshot-2023-02-07-at-16-30-34.png

3. Check it out on [`http://localhost:3000`](http://localhost:3000/) and edit `src/app/page.tsx` to see the updated result in your browser.
Next.js 13 introduces the `app/` directory that can be used pretty much as the `pages/` directory. [More information available on their documentation.](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app)

Everything is working fine? Good job! 🎉

💡 *Too long for you? Create a video-ready Next.js app with all api.video tools already installed in seconds with our official Next.js boilerplate! Read our short tutorial [here](https://api.video/blog/tutorials/api-video-next-js-boilerplate-start-your-video-project-the-easy-way)* 🤓

## Our video application structure 🏗️

Our goal here is to build a basic but fully operational video application. To do so, we will divide it into 3 pages:

- Our landing page to upload a video ⬆️
- A player view where you can playback a video 📺
- A videos list view where all of your videos will be displayed 🏄🏽‍♂️

Next.js provides a perfect navigation and page system that will help us build our project easily.

## Get your API key 🔑

To be able to upload and playback videos from [api.video](http://api.video), create and customize video players, and do many more things, you need an API key.
Get it from your [dashboard](https://dashboard.api.video/login) or [create a free account](https://dashboard.api.video/register) (yes, it’s free, really).

## A minimal layout first 💅🏽

The goal of this tutorial is to make a working video app without any great design.
But we need a minimal layout: top navigation, and a little CSS to keep things readable.
We will also create a loading component that is automatically displayed while the content of a route segment loads 😲

1. Replace your `src/app/layout.tsx` code with the following one.

Next.js 13 `app` directory allows you to declare layout globally (root layout) and for specific pages (nested layouts). The `src/app/layout.tsx` file also replaces the previous `pages/_app.js` and `pages/_document.js`. *[Read more about it here.](https://beta.nextjs.org/docs/routing/pages-and-layouts#layouts)*

2. Create a new file `src/app/loading.tsx` and add a simple component.

In Next.js 13, a `loading.[tsx,js]` file in the `app` directory is globally and automatically used by your whole application for loading state. How great it is! *[Read more about it here.](https://beta.nextjs.org/docs/data-fetching/streaming-and-suspense)*

## Upload a video with Next.js 13 ⬆️

In this section, we will create a page that allows a user to select a video file and upload it to [api.video](http://api.video).

We will keep this view as our home page, the `src/app/page.tsx` file.

1. We need to use the [api.video TypeScript video uploader](https://github.com/apivideo/api.video-typescript-uploader#readme) package to upload a video to your project. Install it by running one of the following commands

As you can see, you will need an upload token to upload a new video. You can create and find yours [here](https://dashboard.api.video/upload-tokens).

⚠️ *You can also decide to use an API key or an access token in the TypeScript video uploader, but it’s strongly discouraged because you’re exposing sensitive information*

Few things to notice here:

- `'use client'` : By default, the app directory’s components are [server components](https://beta.nextjs.org/docs/rendering/server-and-client-components). These components are great for rendering non-interactive content. 
However, if you want to allow client interaction in your component (React hooks, event listeners, browser-only APIs), you need to add the `'use client'` directive at the top of your component file.
- Next `<Link />` component: In Next.js 13, you don’t need to pass a `<a>` tag as children to the Link component.
- `onProgress` and `onPlayable` events: our TypeScript video uploader allows you to track upload progress whenever the uploaded video is playable.

Congratulations! You now have implemented a video upload solution into a Next.js application 👏🏽
Pretty easy right? Let’s move on to the next part: display your video list.

## Display a videos list with Next.js 13 🏄🏽

You can now upload videos to your [api.video](http://api.video) project. You can [watch and edit them through your dashboard](https://dashboard.api.video/videos). You can also implement this feature in your application. Let’s implement it together 🧑🏽‍💻

1. We need to use the [api.video Node.js client](https://github.com/apivideo/api.video-nodejs-client) to access our videos. Install it by running one of the following commands

2. Create a new videos directory under src/app/ and create a page.tsx file in it.
In Next.js 13, pages that are created under the app directory need to be named page.[tsx,js]. Read more about it here.

thumbnail_screenshot-2023-02-08-at-11-12-11.png

screenshot-2023-02-08-at-11-12-11.png

3. Edit your new src/app/videos/page.tsx file with the following code

This component is a perfect example of a Server Component. Instead of using Next.js `api` directory or `getServerSideProps` to fetch our videos from [api.video](http://api.video), we can directly do this from our component.

Congratulations! You displayed all your videos in seconds 🏎️

## Playback a video with Next.js 13 📺

In any application, a video needs a container to be played, which is often called a player. In our video app, we will use the [api.video React player](https://github.com/apivideo/api.video-react-player) to playback our videos.

We want to access and playback a video in two different ways:

- Once a new video is uploaded and playable, we want to display a player in the same view to playback it directly.
- If we go through our videos list, each item is a clickable link that redirects us to the video view, and thus the player.
1. Install the React player package by running one of the following commands

2. Replace your src/app/page.tsx (the uploader page) code with the one bellow

Tutorials

Should I build my video infrastructure from scratch? Challenge accepted

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

Build your Flutter live streaming application with api.video

Switch to api.video Swift player

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

How to create a Next.js 13 & React 18 video app

Switch your existing Android player to api.video

api.video Next.js boilerplate: start your video project the easy way

Switch to api.video with our fast & easy video import tool

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