Delegated Upload

Video Status

Video tagging

Video list

Video update

Normal

doug.jpg

twitter-brands.svg

Doug Twitter

Doug Sillars

large_api-video-blog-tutorials.png

medium_api-video-blog-tutorials.png

small_api-video-blog-tutorials.png

thumbnail_api-video-blog-tutorials.png

api-video-blog-tutorials.png

Tutorials

NodeJS

JavaScript

## Video Content Moderation

User generated content (UGC) is taking over the internet. From sites offering video product reviews to vlogging and online education - video is being created at the fastest pace yet (and shows no sign of stopping). Many companies are looking for ways to easily incorporate UGC video on their sites.  

large_screenshot-2020-10-23-at-12-17-19.png

medium_screenshot-2020-10-23-at-12-17-19.png

small_screenshot-2020-10-23-at-12-17-19.png

thumbnail_screenshot-2020-10-23-at-12-17-19.png

create-review.png

All of our customers who allow UGC to be posted on their site worry about a few bad actors working to ruin their brand by posting inappropriate content. In order to protect their brand and the content on their site - evaluating any user generated content before it is allowed to be placed on the website is an important step. Traditional content moderation requires human moderators (which takes time and is expensive).

In this post, I'll walk through an alternative: using machine learning to moderate videos. Before publishing, it is scanned using machine learning for content, tested against rules, and then either accepted or rejected based on those rules.  Super fast, works 24 hours a day, and there will be no human error in the categorisation of the video.

As a demonstration, we've built a site with [api.video](https://api.video) for video hosting, and using Hive AI to power the video moderation.

## The Basics

## api.video
api.video is a full service API-based video hosting solution.  You can use our APIs to upload videos, modify and serve streaming video.  Every video that is uploaded is transcoded into a video stream, and can be delivered in a custom video player. If you haven't created an api.video account yet, you can do that [here](https://dashboard.api.video/register). 

In this solution, we'll use the [delegated upload](https://docs.api.video/reference/api/Videos) (used like a public key) for uploading the videos.  We'll use the video [tagging](https://api.video/blog/tutorials/video-tagging-best-practices/) function to label each video based on the moderation results. We can search all of the tagged videos to deliver the videos (and custom player) to users based on their moderation state.

### Hive AI

Once the videos are uploaded, we need to run moderation before allowing them to appear on the website.  

Hive AI has several moderation suites. We've set up our API to use 2 endpoints. For short videos (under 25s) - we scan 1 frame every second, and for long videos, one frame every 5 seconds. (The demo above only works for 25s long videos).

The API is trained to identify several subjects that, depending on the context of your application, might be important to moderate. In this post, we will use a small subset of the trained models:

* Safe for work/Not Safe for Work
* Yes/No: Female nudity
* Yes/No: Male nudity
* Yes/No: Female swimwear
* Yes/No: Shirtless male
* Yes/No: guns
* Yes/No: smoking

After each frame is analyzed, a JSON file with data for each frame analyzed is returned for analysis.  

After analysis, the video is tagged with moderation value, ensuring that it only appears on pages appropriate for the video.

### Code

This application is available on [GitHub](https://github.com/apivideo/videoModeration). The general flow is:

1. On Upload, a video is tagged "needs moderation" (and will not appear on the site).
2. Hive AI performs frame analysis.
3. Based on the analysis, the video is tagged as "SFW" or "NSFW" (etc.).

moderation workflow, ai moderator, automated moderator

large_screenshot-2020-10-23-at-12-49-40.png

medium_screenshot-2020-10-23-at-12-49-40.png

small_screenshot-2020-10-23-at-12-49-40.png

thumbnail_screenshot-2020-10-23-at-12-49-40.png

moderation-workflow.png

large_screenshot-2020-10-22-at-15-17-28.png

medium_screenshot-2020-10-22-at-15-17-28.png

small_screenshot-2020-10-22-at-15-17-28.png

thumbnail_screenshot-2020-10-22-at-15-17-28.png

moderation-landing-page.png

On entering the site, users are presented with an upload form.  As we walk through this example, we'll be following the upload of the intro theme to the classic TV show Baywatch.

With api.video, we have created a delegated upload key - which allows us to place the code publicly on the webpage without exposing our API private key. The form takes the video, and uploads the video to api.video.  The uploader uses the [Blob API](https://api.video/blog/tutorials/uploading-large-files-with-javascript/) to break the videos into 50MB segments for uploading.

For the purposes of the demo, we show how many chunks are created, and update the progress of each chunk, in addition to the total video upload:


small_screenshot-2020-10-23-at-13-34-15.png

thumbnail_screenshot-2020-10-23-at-13-34-15.png

video-upload-status.png

The response from the upload provides the api.video ```videoId```, which is used to identify the video at api.video.  This is then sent to the NodeJS backend as a POST (along with the video's name).

On the Node server, we begin the process of moderating the video.  First, we call the [update video](https://docs.api.video/reference/api/Videos#update-a-video-object) endpoint to add the video's name and to tag the video "needsScreening" to indicate that it has entered the moderation queue.

### Transcoding

When the video is uploaded, api.video's servers begin the process of creating different size/bitrate videos to provide adaptive bitrate streaming.  We also create a mp4 version of the video. For content moderation, we need to submit the mp4 to Hive AI. The Node server pings api.video's [video status](https://docs.api.video/reference/api/Videos#retrieve-video-status-and-details) endpoint every 2 seconds to determine when the mp4 is ready. Initially, the API will indicate that the video is not playable (transcoding has not yet started). Once transcoding has started, the API lists the encoding status of every format being created, so we can monitor the encoding status of the mp4.

medium_screenshot-2020-10-23-at-13-36-55.jpg

small_screenshot-2020-10-23-at-13-36-55.jpg

thumbnail_screenshot-2020-10-23-at-13-36-55.jpg

server-video-upload-status.jpg

Once the mp4 is created, we can create our connection to Hive AI, and make the request for content moderation.

The request looks like this:
```JSON
{
  method: 'POST',
  url: 'https://api.thehive.ai/api/v2/task/sync',
  headers: {
    accept: 'application/json',
    authorization: 'token {API TOKEN}'
  },
  form: {
    image_url: 'https://cdn.api.video/vod/vi1iHWIy6Doy0LBJl3ajaED0/mp4/1080/source.mp4'
  }
}
```

and a few seconds later, a huge JSON response comes back - 39 categories * x frames analysed.  Let's look at a snip of one frame to see the sort of information we get (for brevity, I've only included the first 5 categories that are returned):

```JSON
	{
		"class": "general_not_nsfw_not_suggestive",
		"score": 0.00460230773187999
	},
	{
		"class": "general_nsfw",
		"score": 5.180850871024288e-06
	},
	{
		"class": "general_suggestive",
		"score": 0.995392511417249
	},
	{
		"class": "no_female_underwear",
		"score": 0.9998768576722025
	},
	{
		"class": "yes_female_underwear",
		"score": 0.00012314232779748514
	}

```

"Not NSFW" means "Not Not Safe for Work" which, removing the double negative is "safe for work." This score is combined with "not suggestive", and is scored at 0.004.  Since 0 is a low score, and 1 is a high score, this means that the API has determined that this frame is not considered appropriate for work.  Looking at the next 2 values, general NSFW is also very small, but the "general suggestive" is 99.9%. Since the yes:no scores will always add up to one, this means that the general suggestiveness is what makes this frame not safe for work.

video moderator, automated content moderator, ai moderation

large_screenshot-2020-10-24-at-19-46-39.png

medium_screenshot-2020-10-24-at-19-46-39.png

small_screenshot-2020-10-24-at-19-46-39.png

thumbnail_screenshot-2020-10-24-at-19-46-39.png

automated-content-moderator.png

### Compiling the scores

Hive AI gives you scores for each category on each frame, but it is up to us to define the pass/fail criteria for our videos.  

In order to do this, I take all the scores for each category, and place them in an array. With the data sequestered for each category, I can calculate the min, max, average and median of each score. I also calculate how many frames appear over 0.9 as a 90% certainty ("yes_smoking") and how many frames appear under 0.1 (90% certainty of "no_smoking.")  


medium_screenshot-2020-10-22-at-15-25-19.jpg

small_screenshot-2020-10-22-at-15-25-19.jpg

thumbnail_screenshot-2020-10-22-at-15-25-19.jpg

frame-analysis-code.jpg

In the above "SFW" array (really the 'not not safe for work' response, but that is a mouthful), of 22 frames, I finde:
* min score: 0 (not safe for work)
* max score: 1 (safe)
* average:  0.55 right in the middle!
* median: 0.75 
* count of frames > 0.9: 9
* count of frames <0.1: 7

As you can see, 9 frames are over 0.9 (safe!), but 7 are below 0.1 (not safe!). If the median falls below 0.9, than means at least 50% of the frames are not "certain" to be safe for work ( which I place at the 90% threshold).  Based on these numbers, my rudimentary pass/fail algorithm deems the Baywatch intro "NSFW."  

If you wanted to prevent videos with smoking from appearing to your audience, just one frame with a 90% certainty of smoking would be enough to cause the video to be categorised as "yes_smoking." I used this same threshold for guns, nudity, underwear and swimwear. 

>Interestigly, this does push the Schindler's List trailer into the "yes smoking" category.

Based on these metrics, it is not terribly surprising that the Baywatch video is flagged for "yes female swimwear" and "yes shirtless male."  Also unsurprisingly, the algorithm found an absence of smoking and guns.

large_screenshot-2020-10-22-at-15-25-26.jpg

medium_screenshot-2020-10-22-at-15-25-26.jpg

small_screenshot-2020-10-22-at-15-25-26.jpg

thumbnail_screenshot-2020-10-22-at-15-25-26.jpg

content-categories-code.jpg

Once we have the categories measured for each application, we can remove the tag ```needsScreening``` and add in the new tags from the moderation. This is done with the [Video Update](https://docs.api.video/reference/api/Videos#update-a-video-object) endpoint.  

And that ends the moderation process for the video.

### Video Categories

Now that each video has been categorised, it is easy to display each video category. Each video's categories have been added to the video as a tag and the [List videos](https://docs.api.video/reference/api/Videos#list-all-video-objects) endpoint allows us to search by tag - returning every video that does not have smoking, or is safe for work, etc.  Using Node, we can generate the list of videos (sorted newest first), and send them to the client:

```Javascript
app.get('/no_smoking', (req, res) => {
	//get list of no smoking videos
	client = new apiVideo.Client({ apiKey: apiVideoKey});
	let recordedList = client.videos.search({"tags":'no_smoking', "sortBy":"publishedAt","sortOrder":"desc"});
	recordedList.then(function(list) {
		console.log("list of tagged videos");
		console.log(list);
		return res.render('videos',{list});  
	}).catch((error) => {
	    console.log(error);
	});
		
});

```

The API returns the metadata for each video (including links for the video), so creating a page with each video iFrame is a pretty simple task.  On each page in the sample app, you can display (and watch) each of the videos assigned to a category.  In the demo, I use Pug for the rendering

```
 each video in list
    p #{video.title}
    iframe(type="text/html", src=video.assets.player, width = "960", height="540",frameborder="0", scrollling="no")
    p #{video.publishedAt}
   
```

For example, the "yes guns" page has 3 movie trailers (as I write this post): Indiana Jones and the Last Crusade, Die Hard and the latest James Bond,  

medium_screenshot-2020-10-24-at-19-51-28.jpg

small_screenshot-2020-10-24-at-19-51-28.jpg

thumbnail_screenshot-2020-10-24-at-19-51-28.jpg

list-of-videos.jpg

## Conclusion

There we have it - we have uploaded a video to api.video, and before it is displayed on the site, it is moderated by Hive AI for several categories of inappropriateness.  Based on the analysis for each frame, the video is categorised into buckets and displayed on the appropriate page on the website.


If you have questions about using content moderation with your videos at api.video, feel free to reach out on our [community forum](https://community.api.video) or comment on the [GitHub repo](https://github.com/apivideo/videoModeration).  We'd love to see how you are using moderation to sort and categorise your videos, and the rubrics you utilise to decide what categories a video might fall into. If you haven't created your api.video account yet, you can do that in just a fewmomnets by follwoing [this link](https://dashboard.api.video/register). Happy building! 

Video moderation with machine learning

video content, machine learning, moderator, AI moderator

large_screenshot-2020-10-23-at-12-04-32.png

medium_screenshot-2020-10-23-at-12-04-32.png

small_screenshot-2020-10-23-at-12-04-32.png

thumbnail_screenshot-2020-10-23-at-12-04-32.png

video-content-machine-learning-ai-moderator.png

api.video enables developers to build, scale and operate video in their own apps and platforms in minutes, with just a few lines of code. 
The service handles the end-to-end workflow, from video ingestion to worldwide video delivery. You can [test it for free](https://dashboard.api.video/register) right away and start building.

&nbsp;

**August 2021 update**
Since this post was written, we've published a library to simplify JavaScript upload of videos [read the blog post to learn more](https://api.video/blog/tutorials/new-video-uploader-javascript-library/).

&nbsp;

**17 February 2021 update**
The example code has been added to extract the filename, and then append it to the first upload. Without this step, your video title will be 'blob.'

&nbsp;


You can view the API reference documentation for the file upload endpoint here: [Upload a video](https://docs.api.video/reference/api/Videos#upload-a-video)

&nbsp;

***

As our presentations, PDFs, files, and videos get larger and larger, we are stretching remote servers’ ability to accept our files. With just a few lines of JavaScript, we can ensure that this error goes away, no matter what you are trying to upload. Keep reading to learn more.

&nbsp;

The most common error with large uploads is the server response: **HTTP 413:  Request Entity too Large**. Since the server is configured only to accept files to a specific size, it will reject any file larger than that limit.

&nbsp;

One possible resolution would be to edit your server settings to allow for larger uploads, but sometimes this is not possible for security or other reasons. (If the server limit gets raised to 2GB for videos, imagine the images that might get uploaded!)


Further, if a large file fails during upload, you may have to start the upload all over again.  How many times have you gotten an “upload failed” at 95% complete?  Utterly frustrating!

## Segments/Chunks

When you watch a streaming video from [api.video](https://api.video), Netflix or YouTube, the large video files are broken into smaller segments for transmission.  Then [the player](https://api.video/product/player/) on your device reassembles the video segments to play back in the correct order. 
What if we could do the same with our large file uploads? Break the large file into smaller segments and upload each one separately? We can, and even better, we can do it in a way that is seamless to our users!

&nbsp;

Baked into JavaScript are the File API and the Blob API, with full support across the browser landscape:

large_screenshot-2020-09-23-at-11-22-35.png

medium_screenshot-2020-09-23-at-11-22-35.png

small_screenshot-2020-09-23-at-11-22-35.png

thumbnail_screenshot-2020-09-23-at-11-22-35.png

blob-javascript-api-support.png

This API lets us accept a large file from our customer, and use the browser locally to  break it up into smaller segments, with our customers being none the wiser!

&nbsp;

Let’s walk through how you might use this to upload a large video to api.video.  
To follow along, the code is available on [Github](https://github.com/apivideo/blobUpload), so feel free to clone the repo and run it locally.

&nbsp;

To build your own uploader like this, you’ll need a free [api.video account](https://dashboard.api.video). Use this to create a [delegated upload token](https://docs.api.video/reference/api/Upload-Tokens). It takes just 3 steps to create using CURL and a terminal window. 

&nbsp;


> A delegated token is a public upload key, and anyone with this key can upload videos into your api.video account. We recommend that you place a [TTL (time to live) on your token](https://api.video/blog/product-updates/video-access-management-how-to-create-deliver-and-manage-private-videos-and-what/), so that it expires as soon as the video is uploaded.

&nbsp;

Now that you're back, we'll begin the process of uploading large files.

### Markup

The HTML for our page is basic (we could pretty it up with CSS, but it's a demo 😛):

There is an input field for a video file, and then there are 2 divs where we will output information as the video uploads.

&nbsp;

Next on the page is the ```<script>``` section - and here's where the heavy lifting will occur.  

We begin by creating some JavaScript variables:

&nbsp;

* input: the file input interface specified in the HTML.
* url:  the delegated upload url to api.video.  The token in the code above (and on Github) points to a sandbox instance, so videos will be watermarked and removed automatically after 24-72 hours. If you've created a delegated token, replace the url parameter 'to1R5LOYV0091XN3GQva27OS' with your token. 
* chunkCounter: Number of chunks that will be created.
* chunkSize: each chunk will be 6,000,000 bytes - just above the 5 MB minimum. For production, we can increase this to 100MB or similar.
* videoId: the delegated upload will assign a videoId on the api.video service. This is used on subsequent uploads to identify the segments, ensuring that the video is identified properly for reassembly at the server.
* playerUrl: Upon successful upload, this will output the playback url for the api.video player.

&nbsp;

Next, we create an EventListener on the input - when a file is added, split up the file and begin the upload process:

We name the file uploaded as 'file'. To determine the number of chunks to upload, we divide the file size by the chunk size. We round the number round up, as any 'remainder' less than 6M bytes will be the final chunk to be uploaded. This is then written onto the page for the user to see. (In a real product, your users probably do not care about this, but for a demo, it is fun to see).

## Slicing up the file

The function createChunk slices up the file.

Next, we begin to break the file into chunks.  Since the file is zero indexed, you might think that the last byte of the chunk we create should be ```chunkSize -1```, and you would be correct. However, we do not subtract one from the chunkSize.

> the first byte that will *not* be included in the new Blob (i.e. the byte exactly at this index is not included).

So, we must use ```chunkSize```, as it will be the first **byte** NOT included in the new Blob.

In the createChunk function, we determine which chunk we are uploading by incrementing the chunkCounter, and again calculate the end of the chunk (recall that the last chunk will be smaller than chunkSize, and only needs to go to the end of the file).

In the first chunk uploaded, we append in the filename to name the file (if we omit this, the file will be named 'blob.'

### The actual slice command

The ```file.slice``` breaks up the video into a 'chunk' for upload. We've begun the process of cutting up the file!

We then create a form to upload the video segment to the API. After the first segment is uploaded, the API returns a videoId that must be included in subsequent segments (so that the backend knows which video to add the segment to). 

On the first upload, the videoId has length zero, so this is ignored.  We add the chunk to the form, and then call the uploadChunk function to send this file to api.video. On subsequent uploads, the form will have both the videoId and the video segment.

## Uploading the chunk

Let's walk through the uploadChunk function:

We kick off the upload by creating a ```XMLHttpRequest``` to handle the upload. We add a listener so we can track the upload progress.  

### adding a byterange header

When doing a partial upload, you need to tell the server which 'bit' of the file you are sending - we use the byterange header to do this.

We add a header to this request with the byterange of the chunk being uploaded.
>Note that in this case, the end of the byterange should be the last byte of the segment, so this value is one byte smaller than the slice command we used to create the chunk.

The header will look something like this: 

### Upload progress updates

While the video chunk is uploading, we can update the upload progress on the page, so our user knows that everything is working properly.  We created the progress listener at the beginning of the uploadChunk function. Now we can define what it does:

First, we do a little bit of math to compute the progress. For each chunk we can calculate the percentage uploaded (```percentComplete```). Again, a fun value for the demo, but not useful for real users.

What our users want is the ```totalPercentComplete```, a sum of the existing chunks uploaded, but the amount currently being uploaded.

For the sake of this demo, all of these values are written to the 'chunk-information' div on the page.

large_screenshot-2021-01-28-at-10-31-53.png

medium_screenshot-2021-01-28-at-10-31-53.png

small_screenshot-2021-01-28-at-10-31-53.png

thumbnail_screenshot-2021-01-28-at-10-31-53.png

video-upload-progress-on-screen.png

### Chunk upload complete

Once a chunk is fully uploaded, we run the following code (in the onload event).

When the file segment is uploaded, the API returns a JSON response with the VideoId.  We add this to the videoId variable, so it can be included in subsequent uploads. 

To upload the next chunk, we increment the bytrange ```start``` variable by the chunkSize. If we have not reached the end of the file, we call the createChunk function with the videoId and the start. This will recursively upload each subsequent slice of the large file, continuing until we reach the end of the file.

### Upload complete

When ```start > file.size```, we know that the file has been completely uploaded to the server, and our work is complete! In this example, we know that the server can accept 5 MB files, so we break up the video into many smaller segments to fit uder the server size maximum.

When the last segment is uploaded, the api.video response contains the full video response (similar to the [get video endpoint](https://docs.api.video/reference/api/Videos#retrieve-a-video-object)). This response includes the player url that is used to watch the video. We add this value to the ```playerUrl``` variable, and add a link on the page so that the user can see their video. And with that, we've done it!

Page showing upload complete - with link to see the completed video

large_screenshot-2021-01-28-at-10-32-03.png

medium_screenshot-2021-01-28-at-10-32-03.png

small_screenshot-2021-01-28-at-10-32-03.png

thumbnail_screenshot-2021-01-28-at-10-32-03.png

video-upload-completed-with-link.png

## Conclusion

In this post, we use a form to accept a large file from our user. To prevent any 413: file too large upload errors, we use the ```file.slice``` API in the users' browser to break up the file locally. We can subsequently upload each segment until the entire file has been completely uploaded to the server.  All of this is done without any work from the end user. No more "file too large" error messages, improving the customer experience by abstracting a complex problem with an invisible solution!  

&nbsp;  

When building a video uploading infrastructure, it us great to know that browser APIs can make your job building upload tools easy and painless for your users.  

&nbsp;  

Are you using the File and Blob APIs in your upload service? Let us know how!
If you'd like to try it out, your can create a [free account](https://dashboard.api.video/register) and use the Sandbox environment for your tests.  

&nbsp;  

If this has helped you, leave a comment in our [community forum](https://community.api.video).

Uploading large files with JavaScript

small_JavaScript-LargeFiles.png

thumbnail_JavaScript-LargeFiles.png

JavaScript-LargeFiles.png

The first demo we published on a.video was a demo on how to upload a video (check it out yourself at [https://upload.a.video](https://upload.a.video). This is a great little demo that will take your video, break it into smaller chunks (1 MB in this case), and upload them into api.video. Once the uploads are complete, you get a link to the url where the video will soon be available for playback. You can read the [post describing how we built the app](https://api.video/blog/tutorials/uploading-large-files-with-javascript/).

## More than one video

What if you'd like to upload a few videos? You could use this interface multiple times, but that would be slow and tedious.  

To resolve this, I've created a new version of the uploader at [https://upload.a.video/many.html](https://upload.a.video/many.html) that allows you to upload more than one video at a time. It only took about 5 lines of added code to make the change from one video to many.

Let's walk through what I did to make this happen.

### Input

First, we need to allow the form to accept multiple files.  This is a one word change:

```
	<input type="file" id="video-file" style='display:none'>
```

to

```
	<input type="file" id="video-file" style='display:none' multiple>
```

This basically tells the browser that users can select more than one file at a time. With this line added, you can select multiple adjacent files while holding the shift key, or multiple non-adjacent files holding the command (on a Mac) key.

### Uploading multiple files

In upload a video, only one video could be uploaded at a time. When you add files via a form, they are placed in an array, so once the button to upload was clicked, we defined the video and the video name based on the file in index 0 of the array:


```

			const file = input.files[0];
			const filename = input.files[0].name;
			
			<upload stuff>

```

There's just one file, so grab the file in index 0, grab the filename and upload the file to api.video.  Extending this to more than one file is easy: create a loop over the array of files (incrementing index i), and upload each file in the array by referencing file i in the array:

```
  const numberofFiles = input.files.length;
	for( i=0;i< numberofFiles; i++){
			//do the upload for each file.

			const file = input.files[i];
			const filename = input.files[i].name;
			<upload stuff>
			
	}

```


### Make the UI look nice

So that was probably the 5 lines of code I promised, (6 if you count the comment).  But the UI was weird, since the notifications and text were updating and overlapping for each file being uploaded - and you couldn't read anything as the text was changing so quickly.  So, let's fix that.  I changed 3 lines of code here:

First: the upload information is changed to show information for each video by appending the HTML and adding the video number: 

```
			document.getElementById("video-information").innerHTML += "Video "+ i +" will be uploaded in " + numberofChunks + " chunks.<br/>"

```


Second: as the videos upload, so the upload information should update for each video:

```
document.getElementById("chunk-information").innerHTML = "Video: " +i+" Chunk # " + chunkCounter + " is " + percentComplete + "% uploaded. Total uploaded: " + totalPercentComplete +"%";
```

This one just overwrites itself all the time.  I could probably make this look nicer, but for a demo, it's ok.

When the upload is completed, we add the completed upload notice, along with the url where the playback can be watched:

```
	document.getElementById("video-information").innerHTML += "Video " +i+" is uploaded! Watch the video <a href=\'" + playerUrl +"\' target=\'_blank\'>here</a><br/>" ;

```

All three of these lines were already in the code, I just updated them to fit the multiple upload function of the application. That said, with a grand sum of 8 lines of uploaded code, we've modified [https://upload.a.video](https://upload.a.video) to [https://upload.a.video/many.html](https://upload.a.video/many.html), allowing for more than one video to be uploaded at once.

## Try it out

With ~10 lines of modified code, I've taken a page built for a single video uploaded a page that can now handle many videos, and show the links to the videos when they are completed.

That said, since this is a live demo, I have placed a limit of 3 files per upload, just to keep my account from filling up with videos.  These videos will also be stored in the sandbox: so watermarked and deleted after 24 hours.

```
var maxUpload = Math.min(numberofFiles, 3);

		for( i=0;i< maxUpload; i++){
			<file selection & upload stuff>
		}
```

The code is live at [https://upload.a.video](https://upload.a.video), and available on [Github](https://github.com/dougsillars/blobUpload/blob/master/many.html). Give it a try, and let us know what you think!

Upload many files at once with HTML and JavaScript

medium_maxresdefault.jpeg

small_maxresdefault.jpeg

thumbnail_maxresdefault.jpeg

maxresdefault.jpeg

Today, with the rise of AI, new possibilities are emerging that allow us to take video control to the next level. One such innovative feature is AI facial expression detection. By integrating this technology into your videos, you can create a more engaging and responsive user experience. 

&nbsp;

In this blog, we will learn <u>how to integrate AI facial expression detection into your videos using Javascript</u>. 

&nbsp;

We use JavaScript here because it can be easily integrated into virtually any web application. Additionally, its adaptability to different platforms and its ability to interact with HTML and CSS empower you to create rich, interactive web experiences that cater to diverse user needs.

&nbsp;

_*To learn how to do the integration with React, head to this [blog](https://api.video/blog/tutorials/AI-facial-expression-detection-react/).*_

## 1. Build the application’s structure

Start by creating a simple `index.html` file

Start your application by running the `npx http-server` command and open the dedicated `http://localhost` port to see your application running. A “Hello World!” alert should appear.

&nbsp;

**Note:** If you don’t have the `npx` package already installed on your computer, you can install it by running `npm i -g npx` in a terminal.

## 2. Add the external JS scripts

Import the MediaPipe script by adding these lines at the top of `index.js`

Import the api.video-player-sdk script by adding the following <script /> tag to your index.html file.

Note: We’re using the api.video’s player in this article, but feel free to use your favorite one and adapt the callbacks to it.

## 3. Add a video player

Add a `<div />` tag to `index.html`. It will be targeted by the [api.video player SDK](https://api.video/catalog/player-sdk/) to display the video you're going to control with your facial expressions.

Target the element in index.js with the following code.

Run your application with `npx http-server` and you should see a video that you can play, pause, etc...

## 4. Record your facial expressions

To control the player with your facial expressions, you need to stream your face through your webcam and pass this streamed data to the trained machine-learning model.

&nbsp;

Add a `<video />` tag to `index.html` 
Apply a `display: "none"` inline style to hide the element, and an `autoplay` attribute so the webcam stream time is updated. 

&nbsp;

**Note:** You can remove the `display: "none"` style and customize your CSS, it doesn’t matter.
Apply a `display: "none"` inline style to hide the element, and an `autoplay` attribute so the webcam stream time is updated. 

## 5. Load the machine-learning model

Before we can use the machine-learning model, we must wait for it to finish loading. These models can be large and take a moment to get everything needed to run.

&nbsp;

Add and run a new function in `index.js`

## 6. Start detecting the webcam stream

Once the machine-learning model has been loaded and the `faceLandmarker` class has been instantiated, you can start detecting the stream.

&nbsp;

Add the following code to `index.js`

Check your application, and open your browser console. You should see a lot of console logs appearing each millisecond.

&nbsp;

Each one of them logs an array of objects of type:

## 7. Use the facial expression detection results

You now have access to a list of facial expression detection results. Use them to do whatever you want and in this case, to control your video player.

&nbsp;

Let’s assume that you want to play the video when you smile, and pause it when you do a kiss.

&nbsp;

Check the facial expression detection results on each frame and play or pause your video depending on the score of the wanted result by replacing your console.log with the following.

Check your application, and try to smile at your webcam. It should trigger the player’s `play` callback and play the video. Then, try to do a kiss (😗) in front of your webcam, and the video should pause.

## 8. Display the results

It can be helpful to have a visual representation of the detection results. 

&nbsp;

Display these results as a list and highlight the detected facial expressions by adding a `<ul />` tag to `index.html`

Now, you should see a list of results displayed in your application, with a green highlight on the ones with more than 60% confidence.

## 9. Code samples

Check the full `index.html` and `index.js` codes below

### index.html

We hope this blog helped you understand the coding behind integrating AI facial expression detection to your videos. 

&nbsp;

_For any questions or doubts you may have, [chat with us](https://api.video/contact/) on our website. If you would like to try out api.video for your videos, [sign-up](https://dashboard.api.video/register) for a free sandbox account here._ 

How to integrate AI facial expression detection to control your video – Javascript 

small_AI face recognition (Javascript).jpg

thumbnail_AI face recognition (Javascript).jpg

ai-face-recognition-javascript.jpg

Uploading a video to api.video just got easier!

We have created a [JavaScript uploader](https://docs.api.video/sdks/vod/apivideo-typescript-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/sdks/vod/apivideo-typescript-uploader) in our documentation, and [get started](https://dashboard.api.video/register) with your video app uploads today!


New video uploader JavaScript library

new-video-uploader-javascript-library.png

Product updates

The long awaited and much anticipated new Java client for api.video is finally here! api.video's new Java client repository is available here: [https://github.com/apivideo/java-api-client](https://github.com/apivideo/java-api-client). And we've added a folder you can upload Java client code samples to here: [https://github.com/apivideo/java-api-client/tree/main/examples](https://github.com/apivideo/java-api-client/tree/main/examples). We'll also be adding content there. 

The new client will replace api.video's old Java SDK. You can continue to use the old SDK, but it will no longer be updated. The new client lets you work with all features of the api.video API, and handles pagination, chunked uploads, and authentication for you. 

The new Java client also provides you with a progress listener. 

The Java client is a great choice for your project because Java is one of the most popular programming languages in the world. It is incredibly flexible, offering higher cross-functionality and portability than many languages. You can easily add it to web applications, and Java is a good pairing with JavaScript. 

Another useful feature of Java is its multithreading. Using multiple threads allows you to make efficient use of the CPU. Java also provides multimedia and network support, and security is a top priority. You can use a Java binding with OpenCV and there are Java wrappers available for FFMPEG as well. 

We're excited to offer a Java client to everyone and we hope you'll like using it. Please send us any feedback you have, and feel free to add code samples to our repository! We look forward to seeing your projects. Happy coding! 

api.video's new Java client is here! 

apivideojava.png

Nextflix’s preferred programming languages, Python and Java

Python and Java, the preferred programming languages of Netflix

Uploading large files with JavaScript: File.slice() to the rescue!

Video trends

We just released our new Python and Java clients for the api.video API, so today's post seems appropriate. Let's take a look at why these languages are popular for video processing. Netflix uses them both and they have one of the most popular video content platforms in the world. Much has been written about Netflix when it comes to what programming language it's built with. Dig around online, and you'll find iconic quotes like these:  

&nbsp;   


>"_**Java is the bedrock of our software architecture.**_" - Andy Glover, Director of Productivity Engineering at Netflix  

&nbsp;  


>"_**We use Python through the full content lifecycle, from deciding which content to fund all the way to operating the CDN that serves the final video to 148 million members.**_" - Pythonistas at Netflix, coordinated by Amjith Ramanujam and edited by Ellen Livengood.  

&nbsp;  

Netflix has used Java and Python to deliver an exceptional customer experience at least as far back as 2013. A Netflix blog post titled ‘Python at Netflix,’ dated Mar 11, 2013, states that:  

&nbsp;  

> "Developers at Netflix have the freedom to choose the technologies best suited for the job. More and more, developers turn to Python due to its rich batteries-included standard library, succinct and clean yet expressive syntax, large developer community, and the wealth of third party libraries one can tap into to solve a given problem."  

&nbsp;   

It’s interesting to note that when permitted to choose anything, developers started in Java, then Python grew in popularity. Today they continue using both, though a number of articles suggest they are shifting more and more to use Python.  

&nbsp;  

Netflix initially chose Java because of its scalability and ability to easily run anywhere. They use open source Java tools to monitor, upgrade, and scale their services. Their engineers continuously deliver new features, and Java processes are constantly running during a customer's use of Netflix. Netflix's Director of Engineering, Andy Glover, says "_**The bread and butter of Netflix involves using data to recommend shows that customers might like. Everyone at Netflix plays a role in either capturing that data or making use of that data. Our business units can make changes quickly, partly because the entire infrastructure is built on Java.**_" Their engineers also encode videos using Java on Linux computers.  

&nbsp;  

Over time, Netflix added Python to the mix. They rewrote some Java processes using Python, and they also use Python for security. It's used for risk classification, security automation and vulnerability identification. Like Java, Python is often used in Netflix's recommendation algorithms as well as to serve content to viewers. Amazingly, Python is also used to crunch the data that helps Netflix decide what content to fund or buy.  

&nbsp;  

Netflix chose Python because it's one of the fastest growing languages in terms of popularity, it offers numerous modules that are great for video processing and data science, and its an industry standard for a lot of animated and VFX content. Will Python replace Java at Netflix? That remains to be seen.  

&nbsp;  

For now though, both these languages are go to choices for Netflix. And [api.video](https://api.video/) is proud to offer you the choice of a [Python](https://docs.api.video/sdks/api-clients/apivideo-python-client) or [Java client](https://docs.api.video/sdks/api-clients/apivideo-java-client) for whatever you want to develop with our video API! 

api-video-netflix.png

Upload a video with the api.video Python Client

How api.video gives you the freedom to customize your video delivery

api-video-blog-video-trends.png

large_api-video-netflix.png

medium_api-video-netflix.png

small_api-video-netflix.png

thumbnail_api-video-netflix.png

Uploading video with api.video's Python Client is easy. You can use the method described here to upload big files over 199 MiB or small files. The client will handle chunking the upload for you. 

NOTE: If you're wondering how this differs from the previous Python tutorials:
* [Upload a Video From Your Computer wiht the api.video API (Python)](https://api.video/blog/tutorials/upload-a-video-from-your-computer-with-the-api-video-api-python/) 
* [Upload a Big Video File Using Python](https://api.video/blog/tutorials/upload-a-big-video-file-using-python/) 

It differs in that it uses our new [Python Client](https://github.com/apivideo/python-api-client).  

If you'd prefer to watch a video about how to upload video from your computer with the new client, you can check that out here: 

<iframe width="560" height="315" src="https://www.youtube.com/embed/4kWwSvrLtCA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

The API reference documentation for the endpoints used in this tutorial can be reviewed here: 
* [Create a video](https://docs.api.video/reference/api/Videos#create-a-video-object)
* [Upload a video](https://docs.api.video/reference/api/Videos#upload-a-video)

If you prefer written walkthroughs, read on. I'll cover all the same information here. 

## Install the Python Client 
Installing api.video's Python Client is easy: 

```pip install api.video``` 

I recommend using a virtual environment to install, but it's not required. 

## How to Upload a Video from Your Computer 

What you'll be doing, is sending a request to the api.video server to create a video container. You'll get back a video ID you can use to reference your container. Then you'll prepare your video for upload and send a request to upload the video to the video ID you specify. 

Be aware that you can only upload to a video ID once. You can change settings and details about your video later using the update feature of the api.video API. 

You can get the code sample I'm using here: 
[https://github.com/apivideo/python-api-client/blob/master/examples/upload_video.py](https://github.com/apivideo/python-api-client/blob/master/examples/upload_video.py)

When you are creating your video, you may want to include more settings and metadata than I show in the walkthrough. A complete list of choices are shown here: 
[https://github.com/apivideo/python-api-client/blob/master/docs/VideoCreationPayload.md](https://github.com/apivideo/python-api-client/blob/master/docs/VideoCreationPayload.md)

And here's the code sample (tweaked a bit from the repository sample):

## Code Sample Walkthrough
To use the api.video Python Client, you'll want to start by making your imports. You need three. The first one you'll need to import is **apivideo**. This will let you use authentication and the client. Next, you want to import **VideosApi** from apivideo.apis. It is best practice to import just the part of the client you'll use, because it improves performance. VideosApi will let us use the create and upload features. Finally, you'll import **ApiAuthException** for error handling. 

Next, we'll add our API key and set up the Client. In the Python Client, authentication is handled for us, including refreshing the access token when needed. All we need to do is add our API key to the Client, then connect. After connecting, we can pass the Client to VideosApi, and we're ready to upload our video! 

To upload our video, we first want to create our video container. The video container contains details about the video as well as any configuration settings like whether you want your video to be public or downloadable. As part of our request to create our container, we'll want to send all those details and settings in a payload. For this walkthrough, I'm adding a title because that's the only required setting for container creation. Then I'm including a description of what my video is, setting my video to be private (make public = false) and then I'm adding tags to search with - bunny and tree. 

If you want to change the settings further, refer to the choices here: [https://github.com/apivideo/python-api-client/blob/master/docs/VideoCreationPayload.md](https://github.com/apivideo/python-api-client/blob/master/docs/VideoCreationPayload.md)

Let's create a request to make our video container and retrieve the video ID:

We grabbed the video ID, so next we prepare our file. To upload files with api.video, we open them in read-only binary format. Then we'll add our file and video ID to our upload request and check out the response! 

If everything works out, you'll get a response showing you all the metadata and configuration details for your upload. You can navigate to [your api.video dashboard](https://dashboard.api.video/overview) to see the video you uploaded there. If you're uploading a big video, give it a few minutes to be ready. 

If you get stuck or have questions, you can write us on our [community forum](https://community.api.video).

api.video offers a wide range of tools that empower developers and content creators to tailor video delivery according to specific needs. From utilizing custom domains to setting domain referrer restrictions and implementing private videos, api.video provides customization options for a more personalized viewer experience. This article explores how these features, combined with in-stream ads and player customization, can add flexibility to your video delivery strategy.

## Custom domains

A custom URL is not just a branding tool; it is a way to make your video content feel integrated into your digital presence. By using api.video's custom domain feature, you can serve your videos from a URL that fits your brand, building trust and recognition among your viewers. Custom domains are especially useful if your product or website is bound to a specific domain URL by legal requirements, like for an educational institution or through government services.  

&nbsp;  

This feature is straightforward to set up and can transform the viewer's experience by maintaining consistency across your digital outputs. Learn more about [setting up custom domains](https://docs.api.video/delivery/using-custom-domains) with api.video.



## Domain referrer restrictions

Security is a critical aspect of video delivery. api.video's domain restrictions help you ensure that your content is only accessible through domains that you specify. This means unauthorized sites cannot embed or misuse your content, protecting your videos from potential piracy or unapproved usage. This level of control enables you to maintain the integrity and exclusivity of your video content. Here’s how you can [implement domain restrictions](https://docs.api.video/delivery/domain-referrer) for your videos.



## Private videos

When dealing with sensitive or premium content, privacy is a hard requirement. api.video enables you to set videos as private, allowing access to specified viewers only through secure private tokens. api.video supports delivering private video content through [our in-house player](https://api.video/product/player/) and third-party players, ensuring control where necessary, like for subscription-based services or internal corporate training materials. Discover more about [managing video privacy](https://docs.api.video/delivery/video-privacy-access-management).

&nbsp;

One of our customers relies on the private video feature to enable their business that works with censored adult content. Check out the complete story [here](https://api.video/blog/case-studies/case-study-mintstars/)!

## In-stream ads

Monetization is a crucial aspect of video strategy for many creators. With api.video, [embedding in-stream ads](https://api.video/blog/video-trends/how-to-monetize-your-videos-with-in-stream-ads/) into your content is a streamlined process. Whether it's pre-roll, mid-roll, or post-roll, in-stream ads can be set up to fit the flow of your videos, ensuring a non-disruptive user experience while also opening up your revenue streams. api.video uses industry-standard URL parameters to set up in-stream ads through `VAST`, `VPAID`, or `VMAP` ad tags, making this solution integrate seamlessly with your content. Learn how to [integrate in-stream ads](https://docs.api.video/delivery/ads) in your videos.



## Player customization

The ability to customize your video player is not only about design; it is primarily about enhancing viewer interaction and engagement. api.video offers extensive options for player customization, enabling you to modify controls, appearance, and behavior to match your brand's style and functional requirements. This personalized approach ensures that every aspect of video playback is optimized for your audience. Learn about the [features of api.video’s player solution](https://docs.api.video/delivery/video-playback-features), and explore the [available customization options](https://docs.api.video/delivery/player-customization).



## Content optimization

Customization does not stop with the player; api.video also enables you to make your content stand out through branding and annotation. You can [add custom thumbnails](https://docs.api.video/vod/add-a-thumbnail-to-your-video) to your content either via file upload, or generate one based on a timestamp from your video. You can also improve viewer experience by [adding chapters to your video](https://docs.api.video/vod/creating-and-managing-chapters), making longer content easier to navigate. To ensure that your video is not reused by unauthorized third parties, api.video also enables you to [add permanent watermarks](https://docs.api.video/vod/add-a-permanent-watermark) to the video objects you upload.



## Closing thoughts

api.video's platform gives you control over how your content is delivered and displayed. By leveraging features such as custom domains, domain referrer restrictions, private videos, in-stream ads, and customizable players, you can create a viewing experience that is both secure and uniquely suited to your audience's needs. You can do these easily through our [dashboard](https://dashboard.api.video/), or if you prefer a more hands-on approach, you can build everything [through our API](https://docs.api.video/reference). Enjoy the flexibility of api.video and take control of your video content delivery today.

&nbsp;

api.video offers scalable, ready-to-use services that not only support industries like [online learning](https://api.video/use-cases/e-learning/) and [e-commerce](https://api.video/use-cases/marketplace/), but also integrate seamlessly, enabling you to focus on what truly matters—growing your business and enhancing your product.

&nbsp;

***Check out our [pricing](https://api.video/pricing/) and [sign-up](https://dashboard.api.video/register) for a free sandbox account now to see how it works!***

api.video gives you the freedom to customize your video delivery

customize-video-delivery.png

Introducing Custom Domains for api.video

A closer look at an adult streaming platform's success with api.video

Enhance viewer experience in your mobile apps with api.video's player SDKs

Authenticate

At api.video, we offer a number of ways to upload video into your account. When you [create and upload a video](https://api.video/blog/tutorials/video-upload-tutorial/), the first step is to authenticate with your API, and generate an authentication token.

For a static website, it may not be feasible to create a new token on each page load. For instances like these, we offer a delegated upload token. This token works like a public key to your api.video account, allowing secure uploads without exposing your API key.

## Create an [api.video](https://api.video) account

If you already have an account, you can skip this step.

Before you can start uploading your first video, you need to **[create an api.video account](https://dashboard.api.video/register)**.

Once you are logged in to the Dashboard, select the environment of your choice (sandbox or production) and copy your API key.

large_Screenshot 2024-02-21 at 4.55.04 PM.png

medium_Screenshot 2024-02-21 at 4.55.04 PM.png

small_Screenshot 2024-02-21 at 4.55.04 PM.png

thumbnail_Screenshot 2024-02-21 at 4.55.04 PM.png

copy-api-key-through-dashboard.png

You'll be able to find your API key in the dashboard **[dashboard.api.video](https://dashboard.api.video/overview)**.

There are separate API keys for Sandbox and Production **[environment](https://docs.api.video/reference#environments)**.

In production, you can also manage multiple API keys from your dashboard, for different applications.

## Generate the Upload Token

We will use the [delegated upload API](https://docs.api.video/reference/api/Upload-Tokens#generate-an-upload-token) in order to generate our token. In this example, we will use curl to make the requests, however, you will find examples and code snippets with various programming languages using [api.video API client libraries](https://docs.api.video/sdks/api-clients) in our [documentation](https://docs.api.video/vod/delegated-upload-tokens).

This will result in JSON response with the delegated access token:

`{"token":"to1R5LOYV0091XN3GQva27OS"}`

This token can now be used to upload videos into your api.video account. In the example below, I am uploading a video of clouds into my sandbox account.

Go ahead and try this yourself!  Since the delegated upload is into my sandbox account, the video will be watermarked and deleted after 72 hours. Simply point the ```-F file@``` to a video on your local file system, and it will be uploaded into my sandbox.

You'll receive a response similar to this:


my_cool_video.mp4

These urls can be shared for others to watch your video. On opening the player link, you might see a video like this: (Note the video link in the JSON above has expired and will throw a 404 error).

## Expiring Delegated tokens

Delegated tokens act like a public API - anyone with this token and the api.video url could upload videos into your account. For this reason, you can [revoke](https://docs.api.video/reference/api/Upload-Tokens#delete-an-upload-token) delegated tokens so they can no longer be used.

## Delegated Token Time To Live

In addition to expiration, you can also set a 'time to live' (TTL) when creating a token. Once the token expires, itc an no longer accept uploads.  If you generate the token when the uplaod begins - you must ensure that at least one segment of the video is uploaded before the token expires, or the video will be rejected at the server.  You can split the video with the [JavaScript file API](https://api.video/blog/tutorials/uploading-large-files-with-javascript/).  Once the token expires, you'll have 24 hours to complete the rest of the upload (which should be PLENTY of time).

## HTML 
The [API docs](https://docs.api.video/reference/api/Videos#upload-a-video) have a thorough explanation on how to build a form and upload a video.

## Conclusion

Delegated upload offers a user-friendly method for video uploads, allowing the creation of tokens with specified expiration. This method is ideal for one-time video uploader solutions and quick content uploads without immediate metadata concerns.

Let us know how you are using delegated upload in your video service in our [community forum](https://community.api.video/)


Delegated uploads: Make video uploads with a created token

medium_delegatedupload.jpg

small_delegatedupload.jpg

thumbnail_delegatedupload.jpg

delegated-video-upload.jpg

Delegated uploads: Make video uploads with a token you create

Announcements

small_cedric.webp

thumbnail_cedric.webp

cedric.webp

Cédric Montet

Company News

AI, models, assistants, agents and prompts sound and look magical on social networks. But from the countless conversations we have had with startups and Enterprise customers over the last months, we have realized that the gap between existing video workflow and concrete use cases is real.

&nbsp;

Whether it’s getting transcripts in seconds, changing the language of your video or being able to search for items in your content – the benefits, value or potential savings you see and can get with AI are obvious.

&nbsp;

This is why we are thrilled to unveil how we are bringing AI into video, where we are heading and how you can get more value from it!

## What does the future of video streaming look like?

AI will completely upend video consumption as we know it today. We envision a world where video is not a content piece anymore which you can only start and stop – because AI will make videos discoverable and universally understandable. More than ever it resonates fully with our core mission – connecting people through their cameras.

&nbsp;

Since Day 1, we are building api.video to make your use cases, first, a reality and, then, a success.

&nbsp;

Back in the days, the fragmented video streaming market, the number of services you had to aggregate, the lack of innovation by the incumbents was preventing you from joining our video-first world, while your efforts and budgets were consumed by maintaining mashups instead of focusing on what matters. 

&nbsp;

This is why we have built the video backbone and seeing that, now, you host 2.5 millions videos on api.video and deliver dozens of millions videos every month demonstrate why simplicity, exceptional performances and an E2E approach were key.


&nbsp;

What’s happening today with AI, the efforts it requires to benchmark, setup and customize LLMs, to run and maintain them, the Infrastructure you have to build to execute them before getting any value, remind us of the state of the streaming market when we had launched api.video.

&nbsp;

Helping you to benefit from the AI revolution by abstracting all the underlying complexity became obvious and a natural next step in our evolution.

&nbsp;

To get there and to bring you there, here is what we are building, api.video’s very first – **Video Model Hub**.

&nbsp;

Let’s start with the root principles encompassing our work on this Hub:

&nbsp;

- **Open-source models over private ones.** We are long time believers and contributors of the open source community and we have chosen to run only models that are available publicly.

- **Your data is… your data.** You already trust us to host and deliver sensitive content,and this is exactly why we won’t train our own models or sell the data generated from your videos to anyone.

- **Privacy at the core.** We host and execute the models inside our own infrastructure. Your data remains inside the api.video infrastructure. Your videos or data is not sent to external partner, SaaS providers like OpenAI, or others.

- **We believe that every organization will eventually build their own models to leverage their unique data sets**. Next year, alongside the ability to run public and open source models on api.video, we will offer you the ability to host your own.

- **One API to rule them all.** As we have already replaced a dozen of services and vendors under GET/videos to make your videos available worldwide in seconds, we are abstracting all the complex work of executing LLMs behind clear and straightforward endpoints.

&nbsp;

At a glance, api.video brings to you today the power of AI by:

- Leveraging its years of experience in video management and building infrastructure, with GPUs.
- Combining with the most advanced LLMs available on the market.

so that you get more value from your videos in a few lines of code!

&nbsp;

## Here are the first three new features from the Video Model Hub

### 1. Summarization of long-form videos

Upload a video in English, Spanish, French, Portuguese or Chinese and get a text summary of 120 characters with the 3 key takeaways discussed in the video (within seconds!). Ideal to index or preview long form recorded meetings or courses!

&nbsp;

_The video below gives you a glimpse into AI summarization._


### 2. Transcription of your video in seconds

Get a transcript (in .VTTformat) from your uploaded video with the timecodes and offer the captions to your audiences. The best part? The api.video player supports VTT files so there’s nothing new that you need to build on your side!
This also makes your content more inclusive by making it accessible to people with hearing impairments. 

Video on demand

Live streaming

Analytics

Video infrastructure

Video player

AI features

See all features

Online learning & Corporate training

Social & Entertainment

Marketplace & E-commerce

Communication & UGC

Generative AI

Quickstart guides

Documentation

Ecosystem catalog

Clients & SDKs

Community

Blog

Demos

Customer success stories

Help center

Delegated Upload