Android

Video upload

Normal

thumbnail_thibault_rond.png

thibault_rond.png

Thibault Beyou

Tutorials

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?

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

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

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

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

## 1. Android Service

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

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

Nice!

There is another interesting part about the service:

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

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

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

small_untitled.png

thumbnail_untitled.png

untitled.png

Why am I talking about notifications? Because it would be nice to have a notification showing the upload's progress. Right? Like this:

small_untitled-1.png

thumbnail_untitled-1.png

untitled-1.png

So, if your application requires uploading files to [api.video](https://api.video/), the solution would be to call the `upload` API from an Android Service.

I have an excellent news for you: **the [Android API client](https://github.com/apivideo/api.video-android-client) and the [Android video uploader](https://github.com/apivideo/api.video-android-uploader) comes with a fully customizable Service whose purpose is to upload files, called UploadService.**

## 2. api.video UploadService

The UploadService is the easiest way to upload video files to [api.video](http://api.video) on Android.
It supports:

- upload with video id
- upload with upload token
- progressive upload
- progress notification of the upload of the current file
- success notification
- error notification
- multiple uploads: it uploads files from an internal queue
- cancel the upload of a specific file or all files

Here is a small video to show how it’s used in the [‣ example](https://github.com/apivideo/api.video-android-uploader/tree/main/examples/service):

### UploadService notification customization

The UploadService comes with many levels of notification customization:

- Notification color and icon
- Notification messages
- Notification itself. You can choose not to display progress or to display the name of the file currently being uploaded. For example, notifications could have a Stop button.

To customize the UploadService, the first step is to extend the UploadService:

If you have a closer look at the UploadService constructor, you will notice that you can change the notification icon and color with:

To have more controls over the notification, you can override `onUploadProgressNotification`, `onUploadErrorNotification`, `onUploadStartedNotification`, `onUploadCancelledNotification`, `onUploadSuccessNotification`, `onLastUploadNotification`.

There is a solution for each of your requirements!

### Implementation

As with every service, you have to declare it in the `AndroidManifest.xml`

As the UploadService is a Foreground Service (a special type of service), you also have to add:

Nice. We are almost done. You have to start it and bind it. Fortunately, there is a static API to simplify its usage:

As startService binds your application to the UploadService, you must call UploadService.unbindService when your application is put to background.

Once you have access to the service, you can call upload API for a video id

## Conclusion

With the UploadService, uploading a video to [api.video](http://api.video) has never been this easy! For a complete example with the UploadService, check out the [‣ example](https://github.com/apivideo/api.video-android-uploader/tree/main/examples/service).

And we're done! To start building right now, check out our **[docs](https://docs.api.video/docs)**
and **[sign up for a free account](https://dashboard.api.video/register)**

large_blog-thibault-article.png

medium_blog-thibault-article.png

small_blog-thibault-article.png

thumbnail_blog-thibault-article.png

blog-thibault-article.png

How to easily upload videos on your Android app with an Android Service?

Player SDK

video create

Video list

Player

Mobile

thumbnail_mathieu_round-1.png

mathieu_round-1.png

github-brands.svg

Github Mathieu Thiry

linkedin_logo_initials.png

LinkedIn Mathieu Thiry

Mathieu Thiry

React

Typescript

Next.js

This tutorial will show how quick and straightforward it is to build a TikTok clone as a progressive web app (PWA) with [api.video](https://api.video) and Next.js. A PWA is a website that looks and behaves like a mobile app. It can have all the capabilities of a native mobile app, like design and functionality, and you can even install it on your phone!

TikTok’s core functionality is to create and share short-form content. So today, we will focus on these crucial features:
- **Get** videos with [@api.video-node.js-client](https://github.com/apivideo/api.video-nodejs-client) package
- **Display** videos with [@api.video/react-player](https://github.com/apivideo/api.video-react-player) package
- **Upload** videos with [@api.video-typescript-uploader](https://github.com/apivideo/api.video-typescript-uploader) package
    
Thanks to these 3 easy-to-use api.video tools, you will have everything you need to build a **smooth scrolling** TikTok feed. Let's start 🎬
    

*NB: You can see the demo [here](https://api-video-tiktok-demo.vercel.app) and the complete code [here](https://github.com/apivideo/tiktok_clone). We invite you to clone the project, insert your free-to-use API key from our Sandbox environment and start testing it with your videos!*

Screenshot TikTok demo on desktop screen size

large_cover_image_tiktok_clone.png

medium_cover_image_tiktok_clone.png

small_cover_image_tiktok_clone.png

thumbnail_cover_image_tiktok_clone.png

cover_image_tiktok_clone.png

## Quick Setup

As in this tutorial, we will focus on the core features. We provide two links on how to start the project easily: 

We created a dedicated [tutorial](https://github.com/apivideo/Next.js_Starters-) on building a **new Next.js application** using Create Next App and Typescript. Please follow these [instructions](https://github.com/apivideo/Next.js_Starters-) to get an up-to-date Next.js app.

1. Transform the Next.js app into a PWA with [next-pwa](https://www.npmjs.com/package/next-pwa). Complete all steps with this article [here](https://blog.avneesh.tech/how-to-create-a-pwa-with-nextjs).
2. Once inside our project, install api.video’s [Node.js client](https://github.com/apivideo/api.video-nodejs-client), [typescript video uploader](https://www.npmjs.com/package/@api.video/video-uploader), [react’s player SDK](https://www.npmjs.com/package/@api.video/react-player), and [swr](https://www.npmjs.com/package/swr) for data fetching.

## Get videos

## Back-end: **Create API routes with api.video/nodejs-client**

You can declare the API under the `pages/api` directory. When you declare a file or folder inside `pages/api`, it will generate an URL endpoint that matches `/api/<folder>/<file>`. We set our API key in an environment variable in the `.env.local` file for security.

Now create a `pages/api/videos/index.ts` file. Inside this file, add the following code:

We can get videos in just a few lines of code by applying the method `list`. Check more methods you can use with our *nodejs* client [here](https://github.com/apivideo/api.video-nodejs-client/blob/main/doc/api/VideosApi.md#list).

### Front-end: Client-side data fetching

**Initialize swr**

[useSWR](https://swr.vercel.app/docs/getting-started) is a React Hook library made by Vercel. It fetches data from an API or other external source, then saves that data in a cache and renders the data. We configure swr in `_app.tsx`.

The useSWR hook takes two parameters and returns data. It accepts the following:

- A `Key`: API URL we are calling.
- A `fetcher`: a function that returns the fetched data.

We call `useSWR` hook. Once we get the result, we store data in the state `videos`. Then, we  `map` videos around  `VideoComponent`, whose role is to display videos.

### How to create smooth scrolling

thumbnail_screenshot_mobile.png

screenshot_mobile.png

The app has a `height: 100vh`. It has 2 sections. The first one, the div `app__video`, is scrollable with a `height: calc(100%-50px)`, and the second one, the upload section, has a fixed `height: 50px`.

**CSS scroll snap**

As written above, the class `app__videos` has the property `scroll-snap-type: y mandatory;` and  `overflow-y: scroll;` making the scroll vertical. This property allows for the creation of well-controlled scroll experiences by declaring a scroll snapping position, in our case, at the `start` of the video. To obtain this perfect result, we just need to add the property `scroll-snap-align: start` to the child component, here the `ApiVideoPlayer` *(see code in the section below.)*

## Display videos

We are going to use [api.video react player component](https://github.com/apivideo/api.video-react-player), which allows us to display our videos in just a few lines of code. The only requirement is to pass the `videoId`. Create a `ref` to manipulate methods like `pause` or `play` easily. We set the `object-fit` CSS property in `cover` to ensure that even a landscape video will take the full size.

## Upload a video

[api.video](http://api.video) provides a [typescript library](https://www.npmjs.com/package/@api.video/video-uploader) to upload videos to api.video using delegated upload token. The easiest way to create an upload token is to open your api.video’s dashboard, go to the upload tokens section from the sidebar, then click on the “*Create upload token*” button. Find the full guide [here](https://docs.api.video/docs/create-and-manage-tokens-for-delegated-uploads).

**Upload using delegated upload token**

We create a hidden input with a type `file` that we activate programmatically. Create a new object `VideoUploader`, and add two options, the `upload token` set as an environment variable for security purposes and the current `file` to upload.

That’s it. You are done 🎉. Now you can safely and efficiently upload videos.

## Conclusion

We recreated TikTok thanks to api.video’s features in just a few steps. We did not cover every topic, but the entire code is available [here](https://github.com/apivideo/tiktok_clone).

And we're done! To start building right now, check out our **[docs](https://docs.api.video/docs)** and **[sign up for a free account](https://dashboard.api.video/register)**.

***BONUS***

In this part, I will explain how **to send** 💟’s

Each video object has a `metadata` property containing an array of key-value objects. So we can add a ‘*likes*’ metadata with a numeric value and increase this value when the user has pressed on the 🤍 icon!

To record the new data, we need to update the video by making an API call 

Note: Find a full description of the upload method [here](https://github.com/apivideo/api.video-nodejs-client/blob/main/doc/api/VideosApi.md#update). 

large_cover-tiktok-s-clone.png

medium_cover-tiktok-s-clone.png

small_cover-tiktok-s-clone.png

thumbnail_cover-tiktok-s-clone.png

cover-tiktok-s-clone.png

Build your own TikTok with PWA and api.video

SDKs and libraries

small_olivier.png

thumbnail_olivier.png

olivier.png

Olivier Lando

JavaScript

In this tutorial, we'll see how to build a Loom-like web application using the JS library we've just released: [@api.video/media-stream-composer](https://github.com/apivideo/api.video-typescript-media-stream-composer).

## **Presentation**

### **The Loom tool**

For those who do not know the Loom tool, here is the description that can be found on their site:

> Loom is a video messaging tool that helps you get your message across through instantly shareable videos.
> 
> 
> With Loom, you can record your camera, microphone, and desktop simultaneously. Your video is then instantly available to share through Loom's patented technology.
> 

Here we will create a simplified version of Loom, which will incorporate its main functionality, namely uploading videos from a screencast with the user's webcam overlaid as a rounded thumbnail.

### **The @api.video/media-stream-composer JS library**

The [@api.video/media-stream-composer](https://github.com/apivideo/api.video-typescript-media-stream-composer) aims to simplify handling video streams in browsers.

Here are its main features:

- generated a video stream composed of several video streams available in browsers (webcams, screen recording)
- easily generate & upload this video stream to [api.video](https://api.video/) using api.video's progressive upload feature
- let the user interact with the stream composition on the fly (by moving/resizing each base stream or drawing in the result stream)

The library can be easily included in any web page or added as a dependency to a project, for example, in a React.js application. For more information, feel free to check out the [readme](https://github.com/apivideo/api.video-typescript-media-stream-composer) on GitHub.

### **What it will look like**

What we will build will take the form of a simple web page where the user will have to choose the screen window he wants to save.

Then this window will be displayed on the web page with the webcam in superposition. It will be possible to move and resize the webcam view.

A button will allow you to start and stop the recording. Once the recording is finished, a link to the uploaded video will be displayed.

large_screenshot.jpg

medium_screenshot.jpg

small_screenshot.jpg

thumbnail_screenshot.jpg

screenshot.jpg

## Prerequisites

The only things you’ll need are:

- a text editor
- an [api.video](http://api.video) account - you can easily create a free sandbox account by going here: [https://dashboard.api.video/register](https://dashboard.api.video/register).

## **Let’s do it!**

### **Page layout**

The first step will be to write the HTML code of the web page. It will be very straightforward since it will contain only the following elements:

- a div container that will contain the preview of the recording
- 2 buttons to start and stop the recording
- a select input to choose the mouse tool: move/resize or drawing
- a text holder for the video link

This is what it looks like:

### **The @api.video/media-stream-composer library**

### **Initialization**

Let's get serious! The first step here is to include the script of the library. To do this, we'll add the following in the `<head>` tag of the page:

Fine, the script is now included; we can now add some JS code to initialize the library. To keep it simple for this tutorial, all the JS code will be directly included in the HTML page.

Let's add the following before the closing `</body>` tag:

In this snippet, we create the `MediaStreamComposer` instance. The `MediaStreamComposer` is a class that will allow us to compose a video stream from several video streams available in browsers.

Then, we append the canvas created by the `MediaStreamComposer` to the `#canvas-container` div. By doing so, the video stream will be displayed on the web page, and the user will be able to interact with it.

We can add our video streams now that we have initialized our library.

### **Adding video streams**

We will add two streams to our composition:

- a screencast of the user's screen in the background
- a webcam stream in a rounded thumbnail in the bottom left corner

Adding a stream is done with the `addStream()` method. It takes 2 parameters: the MediaStream, and the settings object specifying how the stream should be displayed.

First, we have to request the browser to give us the streams. This is done with the `navigator.mediaDevices.getUserMedia()` & `navigator.mediaDevices.getDisplayMedia()` methods.

Now that we have the streams, we can add them to the composer.

Done! The streams are now added to the composer, and the video stream is displayed on the web page. We can now configure the drawing tool.

### **Drawing tool**

The drawing tool is a simple pen that will allow the user to draw on the video stream. It can be configured using the `setDrawingSettings()` method as follow:

Nice! We're almost done. The last step is to add some buttons & inputs to the web page so the user can interact with it.

### **User interactions**

To simplify the task, we will first create constants containing references to the buttons & inputs.

We can now bind the events to the buttons & inputs.

*The `start` button*

When the user clicks on the `start` button, we can call the `MediaStreamComposer` to start recording. We will use the `startRecording()` method. This method takes an `uploadToken` as a parameter. An upload token is a unique identifier that will be used to upload the video to api.video. You can create a new upload token using the API or directly from the api.video dashboard.

*The `stop` button*

When the user clicks on the `stop` button, we will call the `stopRecording()` method. This method returns a Promise that will be resolved when the recording is stopped. The Promise's value is an object containing the details about the uploaded video. We will retrieve the video URL from the object and display it in the `video-link` element.

*The `tool-select` select*

This select box will allow the user to select the action performed when the user clicks on the video stream. It can be either "drawing" or "moving / resizing a stream". Choosing a tool is done by calling the `setMouseTool()` method.

## **To go further...**

The media stream composer library allows you to do many other things, like selecting a different audio source from the video streams, or adding static images to your composition (to display a logo for example). For more information, feel free to check the readme on the github repo.

## **Conclusion**

You have seen how easy and fast it is to create this application using the @api.video/media-stream-composer library.

The full code is available in the repo of the library on GitHub here: [examples/screencast-webcam.html](https://github.com/apivideo/api.video-typescript-media-stream-composer/blob/main/examples/screencast-webcam.html).

You can see the demo live at [https://record.a.video/screencast-webcam.html](https://record.a.video/screencast-webcam.html).

To see a more complex example, in action, look at [https://record.a.video](https://record.a.video/). You'll be able to test almost all the features of the library in action.

large_build-your-own-loom.png

medium_build-your-own-loom.png

small_build-your-own-loom.png

thumbnail_build-your-own-loom.png

build-your-own-loom.png

Build a Loom-like app with just a few lines of code

Delegated Upload

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 Yohann

5a22d420c9a5a7-416105621512231968826.png

LinkedIn Yohann

Yohann Martzolff

NodeJS

Uploading a video to [api.video](http://api.video) can be done in several ways: 

- **API:** make calls to get the mandatory information such as access token, create your fully customized video container, and finally upload your video file 🧑‍💻.
It’s the most secure way to upload, but it requires a backend to hide sensitive data and several API calls. Even though it’s easy, customizable, and reliable, you may need a faster way to do this.
- **TypeScript uploader:** [api.video](http://api.video) provides a [TypeScript uploader](https://www.npmjs.com/package/@api.video/video-uploader) that allows you to upload video directly to your workspace without calling the API. You can even choose between three upload methods 🤩!
Don’t forget you still have to implement a UI for your uploader if it’s not already done!
- **React upload button:** a few weeks ago, we quietly released the first version of our [React upload button on NPM.js](https://www.npmjs.com/package/@api.video/react-upload-button).
This new package allows you to display a fully customizable button in your application in less than a minute!
Today, we will see together how to get mandatory information from a Node backend to use this React component without exposing any sensitive data 🔒.

## **Prerequisites**

- [React](https://reactjs.org/docs/getting-started.html) and [NodeJS](https://nodejs.org/en/) knowledge
- For the simplicity of this example, we’ll use [Next.js](https://nextjs.org/), a React framework that provides an already implemented Node server. Basic knowledge of it can help you go through this tutorial.

Remember that any Node backend will work to get information, as seen in this article.

## Get started

You need an [api.video](http://api.video) account to work with our API and our packages.

[**Create a free one or log into yours just here.**](https://dashboard.api.video/login)

## 1. Create a new Next.js application

From your command line, run one of the below commands:

Once completed, open your new Next.js application in your favorite IDE and run it:

large_screenshot-2022-05-23-at-10-30-25.png

medium_screenshot-2022-05-23-at-10-30-25.png

small_screenshot-2022-05-23-at-10-30-25.png

thumbnail_screenshot-2022-05-23-at-10-30-25.png

screenshot-2022-05-23-at-10-30-25.png

## 2. Get the required packages

To complete this tutorial, we’ll need two [api.video](http://api.video) packages 🛠️

- **NodeJS client package:** to access the API with ease
- **React upload button:** to upload our videos

From your application root, run this command:

## 3. Create a .env.development file

Create a `.env.development` file at the root of your application and store two environment variables in it:

- The **Next.js public API host:** to access the implemented Node.js API from Next
- Your **API key value:** to instantiate the Node.js client from api.video

You can find your API key in the **[API keys section of the api.video dashboard](https://dashboard.api.video/apikeys)**.

large_image-3-1.png

medium_image-3-1.png

small_image-3-1.png

thumbnail_image-3-1.png

image-3-1.png

⚠️ You need to **restart your application** each time you’ve made changes in your .env.development. Otherwise, you cannot access new environment values.

## 4. Create your API endpoint

In this part, we want to create **one API endpoint** that allows us to make **two actions**:

- **Retrieve** our upload tokens list
- **Create** one if needed

To do this, we will differentiate the calls to this endpoint by HTTP methods:

- **GET** to retrieve our upload tokens list
- **POST** to create one upload token

Create a new file under the `/pages/api` directory in your application and name it `uploadTokens.ts`

thumbnail_screenshot-2022-05-23-at-11-26-11.png

screenshot-2022-05-23-at-11-26-11.png

### Retrieve your upload tokens list

In your brand new `uploadTokens.ts` file, create your endpoint and the method to retrieve your upload tokens list. Copy and paste the code below:

*[Find the official documentation for the upload tokens list method here.](https://github.com/apivideo/api.video-nodejs-client/blob/main/doc/api/UploadTokensApi.md#list---list-all-active-upload-tokens)*

### Create a new upload token

We may need to generate a new upload token if we don’t have any available.
Add the creation method in your `uploadTokens.ts` file:

*[Find the official documentation for the upload token createToken method here.](https://github.com/apivideo/api.video-nodejs-client/blob/main/doc/api/UploadTokensApi.md#createtoken---generate-an-upload-token)*

## 5. Call your API

Now we can **retrieve our upload tokens list** and **generate a new one** on demand. We’ll see how to make it happens from the **front end.**

Let’s clean our Home component 🧹
Go to your `pages/index.tsx` file and modify it:

Now our app is nice and clean, let’s implement our logic in 2 steps:

- We want to check if we have any available upload tokens from our upload tokens list.
- If we do not have any upload token, we want to create one.

### Set your upload token

Create a new method that calls your API endpoint `uploadTokens` to retrieve your list, and create one if the list is empty. You should call it in a useEffect inside your Home component:

Call the method in a useEffect inside your Home component:

## 6. Click. It’s magic! 🧚

Already? 😱

Everything should work well now. Click on the displayed button in your application and choose a file to upload to your [api.video](http://api.video) workspace.

large_screenshot-2022-05-23-at-16-04-10.png

medium_screenshot-2022-05-23-at-16-04-10.png

small_screenshot-2022-05-23-at-16-04-10.png

thumbnail_screenshot-2022-05-23-at-16-04-10.png

screenshot-2022-05-23-at-16-04-10.png

## 7. Customize your upload button 💅

You can customize multiple things to make your upload button unique:

- CSS: make it looks the way you want
- Progress event: trigger a callback on upload progress
- Success event: trigger a callback on upload success
- Error event: trigger a callback on upload error

**[Check our complete list of examples for inspiration](https://codesandbox.io/s/great-shtern-0ck5eo?file=/src/App.tsx)** 🧘

backend.svg

How to upload a video with React and NodeJS

Video Status

doug.jpg

twitter-brands.svg

Doug Twitter

Doug Sillars


Here at [api.video](https://api.video), we love making video delivery easy for our customers. We take care of doing all the video transcoding and [video streaming](https://api.video/streaming/) so that you can focus on all the other facets of your product. Using our APIs (and our SDKs) is a straightforward and easy way to add video to your service. In this post, we’ll walk through the steps to create a website where you can upload videos.

> Note: Use NodeJS in the middle results in a "double upload" - the video is uploaded to the Node server - then to api.video.  You can avoid this with a [delegated token](https://api.video/blog/endpoints/delegated-upload) and our [JS library](https://api.video/blog/tutorials/new-video-uploader-javascript-library).

You can also check out our API reference documentation here: [API Reference documentation](https://docs.api.video/reference/overview)

## Overall Architecture

![Overall architecture api.video](https://cdn-images-1.medium.com/max/800/1*Vje7Cz76uC0VTHLkrAmGFQ.png)

1.  Starting with a web form, a video is submitted to the Node server.
2.  The video is immediately uploaded to api.video for processing
3.  api.video acknowledges the video upload, returns the videoId, and begins encoding the video.
4.  The node server polls api.video to obtain the playable status (confirming that encoding is completed).
5.  As long as the result is “false”, the polling continues.
6.  When the video is playable, the Node server returns a page with the video. The video autoplays to show that the video is ready to play. The page also returns the timings for upload & for video processing.
7.  The video link is e-mailed to the user (optional).

### Getting Started

### Node & Dependencies

There are a number of required Node dependencies:

``` 
npm install express dotenv @api.video/nodejs-sdk fs pug serve-favicon formidable email-validator
```

This tutorial also optionally connects to Intercom to send emails to your users. This will require:

``` 
npm install intercom-client
```

### Building the Site

### Starting index.js

You can clone the GitHub repository to follow along, but here is the code that builds your video uploader:

In the src/index.js file, copy the following code:

In this snippet, Node imports Express (and dotenv for environmental variables). The first big chunk of code creates and sets up an express app. It will use Pug to build the views. Static files are saved in the ‘public/’ directory, and serve-favicon adds the favicon to the site. You can use the default favicon in the public directory on GitHub, or create your own.

Next we have app.get — on the default entry point of the site. If a request occurs at the “/upload-demo” directory of the web server, we’ll deliver the start.pug file that is saved in the views directory.

Finally, the app listens on port 3000 for requests. If you run npm start from the terminal, you should get a response of “Example app listening on port 3000!” You can now enter “localhost:3000/upload-demo” into your browser, and if you have added the views directory — you’ll see the form. If you have not yet added the view, you’ll probably get an error.

### Start.pug

The landing page is simply an introductory text describing the upload and a form to select the file. This page is created with Pug. Pug is really persnickety about indentation spaces, so it might be best to copy the code (or just use the code) from GitHub rather than copy and paste from this post.

In the head tag, we load some CSS and the favicon.

medium_capture-d-ecran-2020-07-29-a-16-54-48.png

small_capture-d-ecran-2020-07-29-a-16-54-48.png

thumbnail_capture-d-ecran-2020-07-29-a-16-54-48.png

capture-d-ecran-2020-07-29-a-16-54-48.png

The body loads descriptive text on api.video, and the submission form. The form takes 4 inputs: video name, e-mail, true/false mp4 support and the video file. You may notice that the form action will reload the root directory of the server. Since the data submission is a POST, it will be easy to identify the 2nd request.

### POST Form Processing

Add these additional lines to the index.js. At the top of the file, we need to add dependencies:

api.video is our backend where uploaded videos are transcoded into video streams. We add the SDK, and then I store my API key in a .env file. I have added the .env file to my .[gitignore](https://git-scm.com/docs/gitignore) file so that when I post my code on GitHub, my key is not uploaded and remains secure.

We also add formidable to read the form data and save the video locally on the Node server. The e-mail validator does what it sounds like it might do, and finally I add three variables to measure how quickly the service handles the video processing.

In the body of index.js, add the following:

We are now building the POST response. Formidable saves the video in the directory specified in the .env variable videoDir (this doesn’t have to be private, but it is nice to save all configurable variables in one place). When the upload requests mp4 support, the variable must be a boolean, so we use the string from the response to create the corresponding boolean value. The email validator validates the email, and if the email is valid  -  we use production credentials at api.video (permanent video hosting). If there is no e-mail, or it is not valid, the video is instead processed in the Sandbox, meaning that it will be watermarked & deleted after 24 hours. For your use — you probably just want to post to production, so you can simplify this logic.

Finally, we begin the upload of the video to api.video (and capture the time of the upload start).

If you try to run this code now, it will hang — we are not yet listening for the response from api.video. However, adding:

```
console.log(result);
```

Will show the JSON response from api.video:

The videoID is important to display and playback the video, as are the assets. We also can see useful metadata about the video — Mp4Support, Panoramic, public/private, etc. Note that there is no mp4 url — the video must be encoded to receive that url, so we’ll grab it later.

### Video Upload Response

After the “let result = client.videos.upload(files.source.path, {title: fields.title, mp4Support: mp4Support});” paste in the lines below.

We listen for the result from the upload. This allows us to mark upload completed (to measure the elapsed upload time). If the video has successfully been uploaded to api.video, we now have 2 copies of the video: one on the node server, and the other at api.video. Fs.unlink deletes the file on the node server. The JSON response gives us the videoId at api.video, and links to the iframe and player video urls (which we assign to variables). The mp4 url is only presented in this response when encoding is finished.

Even though we have the urls to the videos, they have not been processed yet. To determine if the video is playable, we call the videoStatus function. This sends a request to api.video to obtain the video status. The response is a JSON with lots of details about upload status, file size, and metadata like the dimensions and bitrate (you can learn more about these parameters in the [documentation](https://docs.api.video/reference/get-video-status)):

Reading the videoStats.encoding.playable value tells us if it is ready to play or not. If it is not ready, we call videoStatus again recursively until we get the affirmative response. When we receive that ‘playable’ is true (as in the example above), the function can then query for the MP4 url, and return the view to the user: return res.render(‘video’, {iframe, player, uploadSeconds,processSeconds});

This means that video.pug will be displayed to the end user with some variables (the urls of the video, and timings on upload and processing). We’ll discuss that view in the next section.

### Displaying the Video

The Video.pug file is a simple html file that simply adds an iframe for the video, and reports the elapsed times for upload and processing of the video. The variables are ensconced in #{} tags. One other interesting thing to note is adding #autoplay to the url tells the video player to autoplay the video (you can also add #loop to loop the video).

And there we have it, a working video upload tool, where the response page shows the encoded video, along with the time for upload and for processing! Pretty cool!



medium_1uie4dyqvwgeeyfd3visag.jpg

small_1uie4dyqvwgeeyfd3visag.jpg

thumbnail_1uie4dyqvwgeeyfd3visag.jpg

1uie4dyqvwgeeyfd3visag.jpg

### Optional Step: Email integration

In the video upload response section, there is a line of code that calls the intercom integration:

We first create a lead (or a contact) inside Intercom. This will come back with an id that uniquely IDs the user. If the email address already exists, Intercom returns an error message that says “There is already a user with the id=<idnumber>.” So, if the user already exists, we can parse the error message to grab the user id.

Then we can add a tag to Intercom to show that the user has used the video upload tool, and we send an email to the user’s email address with links to the videos, and the time it took to upload and process the videos. The text of the email is right in the code, so easy to modify.


### Update (2022)
	
We have a new version of a video uploader that uses a delegated token. It is live at [upload.a.video](https://upload.a.video), and you can read a post on [delegated token upload](https://api.video/blog/tutorials/uploading-large-files-with-javascript). Delegated tokens remove the "double upload" to Node and then to api.video: videos are directly uploaded to api.video.
	
	
### Conclusion

We’ve built a video uploader using Node.js and api.video. The easy to build tool now gives us the ability to easily share our videos across our internet properties. Using Node and api.video, the entire process creates an easy to use interface to take regular videos, and convert them into video streams. If this tutorial has inspired you (or if you have any questions), let us know by posting in our [community forum](https://community.api.video/). 

medium_githubsocialnodejs.png

small_githubsocialnodejs.png

thumbnail_githubsocialnodejs.png

githubsocialnodejs.png

Building a video upload demo with Node.js and api.video

medium_screen-shot-2021-01-26-at-11-48-47-am.jpg

small_screen-shot-2021-01-26-at-11-48-47-am.jpg

thumbnail_screen-shot-2021-01-26-at-11-48-47-am.jpg

screen-shot-2021-01-26-at-11-48-47-am.jpg

Erikka Innes

Python

Today we'll walk through how to use the Python client to do a progressive upload for a video. Progressive uploads are great for large videos. We recommend choosing this type of upload if your video is 200MB or greater.

## Prerequisites

* Sign up for an api.video account - [https://dashboard.api.video/register](https://dashboard.api.video/register) 
* Set up a virtual environment for your project (optional)
* Install the api.video Python client - `pip install api.video`
* Get a video file that's 200MB or greater (you can use a smaller one to see how it works, but it should be at least around 50MB) 

## Code sample 
Here's our code sample for today: 

In this sample we do the following: 

1. Set up the API client.
2. Create a container for our video with a payload containing our video metadata. 
3. Retrieve the video ID from the new container we made.
4. Create a session to handle our progressive video upload using the video ID we retrieved.
5. Set the chunk size we want to use. This value will be used to create chunks of this size. It's set to a smaller number so you can demo with a smaller video. If you want to upload something bigger, you might want to use a bigger number for each chunk.
6. Set up a method that handles breaking the video into chunks of data.
7. Set up a progressive video uploader. Of note - you have to take each chunk of data and save it as a clearly numbered part. For example chunk_file.part.1, chunk_file.part.2. End the files with part.* so that the api.video server can figure out the chronological order for each chunk of video. Also of note - you must signal that you're uploading the last chunk of video with the session.uploadLastPart() method. Otherwise, the api.video servers cannot determine if you're still uploading or not, so your upload will fail. You also have to open your file after saving it, using 'rb' or read binary. 

## Conclusion
If you want to try this upload without the client, see the [article about how to do a progressive upload with just Python](https://api.video/blog/tutorials/progressively-upload-large-video-files-without-compromising-on-speed).

Happy coding!

Progressive uploads with the api.video Python client

[](https://)If you work with video, you know that when you have a gigantic video file, you must break it into chunks to send it to the server. We at api.video already offer a way for you to break up your video into chunks and send it to us, but today we are introducing a new way of uploading large files: [Progressive Upload](https://api.video/progressive-upload).

Instead of spending time worrying about getting the bytes right for the header, or relying on our API clients to handle it for you (still a great choice if you have a client in use) you can simplify the header for a chunk to be about what part of your video you're sending. Here's an example of what I mean:

Old header: 
`Content-Range: bytes 0-1000000/200000000`

Here you can see the Content-Range header shows the bytes being sent from the video and then the total number of bytes. But there's a couple of issues with this. First, it's tricky setting up the header correctly (which makes the clients great to use since they handle this for you) and second, what if you want to upload a video where you don't know its size? It'd also be great if you could upload video chunks concurrently and have that handled for you. Progressive Upload does this, and the new header looks like this: 

New header:
`Content-Range: part 1/*`

Every video chunk just receives a part number. The only video chunk that can be smaller than 5MB is the last chunk. Everything else must be larger. And with this explained, we're ready to prepare and try a code sample. 

## Prerequisites
For this project, you'll need:

* (Optional) Familiarity with other ways to upload (it might make this tutorial easier, but this is written so you don't need the other tutorials)
* An api.video account, you can sign up [here](https://dashboard.api.video/register)
* Python or a Python virtual environment to work with (recommended)
* Requests library for Python installed 

## Progressive Upload code sample 
The code sample we're going to walk through looks like this:

In the code sample, you're doing the following things: 

1. Retrieving a token using your API key. 

2. Setting up a video container to upload to. You upload in two parts - first you create a container with metadata about your video. Then you retrieve the videoID for your video container, and reference it so you can upload your chunks to the right container. You can only upload once to a container, so make sure you have everything set up correctly. Otherwise you'll have to start over with a new container. 

3. We set a variable **CHUNK_SIZE** to represent the size of each chunk of video we'll send. You can make this bigger if you like to speed up the process. 

4. We write a little function **read_in_chunks** that breaks a chunk of data off our video file to send, then remembers the spot it was in so when we come back to the function again, it gives us the next chunk of data. This is accomplished by using **yield** in the function.

5. In the **upload** function, we get ready to loop through our video file, sending a chunk of data each time with the appropriately labeled header. For Content-Range we just increase the part number by 1 each time, and leave it set as unknown, like: `part 1/*` If you know your video size ahead of time, you can change the asterisk to the final part number. This code sample assumes you don't know the size. What you do per chunk is check if it's smaller than 5 MB, since this will signify we've reached the final piece of the video. For this last piece of video, we change the total number of parts to match the part we're on. This signals to api.video that we aren't going to send any more chunks and that the upload is complete. 

And we're done!
To start building right now, check our [docs](https://docs.api.video/reference/post_videos-videoid-source) and [sign up for a free account](https://dashboard.api.video/register).