Video upload

Normal

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

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

Python

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

## Prerequisites

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

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

In this sample we do the following: 

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

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

Happy coding!

Progressive uploads with the api.video Python client

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

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

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

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

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

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

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

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

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

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

1. Retrieving a token using your API key. 

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

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

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

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

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

Upload large video files without compromising on speed

large_progressive-upload.png

medium_progressive-upload.png

small_progressive-upload.png

thumbnail_progressive-upload.png

progressive-upload.png

Progressively upload large video files without compromising on speed

api.video offers a PHP client to make it easier for you to upload your videos. Today we'll walk through how to do this. You can always hop on over to the GitHub repository if you'd prefer to learn about the client that way too - [api.video PHP client](https://github.com/apivideo/php-api-client).

## Prerequisites

For this project, you'll need these things: 

* Composer - if you don't have it set up, go here to learn about it and get it installed - getcomposer.org
* An api.video account - you can sign up [here](https://dashboard.api.video/register).

## Installation

You'll need to install a few things using Composer:

* The api.video PHP client - `composer require api-video/php-api-client`
* Symfony HTTP client - `composer require symfony/http-client`
* nyholm/psr7 - `composer require nyholm/psr7`

You can type **composer update** to make sure everything is pulled into your project and configured. 

## Code sample

Here is the code sample for uploading a file. You need to change **'yourAPIkey'** to your key that you retrieve from the api.video dashboard after you create an account. Place the video you want to upload in the same folder as your code sample. For the sake of simplicity, this code sample hardcodes the title of the video - change **VIDEO_TO_UPLOAD.mp4** to the title of your video file.

### Import the client
In the first part of the code, you import the parts of the api.video PHP client you'll need. The client is more efficient when you import the endpoints you need for your code, instead of everything. You also need the HttpClient from Symfony for this implementation. So it will look like this:

## Initialize the client 
Next you initialize the client for use in your API calls. 

## Create your video payload 
The next part of the code includes a video creation payload. This is a cool part of the PHP client. You can add all the metadata you'd like for your video here. Later, you're able to update your code as well. Consult the [Create a video](https://docs.api.video/reference/api/Videos#create-a-video-object) endpoint in our API reference documentation for available parameters. You capitalize them when adding them into your payload. So title becomes `setTitle` as shown in the code sample. Any parameters in camel case that you want to use would change a bit. For example, the docs have mp4Support, but if you are using the PHP client, you would write it as `setMp4support`. 

When you send multiple parameters, the code would look like this: 

`$payload = (new VideoCreationPayload())
    ->setTitle('My cool video');
$payload->setTags(['tag 1', 'tag 2']);`

When you're done setting up your payload, then you use the client to send this information to api.video servers and create your video container.

## Upload the video
In the last part of the video, you retrieve the video ID for the container you made and upload your video into the container. You can only upload into a container once, but you can change its metadata later if you wish. You can see whether it worked by reading the echoed response in the terminal.

## Conclusion
Now you know the basics of uploading a video with the api.video PHP client! You can check whether your upload worked by going into your dashboard and looking in the videos section. You should see it there. If you get a note that it's still processing, give it a bit of time to get the video ready, especially for big videos. 

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

Upload a video with the api.video PHP client

large_Upload with PHP.png

medium_Upload with PHP.png

small_Upload with PHP.png

thumbnail_Upload with PHP.png

Upload with PHP.png

video create

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/api/Videos#create-a-video-object)
* [Upload a video](https://docs.api.video/reference/api/Videos#upload-a-video)

## 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

Video bumpers are small video intro and exit scenes added to a video to help the viewer understand what they are about to watch.  The intro 'bumper' often has a title or description of the video that is to follow, and the outro 'bumper' provides a call to action on what the viewer can do next - now that they have watched the video.

At api.video, we add bumpers to many of our videos to provide context and a subject for each video, and the end bumper provides a 'call to action' after the video has been watched.

Adding bumpers to your video makes your video appear more polished, as an editing step was taken to add these to the raw video you recorded with your camera (or screen sharing tool).  It is often a manual task in your video editing software.

In this post, we'll automate the task of adding bumpers to a video recording.  We'll use the [Shotstack API](https://shotstack.io/) to add the bumper image and text titles to the front and end of a recorded video.  The completed video will then be uploaded to api.video, and be ready to play in seconds - removing several manual steps from the creation of your training videos!

You can also check out the API reference documentation for the endpoints used for this project: 
* [Webhooks](https://docs.api.video/reference/api/Webhooks#create-webhook)
* [Video status](https://docs.api.video/reference/api/Videos#retrieve-video-status-and-details)

## The "old way" of adding bumpers:

1. Create slides in Google Slides for the intro & outro
2. Take screenshots of the slides
3. Import the screenshots into iMovie
4. Add them to the video timeline
5. Encode the video
6. Upload the video to api.video


The downsides to this: 
Steps 1-4 are all manual, and are repeated for each video that I create.
In steps 5&6 there is a lot of waiting.  

## The "new way": bumper.a.video

Add images, text and video to a web form. Click "upload." The video will upload and have the bumpers added automatically - with no manual work, and (what seems like) a lot less waiting.



Let's see how it is built!


## Ingredients for the demo

* [api.video account](https://dashboard.api.video/register)
* Background image: a 16:9 image suitable for the background

large_bumperbackground.png

medium_bumperbackground.png

small_bumperbackground.png

thumbnail_bumperbackground.png

bumperbackground.png

* Watermark image.  In this demo, we'll use the api.video logo. It is sized to 100x100 pixels to fit properly on the video. The image is also transparent to ensure that there is no white "background" on top of the video.

logoorange100.png


* 4 Text fields

  * Intro title
  * Intro 2nd title
  * Outro title
  * Outro 2nd title


## The tools used in this demo

### Shotstack

The Shotstack API is a video editing API. You can splice together videos, add watermarks, and add text into your video using their API.  We'll use this API to create our bumpers:

1. Upload a background image (we use the same image for both bumpers)
2. Add a title and a 2nd title for both bumpers (text fields)
3. Add a watermark in the upper right corner for the entire video.

### api.video

The initial video will be uploaded to api.video. Once the mp4 has been produced, it is sent to Shotstack for 'bumper work.' Once the video with bumpers has been created via the Shotstack API, we will re-add the completed video to api.video, and provide a playback url.


## Creating the video

Once you hit 'send' on the form at bumper.a.video, a lot of action takes place:

1. The 2 images are uploaded to bumper.a.video/images.  Shotstack requires that the images be publically available on the internet for the api to process them.
2. The video is uploaded to api.video.  For security reasons there are a few steps in this process:

   * The node server makes 2 calls to api.video: creating a delegated token and a videoId (with the name & description provided by the user). 
   * A delegated token works as a public API token for upload only.  
   * Sending this and the videoID back to the browser, we can use the api.video [JavaScript uploader](https://docs.api.video/sdks/vod/apivideo-typescript-uploader) to securely upload the video to api.video.
3. Once the video is uploaded - a message appears to the user, and a button appears to update the status of the processing.

Now that the video has been uploaded to api.video, the rest of the work is done between the Node server, api.video and Shotstack. 

1. Shotstack requires a publically available video URL for processing the video.  We use the ```video.encoding.quality.completed``` [webhook](https://docs.api.video/reference/api/Webhooks#create-webhook) to monitor the creation of the videos at api.video. When the webhook alert tells us that the mp4 version of the video has been created, we know that the mp4 file is ready.  Now we can request the api for the URL of the mp4 (to send to Shotstack).
2. In order to build the bumpers correctly, we also need the duration of the video uploaded. The [video status](https://docs.api.video/reference/api/Videos#retrieve-video-status-and-details) endpoint tells us the duration of the video in the metadata section of the response.

### Creating the call to Shotstack

The Shotstack API works like an onion with many layers that must be defined to create a full video: 

Every video has a ```timeline``` that defines the overall video.

Each ```timeline``` has one or more ```tracks```.  Tracks sit atop one another (in our case, we will have a watermark track sitting atop the video track).

Each ```track``` has one or more ```clips```.  The clips are bits of video/text or images that have specific durations inside the track.

Each ```clip``` has an ```asset``` that defines the clip - this could be a string of text, or an image or a video file.



large_screenshot-2021-09-30-at-17-10-37.png

medium_screenshot-2021-09-30-at-17-10-37.png

small_screenshot-2021-09-30-at-17-10-37.png

thumbnail_screenshot-2021-09-30-at-17-10-37.png

screenshot-2021-09-30-at-17-10-37.png

There are two tracks that play the length of the video - the watermark track - which has a single clip for the single image asset.

the code for this (using the NodeJS SDK) looks like this:

```
let watermarkAsset = new Shotstack.ImageAsset;
							watermarkAsset.setSrc('https://bumper.a.video/images/'+wmpath)
						//watermark to run full video 
						let watermarkClip = new Shotstack.Clip;
							watermarkClip.setAsset(watermarkAsset);
							watermarkClip.setPosition("topLeft");
							watermarkClip.setOffset({"x": 0.05,"y": -0.05});
							watermarkClip.setOpacity(0.5);
							watermarkClip.setFit("none");
							watermarkClip.setStart(0);
							watermarkClip.setLength(4+duration+4);
```

The clip is used to set the location - in this case the top left - with a bit of (x,y) adjustment, the opacity (50%), and how long the clip should play.

Since the intro and outro are 4 seconds, and the video has length ```duration``` - we set this clip to appear for the entire video.

The main track of the video has many clips (and assets).  Both the intro and outro have background and 2 text assets each, and the middle section has just the video clip/asset.

Shotstack does not like having clips with identical times. That means I cannot add the titles at the same moment as the background image. I could have perhaps placed the text items into different tracks to overlay the background - and then had them all start at the same time.  Instead I have the background appear, and then add each bit of text every 100ms:

```
						let titleIntroTextAsset =new Shotstack.TitleAsset;
							titleIntroTextAsset.setText(introTitle);
							titleIntroTextAsset.setStyle('chunk');
							titleIntroTextAsset.setColor('#ffffff');
							titleIntroTextAsset.setSize('x-large');
							titleIntroTextAsset.setPosition('center');
						let titleIntroClip = new Shotstack.Clip;
							titleIntroClip.setAsset(titleIntroTextAsset);
							titleIntroClip.setStart(0.1);
							titleIntroClip.setLength(3.9);

						let titleIntroTextAsset2 =new Shotstack.TitleAsset;
							titleIntroTextAsset2.setText(introTitle2);
							titleIntroTextAsset2.setStyle('chunk');
							titleIntroTextAsset2.setColor('#ffffff');
							titleIntroTextAsset2.setSize('large');
							titleIntroTextAsset2.setPosition('bottom');
						let titleIntroClip2 = new Shotstack.Clip;
							titleIntroClip2.setAsset(titleIntroTextAsset2);
							titleIntroClip2.setStart(0.2);
							titleIntroClip2.setLength(3.8);
```

The main text asset is present from 100ms into the video to 3.9s, and the secondary text asset is present from 200ms to 3.8s.  It looks kind of cool, as if they are boomeranging in and out, so I kept it this way.

The video clip in the middle has the volume set to 50%. It starts at 4s, and has a length of ```duration``` seconds.

```
						let videoAsset = new Shotstack.VideoAsset;
							videoAsset.setSrc(mp4Url);
							videoAsset.setVolume(0.5);
						let videoClip =  new Shotstack.Clip;
							videoClip.setAsset(videoAsset);
							videoClip.setStart(4);
							videoClip.setLength(duration);
```


All of this data is sent to the Shotstack API, and it begins processing the video - adding the watermark and the bumpers.

Once the video is completed (the Node server polls every 2s to get an update), a new video at api.video is created, using the source URL from Shotstack:


```
	function updateApiVideo(url){
							//ok so the video is created at Stostack
							const videoCreationPayload = {
								title: title, // The title of your new video.
								description: descr, // A brief description of your video.
								source: url, // If you add a video already on the web, this is where you enter the url for the video.
								
							}; 
							finalUpload =  client.videos.create(videoCreationPayload);
							finalUpload.then (function(finalVideo) {
								console.log(finalVideo);
								var finalvideoId = finalVideo.videoId;
								var finalPlayerURL = finalVideo.assets.player;
								console.log('finalvideoid',finalvideoId);
								console.log('finalPlayerURL',finalPlayerURL);
								//res.send(finalPlayerURL);
								videoProgressJson.finalVideoId = finalvideoId;
								videoProgressJson.finalPlayerURL = finalPlayerURL;
								videoStatus(videocreationList, videoId);



							});
						}
```

Finally - we use the same video encoding webhook we used earlier to wait until the 720p version of the video is ready for playback (looking for the new videoID, and the HLS version at 720p resolution).

The user - back on the webpage, can click the "update status" button and track this process.  The update status reports:

* Initial mp4 created
* Shotstack id
* Shotstack status
* New api.video videoID
* Final video at 720p

When the last item reports true - we add a link and embed the new video right onto the bumper.a.video page.

## Conclusion

Automating the mundane tasks we run regularly makes life easier. In this demo, I identified a process that was very manual - creating video bumpers for demo videos.  I used [api.video](https://api.video) and [Shotstack.io](https://shotstack.io) to automate the process, and thereby making the creation of video demos faster and easier!

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

Add bumpers to your video with bumper.a.video

large_bumperavideo-1.png

medium_bumperavideo-1.png

small_bumperavideo-1.png

thumbnail_bumperavideo-1.png

bumperavideo-1.png

Delegated Upload

Video sharing apps like TikTok offer 'duets', where you record a video next to a video playing back, add a commentary, or sing along. In this demo, we'll build a duet app in the browser!



## Creating a duet

For a duet, you need to have a camera, a mic and a video that you want to duet with. Since the video you are singing along with plays out loud, using headphones is recommended for best results. Due to varying support of media APIs, this demo will work in Chrome, Edge and Firefox, but will not run in Safari. :(

The default sing-along video is Nathan Evans singing "The Wellerman," a sea shanty that has been a viral duet hit on TikTok this year, but you can change this with the video URL input box on the left side of the screen. 

When you access the site, it will ask you for access to the camera and mic for camera and mic access - this is clearly required for your duet. Once you've approved usage, choose which mic/camera combo you'd like to use, and start recording.  Both you and Nathan will appear next to each other. Sing to your heart's content, and when you are done with the duet, press "stop."  The video playback will stop and your video will be uploaded to api.video.  In a few seconds the video will be ready for playback at the link provided.

(If you notice that your video/audio is a bit delayed from the singer in the video, you can move the video delay slider and it will shift your video/audio by 50ms to help you sync them up.  We'll discuss why this is needed in the implementation section.)

## How it all works

Much of this code was restructured from our [record.a.video](https://record.a.video) app - rather than sharing a screen - we share a video. 

### Routing the video

The video from the camera and the video are both drawn to a canvas. The canvas is then sent to a MediaRecorder. When the recording is completed, we use the videoUploader to upload the video to api.video.

large_screenshot-2021-09-17-at-12-00-44.png

medium_screenshot-2021-09-17-at-12-00-44.png

small_screenshot-2021-09-17-at-12-00-44.png

thumbnail_screenshot-2021-09-17-at-12-00-44.png

screenshot-2021-09-17-at-12-00-44.png

Interesting features:

When grabbing the video from the camera, you can specify the aspect ratio:

```
 var videoOptions = {
            deviceId: cameraId,
            aspectRatio: {ideal: 9/16},
            
            frameRate: {ideal: cameraFR}
        };
```

To keep this 'TikToky', we'll force the video capture to be portrait (9/16). This is supported in Chromium browsers, but not in Firefox (so we lay out the video differently for FF users):


large_screenshot-2021-09-17-at-12-12-11.png

medium_screenshot-2021-09-17-at-12-12-11.png

small_screenshot-2021-09-17-at-12-12-11.png

thumbnail_screenshot-2021-09-17-at-12-12-11.png

screenshot-2021-09-17-at-12-12-11.png

The video from the canvas is captured and sent to the MediaRecorder. When recording is complete, the video is then uploaded to api.video.

### Routing the audio

In record.a.video, there is just one audio input source - the mic. In duet.a.video, we have 2 audio sources, the mic and the video. We cannot simply add a second audio track to the MediaRecorder - it only supports one audio track. So, we look to the Web Audio APIs to help us 'mix' the audio.

In the code below, we create audiocontexts for the streams from the mic and from the video:

```
  //audio track from mic "audioStream"
     micAudioIn = audioContext.createMediaStreamSource(audioStream);

  //audio track from video
    if(videoElem.captureStream){
                videostream = videoElem.captureStream();
   }else{
                videostream = videoElem.mozCaptureStream();
  }
  videoAudioIn = audioContext.createMediaStreamSource(videostream);
  videoAudioin2 = audioContext.createMediaStreamSource(videostream);
```

micaudioIn is the audio context form the microphone, and the videoAudioIn is the audio extracted from the video. The ```captureStream``` property is considered experimental, so Firefox requires the mozCaptureStream property. (This is where Safari fails us, there is no support for captureStream in Safari).

large_mdnsupport.png

medium_mdnsupport.png

small_mdnsupport.png

thumbnail_mdnsupport.png

mdnsupport.png

You may have noticed that we create two contexts for the audio from the video. In Chrome, when you extract the audio from a video to an audiocontext, the audio still goes to the speaker. In Firefox, the audio is extracted to the audiocontext, and does NOT get routed to the speaker.

large_audiocontextbrowser.png

medium_audiocontextbrowser.png

small_audiocontextbrowser.png

thumbnail_audiocontextbrowser.png

audiocontextbrowser.png

The solution is to create 2 audiocontexts for the video, and send the second one to the speakers (audioContext.destination is the default destination of the audio):

```
		videoAudioin2 = audioContext.createMediaStreamSource(videostream);
		//i want to send videoAudio2 to te speakers
		videoAudioin2.connect(audioContext.destination);


```

Going back to the mic and the audio from the video, we must combine them into one stream and connect them to the MediaRecorder.  This is relatively easy, but first we want to do some audio 'mixing.'

We will perform 2 operations on the video's audio stream: a volume & a delay control.

### Volume mixing

When adding 2 videos, perhaps one video is louder than the other one. The createGain() property of the audio context lets you raise or lower the volume of an audio track. Since there are only 2 tracks being mixed in, we just need to be able to adjust one track - so we modify the volume of the video. In the case of the "Wellerman" video, I found 50% to be sufficient.

I also found that the microphone audio was delayed compared to the audio from the video (try clapping along with a video when the delay is set to zero - the results are disconcerting). We can add a delay() to the video's audio to re-sync the 2 streams. You can set this value with the slider in the app (each step is 50ms of delay). For my computer, I found that 250ms helped to sync the two videos.

We then combine the two streams and add them to the mediaRecorder we created with the video.

```
     //change the volume of the video in
            var gainNode = audioContext.createGain();
            var volume = document.getElementById("volume").value/100;
            console.log("vol", volume);
            videoElem.volume = volume;
            gainNode.gain.value = volume;
            videoAudioIn.connect(gainNode);

            //delay the video in a bit
            var delay = audioContext.createDelay();
            
            delay.delayTime.value = micDelay;
            delay.connect(gainNode);

            //heres the destination for the combined audios
            audiocontextDest = audioContext.createMediaStreamDestination();

            //add the audio to the destination
            micAudioIn.connect(audiocontextDest);
            gainNode.connect(audiocontextDest);
            
            //ok so now the audio is in the audiocontextDest stream
            //grab the stream
             var audiocontextDestStream = audiocontextDest.stream;


             //grab the audio track from the stream
             var audiocontextDestStreamAudioTracks =  audiocontextDestStream.getAudioTracks();
            //add the audio track to the canvas output stream (the video)
            stream.addTrack(audiocontextDestStreamAudioTracks[0]);
            console.log("audio stream added!");
```


Now that both video and audio are added to the MediaRecorder - we can use the api.video [video uploader JS](https://docs.api.video/sdks/vod/apivideo-typescript-uploader) library to upload our duet to api.video. 




large_audioflow.png

medium_audioflow.png

small_audioflow.png

thumbnail_audioflow.png

audioflow.png

## Conclusion

That's all there is to it! Along the way, we've gotten to play with some fun web audio and video APIs to manipulate and mix the audio and video in the browser into the recording we create.  

Try out [duet.a.video](https://duet.a.video) for yourself. The code is on [GitHub](https://github.com/dougsillars/duetavideo) if you'd like to reuse and create your own duet app.

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 register in just a few moments by following [this link](https://dashboard.api.video/register). Happy building! 


Video duets in the browser

thumbnail_hqdefault.jpeg

hqdefault.jpeg

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/api/Webhooks#create-webhook).  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! 

False start: showing the playback url before the it’s ready

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/api/Videos#create-a-video-object) 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! 



Adding rate limits to your video uploader

large_stop-jpeg.jpeg

medium_stop-jpeg.jpeg

small_stop-jpeg.jpeg

thumbnail_stop-jpeg.jpeg

stop-jpeg.jpeg

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

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

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. :) 

Localize Advertisement Videos with Personalized Voice Overs!

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

codec

small_cedric.webp

thumbnail_cedric.webp

cedric.webp

Cédric Montet

Product updates

At api.video, our goal is for video to be easy and affordable for anyone to build, be it individuals or organizations. We understand that achieving this goal means reducing costs at some stage of the video streaming process. That’s why, we now offer adaptive bitrate encoding for your videos at zero cost. 

&nbsp;

Yes, you heard me right. 

&nbsp;

**Encoding videos will be absolutely free for all video qualities (1080p or 4K) at [api.video](https://api.video/) - no hidden calculations, footer notes or tricks.**

(Check out this [video](https://www.youtube.com/watch?v=ouosgLbW7Ts) for more details) 


## A step towards making video streaming affordable

Video encoding is crucial as it makes it possible for videos to be shared and played smoothly on the internet. It is why we are easily able to consume various types of video media, whether it’s a YouTube video, our favorite shows on Netflix, or even catching up with friends across the globe on Zoom. Video encoding basically makes the world go around in regards to anything related to video and video content.

&nbsp;

We at api.video recognize that. From [increasing the transcoding and playback speed ](https://api.video/blog/product-updates/2021-in-review/)to building [specialized hardware like ASICs](https://api.video/blog/video-trends/the-comeback-of-specialized-hardware/) cards to increase our transcoding capacities, we've been working to make video streaming easier for you every day. And after dedicating ample time to engaging with our customers and learning about their concerns, free encoding seemed to be the next step in this direction. 

&nbsp;

So, we worked tirelessly behind the scenes to give you what no one else will - free encoding for all video qualities, be it 360p or 4K. 

## How does free video encoding benefit you as a customer

The benefit is straightforward: you save a LOT of money!

&nbsp;

- With free video encoding, you will have one less thing to worry about. As you know, you pay for three things for streaming videos — encoding, hosting, and delivery – out of which encoding is the most expensive, especially if you have a lot of videos. Free video encoding will allow you to focus your attention and resources to what is most important.

&nbsp;

- As the video needs of your app users grow, you might need to scale up your encoding capacity. Free video encoding services will give you the power to scale without any additional costs, meaning your users can handle more videos without increasing your expenses.

&nbsp;

- You can [migrate from your previous provider to api.video](https://api.video/compare/azure-media-services/) without paying an ‘entry tax’ to us. With free video encoding, you no longer need to spend money on encoding videos with a new provider when you have already paid for encoding with an older one.

&nbsp;

Now with all the saved cost, you can allocate your resources and money to a place where it is actually important – building your product and delighting your users. 

## How to get started

To use the free video encoding benefit, getting started is easy. 

&nbsp;

- If you’re a new user, [sign-up](https://dashboard.api.video/register) for a free sandbox account and start uploading your videos
- If you are looking to migrate from another vendor, [import](https://import.api.video/) your videos from your current vendor
- If you have any questions, [talk to us](https://meetings.hubspot.com/apivideo/talk-to-us) by booking a slot in our calendar

&nbsp;

To know more about our[ features](https://api.video/features/), [pricing](https://api.video/pricing/) or ask any other questions, [talk to our team ](https://meetings.hubspot.com/apivideo/talk-to-us)and we will help you out. 

&nbsp;

Or, you can straightaway [sign-up](https://dashboard.api.video/register) for a free sandbox account and check our product out for yourself. 


Huge pricing update: Introducing video encoding at no cost

small_Blog_Zero Cost.webp

thumbnail_Blog_Zero Cost.webp

Blog_Zero Cost.webp

api.video

Video trends

Modern technology has been helpful for an increasingly fast and simple method of consuming various types of video media, whether it’s a YouTube video, our favorite shows on Netflix, or even catching up with friends across the globe on Zoom. Despite the relative ease of doing anything related to video, a few complex processes take place behind the scenes, away from public view. One such process is video encoding.

Video encoding basically makes the world go around in regards to anything related to video and video content. Thanks to the technologies behind the video encoding process, it has become much easier for people and companies to share video content on the internet. But what exactly is video encoding, and what happens during the process? We’ll take a closer look at this and much more in this handy guide to video encoding.

## What is video encoding?

In a nutshell, video encoding occurs when you take raw video footage, either from a digital camera or an analog film camera, and digitally compress it to make it a more manageable file size. Video encoding happens daily in both professional and personal capacities, and many people don’t realize it.

But, without encoding, services like Netflix and YouTube would not exist – or, at least, not in the same way that it does today. Without it, we couldn’t send videos of our beloved pets to our friends and family as easily as we can today.

## Why is video encoding used?

There are a variety of reasons why video encoding is used, but all factors point to the single function of video encoding – **compression**.

This is done to ensure optimal performance and compatibility with a selected suite of software and hardware, be it for DVD/Blu-ray playback, mobile viewing, online video streaming, or general video editing. A file's video and audio information undergo transformation and compression during the encoding process, all in accordance with the requirements of the selected encoding standard.

On a professional level, the ability to compress raw video into more manageable sizes makes it easier to transmit video content such as training, promotion, presentation, and so on over the internet. 

On a personal level, video encoding makes it much easier to send videos taken from your phone directly to friends and family. Most modern-day personal devices have built-in video encoding capabilities to allow for this to happen without a second thought.

To put things in perspective, uncompressed or unencoded video can have a data rate that’s as low as 3,000 Mbps and as high as 12,000 Mbps, depending on the length and quality of the video recorded. 

**Without encoding, it would take up to days for anyone to not just transmit video, but to be able to consume it, too.**

## Differences between video encoding and video transcoding

You need to be familiar with two more [essential terms related to video encoding](https://api.video/what-is/) – transcoding and codecs.

Transcoding relates to the conversion from one digital encoding format to another. It takes the already encoded video file, decompresses it, and then alters it before re-encoding or compressing it into a different codec. Codecs are what allow encoding to occur in the first place. They are software or hardware that gives us the ability to compress video to make them more easily stored and delivered tightly.

While you may hear “encoding” and “transcoding” used interchangeably, the two terms actually mean different things. Putting it succinctly, encoding is the initial process of compressing a video from a source – such as a camera – into a codec, while transcoding takes an already encoded video file to convert it into a different codec.

## Examples of video codecs

In order to understand video encoding, you must first be familiar with two interrelated terms: [video codecs and video formats](https://api.video/blog/product-updates/every-video-format-codec-and-container-explained/). These also tend to be used interchangeably, but much like the terms encoding and transcoding, they refer to two different things.

Video formats are the type of files in which the compressed video/audio is stored. Also known as a “container”, you can tell what a video format is by looking at the file’s extension — the three to four characters that sit after a period in a file name. Here are some of the most common video formats used today:

* MP4
* FLV
* MOV
* MKV
* LXF
* MXF
* AVI
* WebM
* QT

On the other hand, **the codec is short for “Coder / Decoder” (compression / decompression)** and relates to the video compression algorithms that allow encoding to happen. Over the years, codecs have gone through multiple iterations as it coincides with the increasing sophistication and rise in the quality of filmmaking. 

If you’re a content creator, you might be aware of some of the video codecs that exist today:

- **H.264 – also known as AVC, this is the most widely-used video codec available on every platform and mobile device.**
- H.265 – also known as HEVC, stands for High-Efficiency Video Coding, and it’s slowly overtaking H.264 as the standard. This codec can compress video much more efficiently than its predecessor.
- **VP9 – is an open-source, royalty-free codec developed by Google and is considered the direct competitor of H.265. The video compression codec VP9 was created to reduce file sizes, making streaming videos simpler.**
- **AV1 – is another royalty-free, open-source codec released in 2019 by the non-profit Alliance for Open Media. It was developed to become the successor to Google’s VP9 and contend with HEVC more directly.**

## How do different technologies handle video encoding

As you may have suspected, there are a majority of ways that different technologies handle the video encoding process. Let’s take a look at the most common technologies that use video and how video encoding works on each of them:

### Video editing software

When it comes to video content creation, a majority of people will use one of two video editing software — Adobe Premiere Pro or Apple’s Final Cut Pro. Both of these video editing software handle video encoding in very similar ways: when exporting the finished video.

Depending on which device the video content is recorded on, it will already be encoded and formatted according to the settings of the device. For those using iPhones recording 1080p video at 25 frames per second (FPS), for example, the iPhone will automatically encode the video using H.264 and contain it in a .mov file format. The video editing software will “open up” the container to get to the encoded, compressed video file within so the editing process can begin.

After editing the footage is complete, it will need to be exported, which typically concerns video encoding. The edited raw media taken from a recording device such as a camera will be encoded via the codec of the person’s choosing before being put into a .mp4 container once they’ve hit “export”. As we’ve mentioned before, the most common codec used in video content creation is H.264 for HD videos, with 4K videos using H.265. 

### Websites

Different websites utilize different techniques to handle video encoding – with a majority of the major sites like YouTube, Netflix, and so on using their own technologies to handle the process. A majority of social media websites allow you to upload video files directly onto the site to share, although most of them require the files to be saved in specific containers. 

These websites will take your video file and transcode it before using their own systems and serves to re-encode it to match multiple display resolutions. This process will happen regardless of your video file's original codec and settings. Different websites have different processes, but companies that don’t have the capacity to build their own video encoding systems can use a third-party application programming interface (or API) to handle this process. These APIs act as [dedicated video encoder](https://api.video/what-is/video-encoding/) that allows companies to add on-demand videos to their websites more efficiently.

Using [api.video](https://api.video) as an example, all of the videos submitted to the platform will be transformed into H.264 codec in an MP4 container. This may be done using transmuxing and/or transcoding.

We expect the video bitrate to be lower than 16 Mbps for up to 1080p resolution and 50 Mbps for up to 4K resolution. We accept any bitrates, however, we will scale them down to the limits mentioned because anything above is usually challenging for most viewers’ connection to watch.

### API

The ability to generate, store, and distribute video is made possible via a video API. [api.video](https://api.video)’s solution can be tailored to suit any specific need. 

The backend process of video on demand (VOD) is exceptionally complex, even if you’re a software programmer specializing in video. It is necessary to encode, package, and typically transcode the data before sending it to any of several possible destinations. All of these things, and more, may be done with minimal fuss using api.video.

Our API basically keeps the complexities of streaming media hidden from view, so you can rapidly develop apps with as much control as you need. This saves time and effort so developers can concentrate on making the product.

## Conclusion

As you can see through this video encoding guide, a lot of work goes into making the video you watch and the video you share possible. Without video encoding compressing raw video footage, it could take days to upload and transmit video content over the internet and perhaps even longer to be able to download and enjoy them. 

The best part about encoding at api.video is that is offered at ZERO cost. You will only be charged for delivery and hosting of your videos, and the encoding will be free. Now integrate your videos in minutes with api.video or [contact us](https://api.video/contact/) for more information.

A Guide to Video Encoding & Video Codecs

large_poster-3.png

medium_poster-3.png

small_poster-3.png

thumbnail_poster-3.png

poster-3.png

Encoding and transcoding are often used interchangeably but they have slightly different definitions. **Encoding is the initial process of converting raw video files into a specific digital format or codec.** It involves compressing and packaging the video data, often to reduce file size while maintaining acceptable quality. Encoding prepares the video for storage, transmission, or playback.

&nbsp;

**Transcoding, on the other hand, involves converting a video from one digital format or codec to another.** This is typically done to optimize the video for different devices or platforms, adapt to varying network conditions, or ensure compatibility with specific playback requirements. Transcoding occurs after encoding and often involves changing resolution, bitrates, or formats without altering the content itself.

## What goes on behind encoding a video?

It's easy to say that encoding is when you go from an _uncompressed source_ to a _compressed source_, but you may ask, what exactly do compressed and uncompressed sources mean?

&nbsp;

Uncompressed sources are video files that contain data that comes directly from a camera sensor vs. encoded video. In the digital space, it's SDI (Serial Digital Interface) or HDMI (High Definition Multimedia Interface). Both of them are popular standards. You'll find HDMI in places like your GoPro camera, or a mini camcorder. These days, you might also find HDMI in professional settings, but SDI is more common due to its reliability. Another example of an uncompressed source would be something analog, for instance, VHS tapes.

&nbsp;

A compressed sources, on the other hand, are video files that have undergone compression during the encoding process. Compression involves reducing the file size by removing unnecessary information or encoding the data in a more efficient format. This process results in a smaller file size, making it more manageable for storage, transmission, and playback.


## What are the types of transcoding methods?

There are three types of transcoding, depending on what you are trying to do to get a video to suit a particular browser, player, or platform:

* **Lossless-to-lossless** - This type of transcoding maintains the quality of your video across formats but allows you to take advantage of better hardware or compression algorithms. 
* **Lossless-to-lossy** - This type of transcoding will decrease your video in quality, but it will benefit you in ways such as – you will get a smaller and/or faster playing file, or a file that is compatible with the requirements of a particular platform, player, or browser.
* **Lossy-to-lossless** - Sometimes people think this means they are regaining quality. This isn't the case in this type of transcoding. If you transcode from a lossy format to a lossless format, all that it means is that you will not lose additional quality in the conversion process. You will not regain data you already lost through compression.

## Codecs for encoding and transcoding

For both encoding and transcoding, you will need to make use of codecs. A codec's job is to compress and decompress video files. It's right there in the name -  **co**mpress **dec**ompress or encode decode. So basically, codec is an algorithm that takes the video and shrinks it or changes it into a format that makes it compatible with the requirements of wherever you want the video to play. There are many codecs because there are many ways to compress a video or livestream for playback.



## What is transmuxing?

Now that you know the difference between encoding and transcoding, let's throw one more term in there - transmuxing. Transmuxing is when you change the container for a video instead of the format. It's a way of repackaging a video to make it compatible somewhere without changing what's in the file. 

&nbsp;

This process is faster than encoding or transcoding and takes less computing power because you only change the container, not the file. It's great when you need to quickly make something available, but the downside is that it doesn't handle things like making multiple video resolutions available. If you choose a container type that's incompatible with your video file, you may also cause compatibility issues, resulting in not being able to play the video.

## In closing

* **Encoding** - Encoding happens when you compress a raw data file from a video camera sensor or an analog source like a VHS tape. 
* **Transcoding** - Transcoding happens when you take an already compressed video file and change it to another format.
* **Transmuxing** - Transmuxing happens when you change the container of a video file but leave the video file untouched. 

We hope that explains the difference between encoding and transcoding clearly. 

_If you are looking for an affordable video API solution that does not burn a hole in your pocket for transcoding and encoding videos, check out our offerings on our [homepage](https://api.video/) or [sign-up for a free account here](https://dashboard.api.video/register)!_

Video on demand

Live streaming

Analytics

Video infrastructure

Video player

See all features

Online learning

Short-form videos

Marketplace & E-commerce

Video messaging and recording

Quickstart guides

Documentation

Ecosystem catalog

Clients & SDKs

Community

Blog

Demos

Help center

Video upload