Player SDK

video create

Video list

Video upload

Player

Mobile

Normal

thumbnail_mathieu_round-1.png

mathieu_round-1.png

github-brands.svg

Github Mathieu Thiry

linkedin_logo_initials.png

LinkedIn Mathieu Thiry

Mathieu Thiry

Tutorials

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

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

Sometimes you just want to upload a smaller piece of a video you have, but you don't want to take the time to edit it with FFMPEG or FinalCut Pro. If you just need a shorter clip and you know the start and end timecode, you can use api.video's clip feature. Today we'll walk through how to upload a clip from a video you have on your computer and how to take a clip from an online, publicly available mp4 link or a video you have stored with api.video.

## # Pre-requisites 

For this tutorial, you will need: 

* api.video account - [Sign up here](https://dashboard.api.video/register)
* api.video Python client - [Python client](https://github.com/apivideo/api.video-python-client)
* A video you can upload a clip from

## Installation 

Install api.video's Python client with `pip install api.video` 

## Code sample for uploading a clip from a video on your computer
Our code sample today is this:

### Video clip code walkthrough

What we'll be doing is a normal video upload. If you're new to uploads, with api.video it's a two step process. First you create a video container with all your metadata, and in this case, you'll also include the information needed to clip your video. Then you retrieve the video ID and use that to upload your video into the container. In this case, you will upload just the video clip into the container. When you're done, you'll have a new, shortened clip to display. 

1. First initialize the client and VideoApi and connect.

`client = apivideo.AuthenticatedApiClient("your API key here")

client.connect()

videos_api = VideosApi(client)`

2. Prepare the video payload with metadata that you'll use as the container. 

`video_create_payload = {
    "title": "My sample clip from a new source",
    "description": "test",
    "clip": {
        "start_timecode": "1",
        "end_timecode": "2",
    },
}`

3. Send a request with your payload to create the new video container, and retrieve the video ID. 

` response = videos_api.create(video_create_payload)
print("Video Container", response)

video_id = response["video_id"] `

4. Now it's time to upload your video. Open your video file in binary to get it ready to send, then send a request to upload it.

` file = open("test_vid45.mp4", "rb") 
video_response = videos_api.upload(video_id, file)

print("Uploaded Video", video_response)`

You can check your dashboard to see that you've successfully uploaded a short video clip! 

## Upload a clip from a link or video source

To take a clip from an online .mp4 link or a video source you have with api.video is easier than the process we just walked through. All you need to do is create a video and the clip will be created for you. If you use a link, make sure it's a .mp4 link. You can't, for example, grab a YouTube link and get a clip from that. 

If you're uploading a clip from an online .mp4 source, you specify the complete link, as a string for the **source** parameter. And if you're uploading a clip from a video you have stored with api.video, you can specify the **video ID** for the video you want to grab a clip from. 

In the example, I've put an .mp4 link in for the source. You don't need to do the second step that we did in the earlier walkthrough. Everything is handled with one call to the api.video API. 

## Conclusion 

Video clipping is great in situations where you wanted to grab one or more clips from a longer video, or you just wanted to edit a bit of content off the front and end of your video clip. Now, it's possible to do with the api.video API. Find all the information in [our Docs](https://docs.api.video/reference/post-video) (in the "Body params" section) or ask questions in [our Community](https://community.api.video/). Happy building!

large_clipping.png

medium_clipping.png

small_clipping.png

thumbnail_clipping.png

clipping.png

How to create a video clip with api.video

The first step to displaying your video online is getting it uploaded. Today we'll go over how to upload a video using Laravel 8 with api.video's PHP Client. Before we dive in, let's go over what we'll be doing when we upload a video. 

Uploading a video is a two step process. First, we create a container for the video and retrieve the video ID. Then, we upload a video into the container by referencing the ID. You can only upload a video to a container once, but you can modify details about the video at any time after that. Our uploader will let you add a title, description and list whether you want to have the video be public or private and whether you want to offer an MP4 link of the video for download. 

## What you'll need 
To get started, make sure you have these things:

* Account with api.video - you can sign up [here](https://dashboard.api.video/register)
* Laravel 8 - you can use other versions, but some things work differently
* NPM and node.js - you install these when you set up Laravel 
* Composer - you'll need this installed 
* [api.video PHP client](https://github.com/apivideo/php-api-client)
* Project repository - [https://github.com/apivideo/php-api-client/tree/main/examples/laravel/video_upload](https://github.com/apivideo/php-api-client/tree/main/examples/laravel/video_upload)

You can also review the API reference documentation for the endpoints used in this project: 
* [Create a video](https://docs.api.video/reference/post-video)
* [Upload a video](https://docs.api.video/reference/post_videos-videoid-source)

## Create your project
The first thing you'll need is a Laravel 8 project to work with. Here's what I did:

1. In a terminal make a new project by typing: **laravel new fileuploader** or similar project name.
2. Open your project folder, you'll need to install a few things.  
3. You'll need to add the api.video PHP client, so at the terminal type: **composer require api-video/php-api-client** 
4. You'll also need the symfony http client, at the terminal type: 
**composer require symfony/http-client**
5. And the last thing to add is nyholm/psr7:
**composer require nyholm/psr7**

You can type **composer update** to make sure everything is pulled in to your project and configured.
 
## Create a controller
We will need a controller for our video uploader, so let's go ahead and do that now. In the terminal in your project folder type: 

**php artisan make:controller UploadController** 

This will automatically create what we need to start building the controller. 

## Set up the home page with an upload form
For this walkthrough, we're using the home page to create an upload form. So in your views folder, go into **home.blade.php** and create the form. I selected to allow the user to add basic details about their project. I'm also using bootstrap, so the basic form looks like this: 

Image of upload form showing available fields

large_viduploadphp.png

medium_viduploadphp.png

small_viduploadphp.png

thumbnail_viduploadphp.png

viduploadphp.png

And here is the code that creates this form: 

We pull in the bootstrap details up top under the Scripts and Styles sections. Then for our form, we have all the form data sent in a POST request to the '/upload' route. (We'll need to create that route in a moment.) 

The form is straightforward - we list the type of data as text for the name of the file and the description of the file. For choosing whether the file will be public or offer an MP4 for download, we use a radio button, so the type is radio. For the video, we choose type file and then we set up our submit button. Bootstrap styles everything for us, so we're all set here. Now we need to handle the route. 

## Set up the /upload route
Open your **web.php** file and add a new route: 

**Route::post('/upload', 'UploadController@upload');** 

This route indicates that when submit is clicked in the form, it should go to /upload and carry out the upload instructions listed for the UploadController. 

We don't have that set up yet, so let's do that next. Also, the other routes are added into the project, you can see everything if you download the repository.

## Set up your UploadController
Our controller takes the details provided by the form, then uploads the content to api.video. Behind the scenes, we're going to need our api.video API key, so let's make sure we handle it securely. 

1. Go to your .env file. In the top section, you'll see items to do with your app. At the bottom of the list of items beginning **APP_** you'll see **APP_APIVIDEO=yourapikey**. Replace **yourapikey** with your key (retrieve it from your api.video dashboard). Don't add quotes. 
2. Open **RouteServiceProvider.php**.
3. In the file, take the commenting **\\** off of the line **protected $namespace = 'App\\Http\\Controllers';**. This returns the use of the automatic namespace, which is handy.
4. Open **UploadController.php**. 
5. Add this code: 


In our code, we set up the api.video client and collect the information from the request object that comes in from the form. We check if the data for the radio buttons is set and if it is, we add it to our payload for upload. Then we send the data and redirect the user to a page that says 'Success!' 

## Conclusion
These are the basics for uploading a video to api.video. You can try using different styles or set ups if you want to allow users to add more metadata on upload. If you have any questions or suggestions, please share them on our [community forum](https://community.api.video/). Thanks for reading! 



Upload a video with Laravel

webhooks

doug.jpg

twitter-brands.svg

Doug Twitter

Doug Sillars

JavaScript

NodeJS

When our API has completed a video upload, the response contains all of the URLs you will need for playback:


```
"assets": {
          "iframe": "<iframe src=\"https://embed.api.video/vod/vi4blUQJFrYWbaG44NChkH27\" width=\"100%\" height=\"100%\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"\"></iframe>",
          "player": "https://embed.api.video/vod/vi4blUQJFrYWbaG44NChkH27",
          "hls": "https://cdn.api.video/vod/vi4blUQJFrYWbaG44NChkH27/hls/manifest.m3u8",
          "thumbnail": "https://cdn.api.video/vod/vi4blUQJFrYWbaG44NChkH27/thumbnail.jpg",
          "mp4": "https://cdn.api.video/vod/vi4blUQJFrYWbaG44NChkH27/mp4/1080/source.mp4"
      },

```

Of course - the video has only **just** finished uploading. It needs to be transcoded into a video stream for playback. If you try to open the player URL, you'll get an error saying the video is not ready yet.

It's just like a false start in a race - you're ready to go - and you want to show the video to your users, but you show the link too soon - and it doesn't work. Disappointing all around. :(

You can see this for yourself at [upload.a.video](https://upload.a.video).  Upload a large file, and then click the "watch here" link. If you're fast enough, you'll get the error. (Our encoding keeps getting faster though!!)

"task failed successfully" windows "error"

small_windowserrorremixt.jpeg

thumbnail_windowserrorremixt.jpeg

windowserrorremixt.jpeg

## No more errors

No one wants to see an error. And we want to show off your new video to everyone ASAP. In order to ensure that the video is ready to playback (and avoid the false start), we can use api.video's [webhooks](https://docs.api.video/reference/post-webhooks).  More specifically, we're interested in the ```video.encoding.quality.completed``` notification.

The response for this notification looks something like:

```
{ "type": "video.encoding.quality.completed", 
"emittedAt": "2021-01-29T16:46:25.217+01:00",
"videoId": "viXXXXXXXX", 
"encoding": "hls",
"quality": "720p"}
```

For each video uploaded, you'll get a webhook alert for each version of the video created. This adds a new wrinkle (or a new feature) to how we can display the video:




medium_quote-admiral-farragaut-upon-entering-mobile-bay-damn-the-torpedos-full-speed-ahead-david-farragut-143-46-25.jpeg

small_quote-admiral-farragaut-upon-entering-mobile-bay-damn-the-torpedos-full-speed-ahead-david-farragut-143-46-25.jpeg

thumbnail_quote-admiral-farragaut-upon-entering-mobile-bay-damn-the-torpedos-full-speed-ahead-david-farragut-143-46-25.jpeg

quote-admiral-farragaut-upon-entering-mobile-bay-damn-the-torpedos-full-speed-ahead-david-farragut-143-46-25.jpeg


* **As fast as possible (and damn the torpedoes!)**: Each video size is released as soon as it is encoded. Since the 240p video is the smallest video (in terms of pixels and KB), it is typically the first video encoded.  With this option, as soon as the 240p version of the video is encoded - play the video.  The downside is of course that the quality at 240p is less than ideal on most screens.


thumbnail_keep-calm-and-wait-for-it-400-400-black-white.jpeg

keep-calm-and-wait-for-it-400-400-black-white.jpeg


* **Wait for the nicest version**:  Only release the video when the 1080p version is released.  That way, you know that your viewers will have the best quality experience (but being a much larger video - it may take more time).



large_firstroundggk3mslrlqqobv3sv1vagoldilocks-hires.jpeg

medium_firstroundggk3mslrlqqobv3sv1vagoldilocks-hires.jpeg

small_firstroundggk3mslrlqqobv3sv1vagoldilocks-hires.jpeg

thumbnail_firstroundggk3mslrlqqobv3sv1vagoldilocks-hires.jpeg

firstroundggk3mslrlqqobv3sv1vagoldilocks-hires.jpeg

* **Goldilocks**:  Find the balance in the middle: not too fast/not too slow.  Not the lowest quality/not the highest quality. Perhaps the 480p version of the video is a good balance point: it'll look OK, won't take too long, and the 720p 1080p/4k versions are not far behind.

## Implementing your webhook

You can test this integration at [upload.a.video/webhook](https://upload.a.video/webhook).  

First we register a webhook at api.video to report to: upload.a.video/receive_webhooks

Then we add this code to process the webhook result when it arrives:

```
app.post("/receive_webhook", function (request, response) {
	console.log("new video event from api.video");

	//we're only getting video.encoding.quality.completed right now.. but let's be careful in case the webhook changes

	if (type =="video.encoding.quality.completed"){
	  let videoId = body.videoId;
	  let encoding = body.encoding;
	  let quality = body.quality;
	  liveStreamId = body.liveStreamId;
	  webhookResponse = {"event":type, 
	  					"emittedAt": emittedAt, 
						"videoId":videoId,
						"encoding":encoding,
						"quality": quality
						}
	  
	} 
	webhooks.push(webhookResponse);
	response.sendStatus(200);  
  });

```

This endpoint takes the webhook and adds it to an array.

## Video upload page

We've made 2 changes to the video upload page:

### Add an encoding selector

We add a selector in the form to allow to you pick the level of encoding you desire to release the video.  By default, we've selected 720p - on the higher end of things.

### Change how the video url is displayed

When the video is uploaded, the earlier versions of the upload demos just added the link to the video (the false start!).  We'll change the JavaScript on the page to do two things:

1.  Update the page that the video is being encoded, and the URL will be available shortly.
2.  Call the webhook endpoint to find out when the video encoding is completed.

```
console.log(video);
					videoId = video.videoId;
					playerUrl = video.assets.player;
					//we have the video URL, but it miight not be encoded yet. We need to get the webhook confirmation

					//STEP 1 tell them upload complete
					//hack to make the math look good.  yeah. i know.
					document.getElementById("chunk-information").innerHTML = "Last chunk"  + " is " + "100" + "% uploaded. Total uploaded: " + "100" +"%";
					document.getElementById("video-information").innerHTML = "all uploaded! We're now waiting for the server to tell us that the encoding is ready to play." ;
					//step 2 - start a new request for the webhook:
					var oReq = new XMLHttpRequest();


					oReq.open("POST", '/webhook', true);
					var qualityJson = {"quality":videoQuality,
										"videoId": videoId};
					console.log(qualityJson);
					var qualityJsonstring = JSON.stringify(qualityJson);
					oReq.onload = function (oEvent) {
						//encoding at selected quality is completed - tell the customer!!!
						console.log("Video encoded! Watch here: ",playerUrl ) ;
						document.getElementById("video-information").innerHTML = "Your Video has been encoded and is <a href=\'" + playerUrl +"\' target=\'_blank\'>ready to watch!</a>" ;
					}
					//send the quality value and the videoId we want to check on...
					oReq.send(qualityJsonstring);


```

So now the webpage is waiting for the Node JS server to say "hey the video encoding you are looking for is ready."

### Node JS code to check encoding versions

Recall that the webhook is writing every videoId and encoded version into an array. So we can just cycle through that array every 2 seconds to see if there is a video with the videoId and the encoding quality present. Once the webhook adds the video/quality - this will read that it is ready, and then reply back to the website that it is safe to show the URL to the user:


```
app.post('/webhook',(req,res) =>{
	var reqBody = JSON.parse(req.body);

	//video uploaded -but check to see if the 
	var videoId = reqBody.videoId;
	var videoQuality  = reqBody.quality;
	console.log("received  " + videoId + " " +videoQuality);
	//we need to see if this videoId and qulity have been encoded.
	//loop through all the webhook responses
	
	function checkWebhook(videoId, videoQuality, webhooks){
		foundMatch = false;
		console.log("there are " + webhooks.length + " webhook entries to scan");
		
		
		for(var i=0;i<webhooks.length;i++){
				if(webhooks[i].videoId === videoId && webhooks[i].quality === videoQuality){
					//we have a match!!
					foundMatch = true;
					res.sendStatus(200); 				

				}
			//}
		}
		if(!foundMatch){
			//no match yet, so wait 2 seconds and try again
			//not encoded yet, wait 2 sec and re-reun checkMp4
			console.log("no webhook yet.");
			setTimeout(checkWebhook,2000,videoId, videoQuality, webhooks);
		}
	}
	checkWebhook(videoId, videoQuality, webhooks);

})

```

## Conclusion

That's all there is to it. Instead of just showing the URL immediately after upload, we wait until the webhook tells us that the video is ready for playback. We can then provide the URL to our users (including the person who uploaded the video), and the link works - with "please wait while the video encodes" message.

Try it out at [upload.a.video/webhook](https://upload.a.video/webhook), and then use the code on [Github](https://github.com/apivideo/uploadavideoApps) to create your own webhook alerting function for videos.

If you have any questions or suggestions, please share them on our [community forum](https://community.api.video). If you dont' have an api.video account yet, you can create on in just a few moments by following [this link](https://dashboard.api.video/register). Happy building! 

small_false-start1959569i.jpeg

thumbnail_false-start1959569i.jpeg

false-start1959569i.jpeg

False start: showing the video playback url before the video is ready

User generated content (UGC) can be an incredible addition to your application or website. Your users generate videos, and upload them to share with other users, creating a cascading effect that increases the number of videos on your platform.

In the past, we've looked at [video moderation](https://api.video/blog/tutorials/automated-video-moderation) to protect you from inappropriate UGC. In this post, we'll look at mitigation strategies to limit the NUMBER of videos one user might upload. (Go [here](https://docs.api.video/reference/post-video) to check out the API reference documentation for uploading videos.)

## Overwhelming video content

Your user might just be enthusiastic about our platform, or perhaps they have nefarious reasons - but they are just uploading too many videos! Perhaps you just want the videos to stop - so you could ban or cancel the user's account.  But perhaps the videos are still welcome, they just need to slow down a bit.

In this post, we'll add a rate limiting step to upload.a.video/JS.html. This page uses our [JS uploader](https://api.video/blog/tutorials/new-video-uploader-javascript-library) to simplify video uploads.

## Defining the rate limit

On our Node backend, we add the "express-rate-limit" library, and initialize it to allow for 5 uploads an hour:

```
//rate limiting code
//rate limiting to protect the demos
const rateLimit = require("express-rate-limit");
app.use(
	rateLimit({
	  windowMs:  60 * 60 * 1000, // 1 hour duration in milliseconds
	  max: 5,
	  message: "You exceeded 5 requests in 1 hour.",
	  headers: true,
	})
  );

```

We set the window for the rate limit to be one hour, and the maximum number of calls to be 5.

Now, the upload code does not use the NodeJS backend, so I created a dummy endpoint on the nodeJS server called "/ratelimit"

```
//this applies the ratelimit to all uploads.  Limit to 5 per hour
app.get('/ratelimit',(req,res)=>{
	console.log("rate limiting test");
	res.sendStatus(200);
});
```

Now we can make dummy calls to upload.a.video/ratelimit to trigger the rate limit in our JavaScript code.

## Uploading in the browser

When the form changes, the EventListener fires.  Previously, the video would begin uploading.  Now, we make a call to the "/ratelimit" endpoint to see if we can commence the upload:

```
 input.addEventListener('change', () => {
		console.log("upload commencing");

		//adding in rate limiting to prevent abuse
		var qReq = new XMLHttpRequest();
		qReq.open("GET", "/ratelimit");
		qReq.onload = function (oEvent) {

			console.log(qReq.status);
				//once we create the video id do stuff
				if(qReq.status == 429){
					//rate limited
					document.getElementById("chunk-information").innerHTML = "Your uploads have been rate limited. We allow 5 uploads/hour with this demo app. Please try again in a bit."
				}
				else{
					//upload the first chunk to get the videoId
					//its ok to upload the video, we are not rate limited
					uploadFile(input.files[0]);
		
				}
		}
		qReq.send();

```

If the user has uploaded 5 videos in the last hour, the endpoint will return HTTP 429, and we update the website to tell the user that they have been rate limited.

small_429.jpeg

thumbnail_429.jpeg

429.jpeg

If the user is below the rate limit threshold, the rate limit endpoint will return HTTP 200.  Since we have passed the rate limit 'test' we call the uploadFile function that uploads the video.

small_200.jpeg

thumbnail_200.jpeg

200.jpeg

We genuinely hope that your UGC application will be successful, and one of the ways to ensure success is to allow UGC, but to lightly restrict how UGC can be added. Rate limiting is one of these light restrictions that you can implement to keep the content flowing, but to keep the pace of the content uploads a *bit* more manageable.

If you have any questions or suggestions, please share them on our [community forum](https://community.api.video/). If you don't have an api.video account yet, you can create one in just a few seconds [here](https://dashboard.api.video/register). Thanks for reading! 



large_stop-jpeg.jpeg

medium_stop-jpeg.jpeg

small_stop-jpeg.jpeg

thumbnail_stop-jpeg.jpeg

stop-jpeg.jpeg

Adding rate limits to your video uploader

## Migrating your videos to api.video from another video provider like Vimeo

If you are launching a new service with video - starting up with api.video is easy - you can just start adding your videos with our API, and everything works great.

But, many of our customers have video content stored elsewhere.  They’d rather not support 2 video services, and begin looking at migration options for their videos from <old service> to api.video.  In this post, we will walk through the steps to copy any video source url to api.video.  In this case, we will use the Vimeo API to show how to access the source URL from Vimeo.

> if you are planning a large video migration from Vimeo (or any other provider), please give us a heads up so that we can ensure we have enough video encoding resources for our other customers.  


##  Getting the source url from Vimeo

To upload your videos to api.video, you’ll need to get the source urls. In this example, we’ll use Vimeo as the example provider, but many other video providers provide similar access.  

Using the Vimeo API, you’ll need to authenticate with a method that allows for [private data](https://developer.vimeo.com/api/authentication#understanding-auth-workflows), and then access the video endpoint for the video you’d like to transfer.  The [response of the query](https://developer.vimeo.com/api/reference/responses/video) will include a series of video links. 

There is a version for each encoding of the video.  In most cases, you’ll want the ```source``` url, as your original file is of the highest quality of the versions available.  Now that you have the source URL of your video at Vimeo, you are ready to transfer the file to api.video.

But, before you go ahead and do that, you might want to also access any other data you might want to bring across to api.video.  This could include the ```public_name```, ```description```, any ```metadata``` you might have saved, the ```pictures.uri``` of the poster image, and any ```tags``` you might have associated with the video.

## Create your video at api.video.

Now that you have a URL for the video, and all the metadata you might want to add to your ‘new’ video, we’re ready to [create a video](https://docs.api.video/reference/post-video) at api.video.  This endpoint requires a [token](https://docs.api.video/reference/post_auth-api-key), but if you are using one of our [SDKs](https://docs.api.video/docs), all you need is your API key.

When uploading a video, you’d first create the video, and then upload the file in a second step. But, we have a URL, so you can add the video source to the create API, and the video will be transferred asynchronously with just one API call.

When you create a video, you supply the ```source``` url to begin the upload, but you can also populate the ```title```, ``` description```, ```metadata``` and ```tag``` attributes straight from the data you extracted from your previous video provider.  

Once you call the create endpoint, the API call will return the videoId of your new api.video video.  You can now make a second call to the [upload a thumbnail](https://docs.api.video/reference/post_videos-videoid-thumbnail) endpoint with the videoId and url of the thumbnail.  This will ensure that the poster for your video is exactly the same as it was with your previous video provider.

That’s all there is to it!  You’ve now moved your first video from Vimeo to api.video, and you can automate the entire process for the migration.

## Conclusion

If you have a URL for your video’s source, you can automate the migration of your videos from your current video provider to api.video.  With just a few simple API calls, you can have all of your videos transferred to api.video with just a few calls for each video.


medium_migratory-birds-birds-migratory-bird-flock-of-birds.jpeg

small_migratory-birds-birds-migratory-bird-flock-of-birds.jpeg

thumbnail_migratory-birds-birds-migratory-bird-flock-of-birds.jpeg

migratory-birds-birds-migratory-bird-flock-of-birds.jpeg

Migrating your videos to api.video

Delegated Upload

Uploading a video to api.video just got easier!

We have created a [JavaScript uploader](https://docs.api.video/docs/video-uploader) script to abstract this code into a single function - allowing you to focus on your code and making the video upload process easier for you and your development team!


## JS Uploader Widget

You can read about uploading a video in the [tutorial](https://api.video/blog/tutorials/uploading-large-files-with-javascript) describing the code. The JS Uploader widget abstracts the file slice, creating all of the headers, and uploading the files - it also adds retries for segments that have issues!

The new code for uploading is under 30 lines, and most of that is for updating the page during the upload.

First, we add the script to the head (with a defer tag to not slow page load)

```
   <script src="https://unpkg.com/@api.video/video-uploader" defer></script>

```
Next we have a event listener for changes in the file upload form:

```
     input.addEventListener('change', () => {
       console.log("upload commencing");
       uploadFile(input.files[0]);
       function uploadFile(files) {
           const uploader = new VideoUploader({
               file: input.files[0],
               //changed to sandbox, because we cannot have nice things
               uploadToken: "to5PoOjCz98FdLGnsrFflnYo",
               chunkSize: 1024*1024*10, // 10MB
               retries: 10
           });
           uploader.onProgress((event) => {
               var percentComplete = Math.round(event.currentChunkUploadedBytes / event.chunksBytes * 100);
               var totalPercentComplete = Math.round(event.uploadedBytes / event.totalBytes * 100);
               document.getElementById("chunk-information").innerHTML = "Chunk # " + event.currentChunk + " is " + percentComplete + "% uploaded. Total uploaded: " + totalPercentComplete +"%";
           })
           uploader.upload()
               .then((video) => {
                   console.log(video);
                   playerUrl = video.assets.player;
                   console.log("all uploaded! Watch here: ",playerUrl ) ;
                   document.getElementById("video-information").innerHTML = "all uploaded! Watch the video <a href=\'" + playerUrl +"\' target=\'_blank\'>here</a>" ;
               });
       }
     });

```

### Walking through the code

The uploadFile function takes the files and creates an uploader function:

```
 const uploader = new VideoUploader({
               file: input.files[0],
               //changed to sandbox, because we cannot have nice things
               uploadToken: "to5PoOjCz98FdLGnsrFflnYo",
               chunkSize: 1024*1024*10, // 10MB
               retries: 10
           });

```

The chunkSize defaults to 50MB, but I have lowered this to 10MB for the sake of the demo, so you can see multiple chunks uploaded.

The retry count defaults to 5.  

#### During Upload

```
 uploader.onProgress((event) => {
               var percentComplete = Math.round(event.currentChunkUploadedBytes / event.chunksBytes * 100);
               var totalPercentComplete = Math.round(event.uploadedBytes / event.totalBytes * 100);
               document.getElementById("chunk-information").innerHTML = "Chunk # " + event.currentChunk + " is " + percentComplete + "% uploaded. Total uploaded: " + totalPercentComplete +"%";
           })


```

The onProgress updates the video upload every 50ms.  We calculate the % uploaded, and update the browser - so the user is aware that the video upload is underway.

#### Upload complete

When the video upload is complete, the API will reply with the videoId, and links to the video. We take this information to display the url to the user:

```
           uploader.upload()
               .then((video) => {
                   console.log(video);
                   playerUrl = video.assets.player;
                   console.log("all uploaded! Watch here: ",playerUrl ) ;
                   document.getElementById("video-information").innerHTML = "all uploaded! Watch the video <a href=\'" + playerUrl +"\' target=\'_blank\'>here</a>" ;
               });

```


## Conclusion

The new JS video uploader widget weighs in at just 11.5 KB, and as it is not required until after the page loads, will not impact your page speed (as long as you use the defer tag).

It will make building video upload widgets in JavaScript easier, as we've abstracted all the complexity into the library - allowing you to focus on your application, and not on the intricacies of partial uploads of video files.

Read all of the [technical details](https://docs.api.video/docs/video-uploader) in our documentation, and [get started](https://dashboard.api.video/register) with your video app uploads today!


large_new-video-uploader-javascript-library.png

medium_new-video-uploader-javascript-library.png

small_new-video-uploader-javascript-library.png

thumbnail_new-video-uploader-javascript-library.png

new-video-uploader-javascript-library.png

New video uploader JavaScript library

Authenticate

You've prepared the perfect ad copy for your business, but now you're trying to figure out how you can personalize the ad for each business. One great way to do that would be to use a voice over tool that allows you to customize the content based on the location of your customers. Fortunately, this is available! By combining api.video with aflorithmic.ai's voice over this problem is easy to solve. 

## Imagine, if you will, that you own a pizza chain

To make this fun, let's imagine you are the owner of a popular pizza chain - Renzo's pizza chain. You have fifty different outlets and you've prepared the perfect ad: 

--Insert video here-- 

This ad is great for one of your locations, but you want people near all of your restaurants to know they can eat the best pizza for the least dough. For each location, you'd like to run this ad, but have it play information that tells the listener the city, address, day of the week and the time of the offer being described. 

No problem! We can do this in the tutorial today. Let's get started. 

## Prerequisites 

For this project, you're going to need: 

* An api.video account - [Sign up here!](https://api.video)
* An aflorithmic.ai account - [Sign up here!](https://console.api.audio/)

## Installation

We will use the [api.video Python client](https://github.com/apivideo/python-api-client) and [Aflorithic.ai's apiaudio library](https://docs.api.audio/recipes).

Installation for api.video: 
```pip install api.video```

Installation for Aflorithmic:
```pip install -U apiaudio```

### ffmpeg installation
If you want to run the project as-is, you'll also need to install ffmpeg. These instructions help you with installation on a mac. What you'll want to do is make sure you have brew installed. Then it's very easy, you just install with:

```brew install ffmpeg``` 

You need to install ffmpeg before you install the next two items.

### pydub and pyaudio installation
pydub and pyaudio can also be difficult to install, depending on your set up and what you've tried to install already. If you made the mistake of trying to install these before installing ffmpeg, then what you would do is first run:

```brew remove portaudio```

Then, reinstall this like so: 

```brew install portaudio``` 

After these steps, you should be able to successfully install the modules you'll need. Here's the commands: 

```brew pyaudio```

and 

```brew pydub```

## Project overview 
Here's what we're going to do with the example script today:

1. Prompt to collect the api.video API key and the Aflorithmic API key. 
2. Select our video from the Videos folder (for your own tweaks later you can drop other videos here to use, or use a different folder system to organize your content). 
3. Select the script we want from the Script folder and offer the user a preview of the script to make sure it's the right one. 
4. Select the localization .csv file we want to use with our script.
5. Create a sample audio file with the voice over, using the first line from the .csv file
6. Give the user the sample file so they can make sure it sounds like what they want.
7. Next we'll combine the first audio file with the video.  
9. We'll display that file for review by the user to make sure it looks right.
10. If the user approves the file, one by one we'll create an audio file, combine it with the video, tag each video with the information from the csv, and upload it for storage and hosting on api.video.
11. We'll return the user a list of video titles and a link to a playable copy of the final file. 

## Code sample 
Here is the code sample. It's a wizard that will walk you through all the steps. The complete project is available on github here: [https://github.com/apivideo/python-api-client/blob/master/examples/video_audio/README.md](https://github.com/apivideo/python-api-client/blob/master/examples/video_audio/README.md)

## Walkthrough the important stuff
A bunch of the demo is set up to walk you through the process of combining information. We don't need to go over each while loop, but let's go over some details regarding API behavior and the tools used to create the demo. 

### The script 
You can place your script into your code directly by using quotes. It could look like this (I'm saying could because there are a few different ways to set up your api.audio script): 

You can see that the script is split into three sections. This demo doesn't really make use of the features available per section so I'm not going to go into detail for this part. Personalization is achieved by using {{ }} around the name of a column from your csv spreadsheet. They can be used in whatever order you like. 

You can also choose to read your script from a .txt file. If you choose to do this, make sure to take the quotes off from the beginning and end or it will screw up the parser. A common error you will get will say there's a problem with creating a final file or working with a URL and it's usually because something broke before that point, so keep that in mind when debugging. 

In your code, when you set up your script, you'll use a command that looks something like this: 

```script = apiaudio.Script().create(scriptText=text, scriptName=script_details[0], moduleName=script_details[1], projectName=script_details[2])
```

In this snippet, you've already authenticated with your api key (```apiaudip.api_key = your_key```) so now you can work with the api's endpoints. 

The only required field is scriptText, which will contain the text of your script. However it's useful to provide the other names for reference. Be aware that you cannot delete projects or modules. After you set up your script this way, you'll be able to reference it in your code easily via scriptId. Like so:

```script.get("scriptId")```

### The audio file
For starters, when you create an audio file with api.audio, it names your file based on your project name and personalization parameters. In this demo, if you named your project "ad" then every audio file would begin with the word "ad." Next, it puts the headers for the csv file in alphabetical order, and adds the appropriate parameter next to each header. For example, our .csv file has the columns (in this order): 

* city
* address
* day_of_week
* offer_time

After each column title, the entry that appears in the audio file will appear. To separate each column, two underscores are used. Here's a sample:

ad__address_1353%20harlem%20street__city_springfield__day_of_week_tuesday__offer_time_6%20to%208%20pm

So something you'll possibly want to do is rename the files when they arrive. An easy way to handle this is with the built-in os module. 

When creating an audio file you'll do two steps, one is text-to-speech and one is mastering the audio. For text-to-speech you can pick a voice, how fast it will speak and then give it a dictionary containing the list of personalization terms you want to insert into your script. 

You can also choose a template, which will play some background music under your spoken audio. You can see in the demo I used "copacabana." To list voices or background music options, go to the [api.audio API reference docs](https://docs.api.audio/reference) and use the endpoint for listing voices or the endpoint for listing music. 
 
### The .csv
This demo reads information from a .csv file. If you want to read from something else, you can as long as your output for your program to work with becomes a list of dictionaries. .csv is pretty simple to use, so I went with that option.

### Playing a track from your application
You can play a track to check out the audio by using a variety of tools. For this one, I used pydub and pyaudio. These are fairly popular modules. In order to use them, however, audio must be converted to .wav. You will see in the code  that two imports are made from pydub: 

```
from pydub import AudioSegment
from pydub.playback import play
```

These allow us to play straight from the terminal or wherever we may be. The code to convert to .wav and play is very straightforward:

```
wav_track = AudioSegment.from_mp3(file)
wav_track.export(audio_title, format="wav")
```

There are other choices available for converting, but api.audio returns .mp3 files, so we use the from_mp3 choice. 

After we have the track, playing it is as simple as this:

```
play(wav_track)
```

### Merging audio and video 
Prior to uploading your video to api.video, you will want to add the sound and video together. This can be accomplished with ffmpeg, which you need to import to use pydub and pyaudio anyway. The code for merging audio and video is:

```
input_video = ffmpeg.input(video)
input_audio = ffmpeg.input(wav_track)
title = title + ".mp4"
ffmpeg.concat(input_video, input_audio, v=1, a=1).output(title).run()
```

This will produce an mp4. You can then upload it to api.video. 

### Upload to api.video
For details about uploading a video with api.video, you can check out the tutorial about it here: [Upload a Video with the api.video Python Client](https://api.video/blog/tutorials/upload-a-video-with-the-api-video-python-client)

Something to note is to upload a file, it must be in the same folder as your application or it will not upload.

Once it's uploaded, you can retrieve the .mp4 from the response and play it right away in your browser using the built-in webbrowser module. 

To retrieve the mp4 from the response, you do this:

```
link_mp4 = video_response['assets']['player']
```

And then you can open the link like this:

```
 webbrowser.open(link_mp4)
 ```

This will let you make sure everything combined properly so that the audio matches with the video the way you want. 

### Create all the localized videos
After all the steps to make sure you're creating the right type of video, you can use the recipe from api.audio with a couple of tweaks to create all your new videos with personalized ads by location, then upload them for hosting to api.video.

This demo deletes every video you upload right after the upload happens so you don't end up sitting with fifty videos in a folder.

Thanks for reading! Happy coding. :) 

api.video + aflorithmic.ai: Localize Advertisement Videos with Personalized Voice Overs!

If you'd rather watch this tutorial as a video: 

This tutorial is a tweak on the content provided in [Use Flask with Dropzone.js to Upload Videos Under 128MB (No Client)](https://api.video/blog/tutorials/use-flask-with-dropzone-js-to-upload-videos-under-128mb-no-client). In this version of the tutorial I'm using our new Python client. With api.video's Python client, you can upload videos of any size because chunked uploads are handled for you. 

Flask is a WSGI web application framework. It makes getting started with building a web application quick and easy. It's based on the Werkzeug WSGI toolkit and the Jinja2 template engine. It's very popular for creating backends for webpages, and that's what I'll be using it for today. 

Dropzone.js is an opensource JavaScript library that lets you create drag n' drop file uploads with image previews (when available). It doesn't have dependencies on other libraries, and it does a lot of work for you so you can focus on styling and configuration. I'll use a very simple format in this tutorial, but you will be able to style it however you want.

You can also review the API reference documentation for uploading videos:
* [Create a video](https://docs.api.video/reference/post-video)
* [Upload a video](https://docs.api.video/reference/post_videos-videoid-source)

## Prerequisites
For this project you'll need:

* [api.video account](https://dashboard.api.video/register)
* Python installed
* api.video Python client installed
* Virtual environment for your project (optional)
* Flask installed
* Project files - [https://github.com/apivideo/python-api-client/tree/master/examples/flask_and_dropzone](https://github.com/apivideo/python-api-client/tree/master/examples/flask_and_dropzone)
 

## Set up

To get started, you'll need to do these things:

1. Grab the code from GitHub - [flask_and_dropzone](https://github.com/apivideo/python-api-client/tree/master/examples/flask_and_dropzone)

2. Install the api.video client. That's going to be ```pip install apivideo``` 

3. In my version of the project, Dropzone.js is attached using CDNs. You can also reference these using the static folder and placing dropzone.js and dropzone.css there. Just change the references in index.html if you want to do this instead.

Let's roll! 

## What's in index.HTML? 

The HTML file for this project is exactly the same as for [Use Flask with Dropzone.js to Upload Videos Under 128MB (no client)](https://api.video/blog/tutorials/use-flask-with-dropzone-js-to-upload-videos-under-128mb-no-client). 

EXCEPT FOR ONE THING. I added a very long timeout - it lasts about 45 minutes. If you don't plan to upload giant video files, you don't need to include this (```timeout: 2700000```). By default, Dropzone will wait 30 seconds, then timeout. Everything is in milliseconds, so normally this would be 30000. Even though Dropzone times out, your video file will still continue to upload. But the visual will show a file with a graphic that is X'd out. This might lead you to restart, losing the upload, or assume it's not working. So if you plan to use this sample for giant files, I recommend leaving the timeout. 

## What's in app.py? 

Here's what's set up for the backend:

This sample is based off of Miguel Grinberg's tutorial [Handling File Uploads With Flask](https://blog.miguelgrinberg.com/post/handling-file-uploads-with-flask/page/4). You will recognize some of the security items in the code. MAX_CONTENT_LENGTH is a way you can limit how big the files people upload are. Because this sample is supposed to be for files of any size, the content length is massive. UPLOAD_EXTENSIONS limits what types of files people can upload. 

**NOTE:** While this is set up to handle big files, please be aware that if you drop four or five giant files at once it will take awhile. If you want to be able to do that, you might have to experiment with the timeout setting.  

Next there's an error handler to tell you if a file upload is too big (not likely with the sample settings). 

The main route and definition upload_file() does a few things. First it gets all the files you put in the Dropzone. Then it retrieves the api key. The files are stored as FileStorage objects inside an immutable multidictionary. An easy way to process each file is with a loop, so you can loop through for each one (or just the one) and do a couple of checks. Check that the filename isn't empty (because you can't send it like that). Then check if the file extension is allowed. 

Next you'll set up the api.video client so you can use the videos endpoint. Then you send your file. The chunked upload is handled by the client without showing progress information. Give big files some time to upload. 

If you want a progress bar, there are a lot of easy ways to display progress without the client, but then you have to set up chunked uploads yourself. 

If you have any questions or suggestions, you can share them on our [community forum](https://community.api.video/). If you haven't created your api.video account yet, you can do that just in a few moments by following [this link](https://dashboard.api.video/register). Happy buildling! 

## Resources 

* [Flask Documentation](https://flask.palletsprojects.com/en/2.0.x/)
* [Dropzone Documentation](https://www.dropzonejs.com/)
* [Flask and Dropzone Sample App](https://github.com/apivideo/python-api-client/tree/master/examples/flask_and_dropzone)



medium_erol-ahmed-y3kebqlb1zk-unsplash.jpg

small_erol-ahmed-y3kebqlb1zk-unsplash.jpg

thumbnail_erol-ahmed-y3kebqlb1zk-unsplash.jpg

erol-ahmed-y3kebqlb1zk-unsplash.jpg

Use Flask with Dropzone.js and api.video Python client to upload many videos of any size

Hello Pythonistas! Today let's learn how to upload a video using Python's Flask and Dropzone.js. 
In this tutorial, we'll use Python (for a version where you use our new api.video client, please see: ) and Dropzone.js. 

Flask is a WSGI web application framework. It makes getting started with building a web application quick and easy. It's based on the Werkzeug WSGI toolkit and the Jinja2 template engine. It's very popular for creating backends for webpages, and that's what I'll be using it for today.

Dropzone.js is an open source JavaScript library that lets you create drag n' drop file uploads with image previews (when available). It doesn't have dependencies on other libraries, and it does a lot of work for you so you can focus on styling and configuration. I'll use a very simple format in this tutorial, but you will be able to style it however you want. 

## Prerequisites 

For this project you'll need: 

* Python installed
* Virtual environment for your project (optional)
* Flask installed
* Project files - https://github.com/apivideo/python-examples/tree/main/videos/Flask%20with%20Dropzone 
* Api.video account - if you do do have one, you can [create one for free](https://dashboard.api.video/register)

## Set up 
To get started, you'll need to do these things: 

1. Grab the code from [Flask and Dropzone.js](https://github.com/apivideo/python-examples/tree/main/videos/Flask%20with%20Dropzone).

2. In my version of the project, Dropzone.js is attached using CDNs. You can also reference these using the static folder and placing dropzone.js and dropzone.css there. Just change the references in **index.html** if you want to do this instead. 

## What's in index.HTML

1. Let's start by walking through the HTML file **index.html**. It's in the **templates** folder. 

2. First add the scripts and stylesheets you'll need for the project. I'm using Dropzone with bootstrap. So I've added the scripts and stylesheets for that.

3. Next let's skip ahead to the body of the HTML code and look at the way the form is set up. I place the form between the body tags, and I'm using a simple form, so it looks like this:

4. I add a form action to show where I want the information to be sent to. In this case I'm using "/" as the route. Next, I add the class **dropzone**. This tells Dropzone where to add the drag n' drop zone. In the form I add an ID, because I'll have to make some changes to how Dropzone is set up, and I specify that it's going to be a POST request to "/". Along with sending files, I want to send the API key, so I add a field for that, and I want everything to send when I press **Submit** so I add a button for that. 

5. Now let's take a look at customizing the dropzone. By default, Dropzone wants to upload your file the second you drop it in the zone. I don't want that to happen, because I'll get an error. The file (or files) need to be sent with my API key in order to be posted on the api.video servers. So the first thing I'm going to do is set up to configure some Dropzone options. In order to reference my Dropzone, I use the ID written in camelcase. The zone ID I chose is **my-dropzone** so that becomes **myDropzone**. I chose to add the script directly to the HTML in the head tags, but you can reference it from a separate file if you prefer.  

6. To prevent Dropzone from trying to upload files right away, I set **autoProcessQueue** to **false**. I want users to be able to upload multiple files, so I put **true** for uploadMultiple. **parallelUploads** I set to 10 max and I set the total number of files you can add at one time (**maxFiles**) to 10.
 
7. Next I set up the submit button. The code here tells Dropzone to process the files after the user hits **Submit**. And that's it for the script! Let's set up the backend next.

## What's in app.py
Here's what's set up for the backend: 


1. I start with imports for features of Flask, the os library, and the requests library.
 
2. Add limits to what kind of files a user can upload with the line: ```app.config['UPLOAD_EXTENSIONS'] = ['.mov', '.mp4', '.m4v', '.jpm', '.jp2', '.3gp', '.3g2', '.mkv', '.mpg', '.ogv', '.webm', '.wmv' ]``` 

3. This demo only handles files up to 199 MiB so let's add an error handler route (@app.errorhandler(413)). 

4. When you start up the app, I want you to see the **index.html** template. So that template is returned for @app.route('/').

5. To process the file and API key, they must be retrieved from request.files and request.form. request.files can contain more than one file, so I'm assigning the files to my_files. 

6. Assign the API key from the form to api_key. 

7. You'll recognize the set up after this from previous tutorials - it's setting up to retrieve an access token with the API key, then creating the headers with the token so everything is ready to start posting files. 

8. Because my_files could have one or many files and I want to be sure to process them all, I'm using a for loop. The code here creates a video container to upload to and adds the title. It retrieves the video_id so a video can be uploaded to the container. Then it sets up the request and posts the video into the container. It will loop through every video and send it, so long as the video is under 200 MiB. 



That's it! You now have a way to upload videos using Dropzone and Flask without using the Python client. In the next tutorial, we'll upload using the Python client. The client will allow us to automatically handle chunked uploads and handle videos of any size. 
Don't hesitate to reach us on [our Community](https://community.api.video/)!

### Resources 

To build this tutorial, I used this documentation, and it might help you too: 

1. [Handling File Uploads with Flask](https://blog.miguelgrinberg.com/post/handling-file-uploads-with-flask) - A great tutorial that shows how to set up with a basic Dropzone. 
2. [Dropzonejs.com](https://www.dropzonejs.com/) - Details about how to customize Dropzone. 

Use Flask with Dropzone.js to upload videos under 128MB

large_use-flask-with-dropzone-js-to-upload-videos-under-128mb-no-client.png

medium_use-flask-with-dropzone-js-to-upload-videos-under-128mb-no-client.png

small_use-flask-with-dropzone-js-to-upload-videos-under-128mb-no-client.png

thumbnail_use-flask-with-dropzone-js-to-upload-videos-under-128mb-no-client.png

use-flask-with-dropzone-js-to-upload-videos-under-128mb-no-client.png

Use Flask with Dropzone.js to upload videos under 200 MiB (no 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.

Video create