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

ffmpeg

Overlaying two videos with FFMPEG

[FFMPEG](https://api.video/what-is/ffmpeg) is a free and open source software project that offers many tools for video and audio processing. It's designed to run on a command line interface, and has many different libraries and programs to manipulate and handle video files.

## The Question

### How can I best overlay 2 live camera feeds with FFMPEG to produce one live stream to broadcast at api.video? I’m using a raspberry PI, and having a lot of latency issues.

We then began working on the FFMPEG command that he was using to build the livestream.

For testing purposes, I replaced the two livestreams with videos stored locally on my computer.  My goal is to create a video that looks like this: Die Hard with an Indiana Jones (and the Last Crusade) overlay.


video overlay of Diehard and Indiana Jones

large_screenshot-2021-08-23-at-18-20-16.png

medium_screenshot-2021-08-23-at-18-20-16.png

small_screenshot-2021-08-23-at-18-20-16.png

thumbnail_screenshot-2021-08-23-at-18-20-16.png

screenshot-2021-08-23-at-18-20-16.png



My command began with:



```
ffmpeg  -i DieHard.mp4 -i Indianajones.mp4
```

The ```-i``` tells ffmpeg that these are input files, and then the filename.  If you were using a livestream, or a remote video you could use a url.

The end of the ffmpeg command looks like:



```
-f flv rtmp://broadcast.api.video/s/23df9302-5897-4fca-8b27-0eb39ea67ab2
```

This says to FFMPEG, save the video output as flv and send it to my livestream endpoint.  When video begins arriving at this endpoint, your api.video stream will begin broadcasting whatever video is being sent. At this point, it will just take the first input (DieHard.mp4) and stream that file - ignoring Indiana Jones. I need to do some work to add in the Indiana Jones video...

If you want to test locally, you can change the output to:


```
test.mp4
```

To save the video locally to your computer.

### Initial command

```
ffmpeg  -i DieHard.mp4 -i Indianajones.mp4 test.mp4
```

This takes in the 2 videos, outputs just DieHard.mp4 and saves it into test.mp4.  We want to overlay the Indiana Jones video.

The first thing we’ll do is scale the Diehard video to 1080p (it is 1080p, but this will ensure that all future videos fit correctly), and we will give the output of this transformation the name ‘main’

```
 -filter_complex '[0:v]scale=-1:1080[main]’
```

This command says - take the video from input 1, and resize it to -1:1080. The 2nd value is pretty obvious - make the video 1080 high. The ‘-1’ on the horizontal axis says make the height 1080, and scale the width so that the video is not stretched in any way.  If the input video is 16:9,the output will be 1920x1080. If the input video is 4:3, the output will be 1440x1080.

Let’s resize Indiana Jones to 360p (again using the ‘-1’ to ensure that the video is not stretched), and name the resized video “overlay”.  We place a semicolon between the two commands:

```
 -filter_complex '[0:v]scale=-1:1080[main];[1:v]scale=-1:360[overlay]’
```

Now we have 2 correctly sized videos, let’s set the overlay on top of the main video.  In creating the overlay, we could hard code the coordinates, but we can also use variables. In this case, main_w and main_h are for the main video width and height, and overlay_w and overlay_h are assigned to the overlay video.

We'll place the overlay in the bottom right - 25 pixels from the right and 25 pixels from the bottom.  To do this, we’ll subtract 25 and the dimension of the overlay from the dimension of the main video. The command will look like:


```
[main][overlay]overlay=(main_w-overlay_w-25):(main_h-overlay_h-25)
```

The ```[main]``` video is used as the main video, and the ```[overlay]``` as the overlay, and then we use the variables to place the overlay video.

The full command now looks like:

```
ffmpeg  -i DieHard.mp4 -i Indianajones.mp4 -filter_complex '[0:v]scale=-1:720[main];[1:v]scale=-1:240[overlay];[main][overlay]overlay=(main_w-overlay_w-25):(main_h-overlay_h-25)' test.mp4

```

And the video looks exactly how we’d like it to look! The audio, however, is from the main video: Die Hard.  We can remove the audio (making the video silent) by only exporting the video from the output video.  To do this, we can use the ```map``` parameter.  We’ll name the overlay filter [out] and then just map the first track (track 0) to the output:


```
ffmpeg  -i DieHard.mp4 -i Indianajones.mp4 
-filter_complex '[0:v]scale=-1:720[main];[1:v]scale=-1:240[overlay];[main][overlay]overlay=(main_w-overlay_w-25):(main_h-overlay_h-25)[out]' -map '[out]'0:0  test.mp4
```

This results in a silent movie.  We can programmatically pick which audio track (track 1 in both cases) with a second ```-map``` command:

* ```-map 0:1``` selects the Die Hard audio (the original 0 index input, track 1)
* ```-map 1:1``` selects Indiana jones audio (the original 1 index input, track 1)



Here are the final 2 commands (with the stream parameters added in:

```
ffmpeg  -i DieHard.mp4 -i Indianajones.mp4 -filter_complex '[0:v]scale=-1:720[main];[1:v]scale=-1:240[overlay];[main][overlay]overlay=(main_w-overlay_w-25):(main_h-overlay_h-25)[out]' -map '[out]'0:0 -map 0:1 -f flv rtmp://broadcast.api.video/s/23df9302-5897-4fca-8b27-0eb39ea67ab2

ffmpeg  -i DieHard.mp4 -i Indianajones.mp4 -filter_complex '[0:v]scale=-1:720[main];[1:v]scale=-1:240[overlay];[main][overlay]overlay=(main_w-overlay_w-25):(main_h-overlay_h-25)[out]' -map '[out]'0:0 -map 1:1 -f flv rtmp://broadcast.api.video/s/23df9302-5897-4fca-8b27-0eb39ea67ab2
```

Here’s what the final result looks like (Die Hard audio version):



In order to create his live stream, our developer simply changed the input from 2 movie trailers to his 2 live streams, and it all *just worked*.

## Conclusion

As Indiana Jones famously did not say: “What is FFMPEG? Fortune and Glory kid. Fortune and Glory.”

And we are pretty sure John McClain never said “Yippiee Ki Yay FFMPEG!”

But that is because neither of them ever got the chance to play with the tooling that allowed us to create the video above.

In this post, we’ve talked through how to scale the dimensions of multiple input videos, how to overlay them, and then how to apply an audio track to the videos.  Finally, the video created by ffmpeg is streamed to api.video for live streaming consumption by your viewers.


Use FFMPEG to resize and overlay videos and live stream them

Use FFMPEG to resize and overlay two videos, and then live stream them

Live streaming is a "one to many" form of communication.  Like a conference talk, or a class lecture - the live streamer(s) are presenting, and the viewers watch.  With api.video's live streaming, you can stream to thousands of viewers around the world in near real time!

However, at a conference there are Q&A sessions.  During a lecture, students may raise their hands with a question.  The communication is still primarily "one to many", but there is an aspect of reverse communication that is lost with *just* a live stream.

In many of the virtual conferences I have spoken in over the last 18 months, this reverse communication has been facilitated with a chat application.  Much like a live streamer on Twitch can get text questions/comments, the chat allows for the communication from the viewer to the streamer.

## Latency

With HLS live streaming - you are able to broadcast to thousands of viewers, but there is generally a latency behind 'real-time' of 5-20 seconds.  The great thing about a 'real-time' chat is that this latency cannot be felt by the viewers.  Any delay in reply from the streamer is attributed to typing time, or reading time, or formulating the answer time - making chat-boxes and HLS live streaming an excellent combination.

## Building Chat & Live Streaming

In this post, we'll build a simple webpage that integrates a live stream from [api.video](https://api.video) with a chat app from [CometChat](https://www.cometchat.com/).  

### Live Video

When you [Create a Live Stream](https://docs.api.video/reference/api/Live-Streams#create-live-stream), a player URL and iframe are generated:

```
<iframe src="https://embed.api.video/live/li4pqNqGUkhKfWcBGpZVLRY5" width="100%" height="100%" frameborder="0" scrolling="no" allowfullscreen=""></iframe>
```

You can paste this iframe into a webpage, and the live stream will appear on that page.  If the stream is not streaming, you'll see the thumbnail.

### Chat

To add a chat widget, simply copy the code from the [CometChat web widget](https://prodocs.cometchat.com/docs/web-chat-widget) page to the same page.  Add in your credentials into the chat widget, and it'll load as you expect.

### That's it

Really - that is all there is to it.  A little boilerplate code from [api.video](https://api.video), and from [CometChat](https://cometchat.com), and your live stream with chat is now up and running.

You can see an example of this today at [chatduring.a.video](https://chatduring.a.video).  It was built in about 5 minutes using the steps above.  (if the live stream is not broadcasting, it is because I am moving this month, and my Raspberry Pi is in a box around here... somewhere....)  The code is live on [Github](https://github.com/apivideo/cometchatvideo) (it's literally just the html page) if you want to crib even further.

So, check out the demo, and build your own.  We'd love to see what you've built - leave a note with a link on our [community page](https://community.api.video)



Two way communication: Chat during a live stream

large_screenshot-2021-07-23-at-11-40-43.png

medium_screenshot-2021-07-23-at-11-40-43.png

small_screenshot-2021-07-23-at-11-40-43.png

thumbnail_screenshot-2021-07-23-at-11-40-43.png

screenshot-2021-07-23-at-11-40-43.png

video create

Delegated Upload

Video upload

JavaScript

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

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

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

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

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

Erikka Innes

Python

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!

When there are a large number of attendees on a Zoom call, the call can become very laggy, and the video and audio quality is not always as good. When there is a call with a large number of participants - you may be in a case where only a few attendees are participating and most of the attendees are 'listeners.'  If that is the case, you might consider placing the listeners on a live stream - where they can listen to the meeting, but they are not on the actual Zoom call, which will make the interaction between the active participants easier.

In this post, we'll walk through the steps to add an api.video live stream to your Zoom call. Here's a video walking through the setup as well:







## Set up

In order to livestream your Zoom calls, you must be on a paid plan.  This feature is not available on the "Basic" free plan.

Go to your Settings page, and choose "in a meeting (advanced)"


medium_screenshot-2021-07-26-at-12-21-31.png

small_screenshot-2021-07-26-at-12-21-31.png

thumbnail_screenshot-2021-07-26-at-12-21-31.png

screenshot-2021-07-26-at-12-21-31.png

In this section, you'll find the "Allow livestreaming of meetings" section. Turn on the 4th option "Custom Live Streaming Service."  You can add a text comment - in the screenshot above, I added 'api.video,' but you could leave this blank.

## Creating the meeting


Adding the live streaming settings is easiest from the browser.  In your Zoom account, create a meeting.  Do all the normal things, like setting the date & time.  When done, press "Save"

A page will load with a summary of your meeting, but at the bottom is a section for setting up your live streaming:



large_screenshot-2021-07-26-at-12-35-30.png

medium_screenshot-2021-07-26-at-12-35-30.png

small_screenshot-2021-07-26-at-12-35-30.png

thumbnail_screenshot-2021-07-26-at-12-35-30.png

screenshot-2021-07-26-at-12-35-30.png

When you click the button to Configure your live stream, you'll be asked for 3 things:

* Stream URL: rtmp://broadcast.api.video/s
* Stream Key: Unique to your stream
* Viewing URL: The page where viewers can watch the stream


medium_screenshot-2021-07-26-at-12-43-01.png

small_screenshot-2021-07-26-at-12-43-01.png

thumbnail_screenshot-2021-07-26-at-12-43-01.png

screenshot-2021-07-26-at-12-43-01.png

These values are all available on the summary page of your live stream on your [dashboard](https://dashboard.api.video/) as shown in the above screenshot (Stream Key is obfuscated for security reasons.

Once you enter these values on the Zoom meeting, you are set - until the meeting actually starts.

## In the meeting

Even though you have set up the Live Stream, it is not actually active until you turn it on.  You do this in the "More" setting in the meeting, and choosing the "Live on Custom Streaming Service" button:

large_screenshot-2021-07-26-at-11-29-58.png

medium_screenshot-2021-07-26-at-11-29-58.png

small_screenshot-2021-07-26-at-11-29-58.png

thumbnail_screenshot-2021-07-26-at-11-29-58.png

screenshot-2021-07-26-at-11-29-58.png

Zoom will open a webpage, and then redirect to the "watch page."  When you return to the Zoom meeting, you'll see a notification in the upper right hand corner:



medium_screenshot-2021-07-26-at-11-33-48.png

small_screenshot-2021-07-26-at-11-33-48.png

thumbnail_screenshot-2021-07-26-at-11-33-48.png

screenshot-2021-07-26-at-11-33-48.png

## Now your meeting is Live Streaming!

In summary, there are a few steps to set up and then turn on your Zoom -> Live Stream.  But once they are set up, it is a pretty simple task to ensure that your Zoom conference calls are live streamed to your wider audience.

If you run into any issues, please reach out to us on the [api.video community](https://community.api.video)


Live stream your Zoom call with api.video

Add an api.video live stream to your Zoom call

small_zoomapivideo.jpg

thumbnail_zoomapivideo.jpg

zoomapivideo.jpg

webhooks

Analytics

NodeJS

One of the most satisfying features of livestreaming is seeing a live counter of how many people are watching your live stream.  In this demo, we’ll build a counter that gives a real time count of the number of viewers watching a live stream.

## api.video livestreams

Each livestream at api.video can be used over and over. It is a conduit for your livestreams.  There is a RTMP url that you use to send your livestream to api.video, and a playback url that you can embed in your website.  When you look at a livestream on your [api.video dashboard](https://dashboard.api.video/), you’ll see all the connection details (some are obfuscated in the screenshot) to connect your livestream. 

large_screenshot-2021-07-22-at-06-12-10.png

medium_screenshot-2021-07-22-at-06-12-10.png

small_screenshot-2021-07-22-at-06-12-10.png

thumbnail_screenshot-2021-07-22-at-06-12-10.png

screenshot-2021-07-22-at-06-12-10.png

 

Right underneath the thumbnail of the livestream, you can see a viewer count.  In the screenshot above it is at 632.  That is the count of historical views for this livestream - a sum of all the views for every livestream that has been run.  While this is an interesting stat, this is not exactly what we want to see during a livestream.

This NodeJS function takes your liveStreamId, and calls the analytics endpoint to get the total number of sessions that have occurred for that live stream:

```
function getLiveSessionCount(liveStreamId){
 
   return new Promise(function(resolve, reject){
       console.log(liveStreamId);
       var pageSize=1;
       var currentPage = 1;
       params = {
           "liveStreamId": liveStreamId,
           "pageSize":pageSize,
           "currentPage":currentPage
       }
       //get all sessions for livestream
       var sessionList = client.rawStatistics.listLiveStreamSessions(params);
       sessionList.then(function(liveSessionList){
           //get total sessoin
           var sessionCount = liveSessionList.pagination.itemsTotal;
           console.log("live sessions" , sessionCount);
           resolve(sessionCount);
       }).catch((error) =>{
           reject(error);
       });
   });
}

```

## Counting the views

To get an accurate count of viewing sessions during a livestream, we need to grab the livestream count when the stream starts (all of the views PRIOR to the current stream).  As the stream progresses, the number will increase, but a simple difference ```currentCount - startCount``` will provide the number of sessions that occurred during the current stream.

### Live stream webhooks

In July 2021, we launched 2 new webhooks: ```live-stream.broadcast.started``` and ```live-stream.broadcast.ended```.  These webhooks announce whenever one of your live streams begin/end broadcasting. 

When the ```live-stream.broadcast.started``` webhook fires, our webhook listener identifies that a live stream has started.  Then it calls the getLiveSessionCount function to get the starting count of sessions.

```
app.post("/receive_webhook", function (request, response) {
   console.log("new video event from api.video");
    let event = request.body;
   let body =request.body;
   let type = body.type;
   let emittedAt = body.emittedAt;
   webhookResponse = "";
   if(type =="live-stream.broadcast.started"){
       liveStreamId = body.liveStreamId;
       liveStreamStatus = true;
       webhookResponse = "event: " +type+ " at: "+ emittedAt+ " LiveStream,Id: "+liveStreamId+ "  has started.";
      
       //change the broadcasting status in the JSON pbject
       broadcastingStatus[liveStreamId]=liveStreamStatus;
       //TODO - get the number of views at start
       startViews = getLiveSessionCount(liveStreamId);
       startViews.then(function(startcounter){
           console.log("number of views when broadcast starts", startcounter);
           viewersAtStartOfStream[liveStreamId] = startcounter;
           webhookResponse = "event: " +type+ " at: "+ emittedAt+ " LiveStreamId: "+liveStreamId+ "  has started. There have been "+startcounter+" at the beginnig";
 
       });
      
    } else if (type =="live-stream.broadcast.ended"){
       liveStreamId = body.liveStreamId;
       liveStreamStatus = false;
       broadcastingStatus[piLiveId]=liveStreamStatus;
       webhookResponse = "event: " +type+ " at: "+ emittedAt+ " LiveStreamId: "+liveStreamId+ "  has stopped.";
    }
  
   //console.log(headers);
   console.log("response",webhookResponse);
 
  
   response.sendStatus(200); 
 });


```

Now, as the streaming progresses, the website polls /getLivecount every three seconds:

```
// Send list of the new count of viewers every x seconds
app.get("/getLivecount", function (request, response) {
 
 
   var LiveId = request.query.live;
   console.log("LiveId", LiveId);
   console.log(viewersAtStartOfStream);
   startCount = viewersAtStartOfStream[LiveId];
   console.log("startCount", startCount);
   //we have liveid get new user count
   var currentCount = getLiveSessionCount(LiveId);
           currentCount.then(function(currentWatchCount){
 
               console.log(startCount + " " + currentWatchCount);
               numberOfWatchers = currentWatchCount - startCount;
               console.log("numberOfWatchers", numberOfWatchers);
               response.send("There are " +numberOfWatchers + " watching this stream!");
           }).catch((err) => {
               console.log(err);
           });
 });

```

And this returns the difference from the start of stream (stored in an array on the server), and the current count.  Voila, a simple view counter!

##  Conclusion

In this demo, when the live stream begins broadcasting, we utilize the [live stream started webhook](https://docs.api.video/reference/api/Webhooks#create-webhook), which broadcasts that the stream has started. We determine the ‘seed’ number of sessions using the [Live stream session analytics](https://docs.api.video/delivery-analytics/analytics). Now we know the “0” for this live streaming session.

We can call the same endpoint every 3 seconds and report the growth in the number of sessions.  Each one of these is a new loading of the live stream video player - counting as a new viewer of the stream. This is then added to the page to indicate how many viewers are watching the live stream.

This demo is live at [watch.a.video/broadcast](​​https://watch.a.video/broadcast?streamId=li400mYKSgQ6xs7taUeSaEKr). To begin the stream, head over to [livestream.a.video](https://livestream.a.video) and begin the stream. To grow the number of viewers, you must open [watch.a.video/broadcast](​​https://watch.a.video/broadcast?streamId=li400mYKSgQ6xs7taUeSaEKr) in multiple incognito/private browser tabs (since the session is browser window based).

Try it out, and tell us what you think! If you’d like to look at the code to modify for your app, it is live on [Github](https://github.com/dougsillars/watchLivestream).


Count your live stream viewers with api.video

thumbnail_counter.jpeg

counter.jpeg

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

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

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

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

You can also review the API reference documentation for uploading videos:
* [Create a video](https://docs.api.video/reference/api/Videos#create-a-video-object)
* [Upload a video](https://docs.api.video/reference/api/Videos#upload-a-video)

## Prerequisites
For this project you'll need:

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

## Set up

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

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

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

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

Let's roll! 

## What's in index.HTML? 

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

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

## What's in app.py? 

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

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

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

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

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

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

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

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

## Resources 

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



Use Flask with Dropzone.js and api.video Python client

medium_erol-ahmed-y3kebqlb1zk-unsplash.jpg

small_erol-ahmed-y3kebqlb1zk-unsplash.jpg

thumbnail_erol-ahmed-y3kebqlb1zk-unsplash.jpg

erol-ahmed-y3kebqlb1zk-unsplash.jpg

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

Dynamic Metadata

Online video training is huge. There are many companies that offer video training courses where the course follows one video after another. The only way to continue in the course is to finish a video, and when the video is completed, the next video is unlocked. This ensures that the video course is taken in the order designed by the instructor, and that the students are not 'skipping' ahead through the coursework.


Other use cases for this might be a corporate training, where it is required that every employee watches each video in a series to be compliant with the policies of an organization (as a veteran of AT&T, I have taken months of this sort of training)

In this post, we'll walk through how you can build a video training app with api.video. 

## Connecting a session to a user

The first step in any training course will be to login your user. In the case of training a video, we'll skip a secure login form (it is just a demo!) and simply ask you to enter your name:

large_screenshot-2021-06-28-at-18-14-33.png

medium_screenshot-2021-06-28-at-18-14-33.png

small_screenshot-2021-06-28-at-18-14-33.png

thumbnail_screenshot-2021-06-28-at-18-14-33.png

screenshot-2021-06-28-at-18-14-33.png

When you submit this form, we'll search through the videos connected to the course (in this case, they are hardcoded in the app as an array:

```
var videolist = ['vi47Q8KHXLYyaOoX2Yoznxqh','vi6QvU9dhYCzW3BpPvPsZUa8','vi1DrBc0VkPfedcfTc21U1TP'];
var videoDurations= [91,321,333];
```

Note, we also hardcode the duration of the 3 videos (but in a more dynamic app, you can get the video duration from the [video status](https://docs.api.video/reference/api/Videos#retrieve-video-status-and-details) endpoint.

Now for each of these videos, I have created  dynamic metadata entry:


```
	"metadata": [
		{
			"key": "classUserName",
			"value": "__classUserName__"
		}
	],
```

when the value of a metadata entry has two underscores on either side of the value, any value can be applied to the metadata entry.  In this case, we'll apply the username as the value.  We can search for any video sessions that have the classUserName "Doug" for each of the videos in the training session. (in the code below, I am using the NodeJS client:

```
			currentPage = '1';
      pageSize = '25';
      var metadata = {'classUserName': userName};
      var params = { videoId, metadata, currentPage, pageSize};
      console.log("params",params);
      const result = client.rawStatistics.listVideoSessions(params);

```

This will result in the first 25 sessions where the variable userName (Doug) is saved as the classUsername metadata. (Of course, if you believe that your users might have more than 25 sessions per video, you can expand that number up to 100 - but for a training course, 25 viewing sessions per video per user is probably more than adequate).

The response from this will be every session that the user has had for the video.  For each of these sessions, we want to know if the video was watched all the way through.  We've [written up this analysis](https://api.video/blog/tutorials/video-event-analysis-using-api-video-sessions/) of session events. As soon as we discover a session that has watched the video, we stop looking through the sessions.  

## How many videos to unlock?

This approach will then be completed for each video in the series, until we reach a video that has not been watched.  This is done through the recursive function iterateVideos:

```

function iterateVideos(videolist, videoDurations, userName, videoCounter){
  return new Promise(function(resolve, reject){
      //soo take list of videos, and iterate until we know which video can be watched.
      console.log("testing video "+videoCounter);
      var videowatched  = videoWatched(videolist[videoCounter], videoDurations[videoCounter], userName);
      videowatched
      .then(function(passfail){
    
        console.log("video "+videoCounter+ " "+ passfail);
        if(passfail){
          //video was watched, so lets check the next one
          videoCounter++;
          if (videoCounter < videolist.length){
            var nextVideo = iterateVideos(videolist, videoDurations, userName, videoCounter);
            resolve(nextVideo);
          }else{
            //the last video was watched so, stop and show all the videos...
            resolve(videoCounter -1);
          }
        }else{
          //video was NOT watched start wit this video
          console.log("resolve the counter of the first video not watched", videoCounter);
          resolve(videoCounter);
        }
      }).catch((error) =>{
        reject(error);
    });



  });
```

The videoWatched function checks each session to see if the video has been completed.  

If the video has been completed, it returns true.  Then we check the next video to see if it has been watched. (If we reach the end of the video list - we show all of the videos.).

If the video has not been watched - we know where to stop displaying playable videos, and we can display the page.

### What the user sees

For this simple example with three videos, there are just three potential views:

* If no videos have been watched - the first video will have no sessions, and the session analysis will stop immediately. The page will show the first video as playable, and the subsequent videos as locked.

* If the first video has been completed, but not the second: the page will show the first two videos as playable, but the third video will still be locked.

* If videos 1-2 are completed (or if all 3 videos are completed), all three videos appear as watchable.


### Looking at the HTML

```
<iframe type="text/html" src="https://embed.api.video/vod/vi6QvU9dhYCzW3BpPvPsZUa8?metadata[classUserName]=Doug" width="960" height="320" frameborder="0" scrollling="no"></iframe>

```

See how each video adds the ```metadata[classUserName]=Doug```  this will ensure that any video session that is started on this page will be assigned to the user Doug. Once a video is watched, the user can refresh the page, and all the session data will be recalculated, and the next video will be unlocked.


## Build your own video training app

With api.video, you can easily upload your videos for playback. Using our analytics and dynamic metadata, we can build a training application that unlocks each video as content is viewed. Build your own based on our code on [Github](https://github.com/apivideo/trainingavideo). If you have question, feel free to reach [our community](https://community.api.video/) or [test it now](https://dashboard.api.video/register) in our free Sandbox environment.

Build a self guided training course with api.video

large_build-a-self-guided-training-course-with-api-video.png

medium_build-a-self-guided-training-course-with-api-video.png

small_build-a-self-guided-training-course-with-api-video.png

thumbnail_build-a-self-guided-training-course-with-api-video.png

build-a-self-guided-training-course-with-api-video.png

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

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

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

## Prerequisites 

For this project you'll need: 

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

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

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

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

## What's in index.HTML

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

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

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

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

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

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

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


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

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

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

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

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

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

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



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

### Resources 

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

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

Use Flask with Dropzone.js to upload videos under 200 MiB

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

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

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

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

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

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

Use Flask with Dropzone.js to upload videos under 200 MiB (no client)

Video Sessions (Analytics)

How much of your video is being watched?  With api.video analytics, we can tell you exactly how much of the video was watched.  In this post, we'll walk through how to parse video session data in order to add up how much of the video was watched in a session.

## A video Session

A video session occurs when an api.video player is opened in a browser.  As long as the same window is used, each viewing of the video will be added to that one session.

You can get a list of your video sessions by using the [analytics endpoint](https://docs.api.video/delivery-analytics/analytics) for a given videoId. In my code (using NodeJS), it looks something like this:

```
var params = { videoId, metadata, currentPage, pageSize};
  
const result = client.rawStatistics.listVideoSessions(params);
  result.then(function(videos) {
        var sessionList = videos.data;
        console.log("Number of sessions to test " , sessionList.length);

          for(i=0;i<sessionList.length;i++){
            //get each session ID, and figure out how long each session watched the video
            var sessionId = sessionList[i].session.sessionId;
            pageSize = '100';
            console.log(sessionId);

```


The Node endpoint takes my parameters (including the videoId I wish to analyze) and sends it to the ```client.rawStatistics.listVideoSessions``` endpoint.  This returns an array of the sessions that can be analyzed. 

The log will list a count of sessionIds, and then list each sessionId. Here is an example output from this code snippet:

```
Number of sessions to test  8
ps5orCkYsuaMw08btQmsW8vp
ps24iGEi011m9xKPqdTnIOvZ
ps7ODtZR04dfRBQCcarOIhv7
ps19mQmv5CTQwdeb75n8lLWr
ps1UdYeHbp6tQ21vrGUI8gXw
ps6xqBySKoSQfmG4zjcyZtWU
ps3cLLchT0Os75lzXovlCqTe
ps3MpNgw5Ax5EQ4GSAVyODRh
```

## get Session Events

In each session, the video player records each event, and sends it back to api.video.  Using the [Session event](https://docs.api.video/reference/get_analytics-sessions-sessionid-events) API endpoint, we can retrieve each of these events.

```
 var sessionParams = {sessionId, currentPage, pageSize}; const sessionData = client.rawStatistics.listSessionEvents(sessionParams);
    sessionData.then( function(lastSessionData) {
      //this is the session data
      console.log("session events", lastSessionData);

```


The response of this endpoint looks something like this:

```
session events RawStatisticsListPlayerSessionEventsResponse {
  data: [
    PlayerSessionEvent {
      type: 'ready',
      emittedAt: 2021-06-17T19:00:54.000Z,
      at: 0,
      from: undefined,
      to: undefined
    },
    PlayerSessionEvent {
      type: 'play',
      emittedAt: 2021-06-17T19:00:55.000Z,
      at: 0,
      from: undefined,
      to: undefined
    },
    PlayerSessionEvent {
      type: 'end',
      emittedAt: 2021-06-17T19:02:27.000Z,
      at: 91,
      from: undefined,
      to: undefined
    },
    PlayerSessionEvent {
      type: 'pause',
      emittedAt: 2021-06-18T10:59:03.000Z,
      at: 91,
      from: undefined,
      to: undefined
    }
  ],

```

In this case, the video is ready at time =0, begins playing, and then reaches the end at 91s.  The window is closed a day later, sending a pause event.  (this is just evidence that your author has a browser tab problem).

Using this data (and with the knowledge that the video is 91 seconds long), it's pretty easy to determine that the entire video was watched in this session.  from ready to the first pause is 91s, so the video must have been completed. But what about more complicated viewing patterns?  Let's look at an example:


```
  data: [
    PlayerSessionEvent {
      type: 'ready',
      emittedAt: 2021-06-21T12:33:06.000Z,
      at: 0,
      from: undefined,
      to: undefined
    },
    PlayerSessionEvent {
      type: 'play',
      emittedAt: 2021-06-21T12:36:13.000Z,
      at: 0,
      from: undefined,
      to: undefined
    },
    PlayerSessionEvent {
      type: 'pause',
      emittedAt: 2021-06-21T12:36:18.000Z,
      at: 81,
      from: undefined,
      to: undefined
    },
    PlayerSessionEvent {
      type: 'resume',
      emittedAt: 2021-06-21T12:36:19.000Z,
      at: 81,
      from: undefined,
      to: undefined
    },
    PlayerSessionEvent {
      type: 'seek.forward',
      emittedAt: 2021-06-21T12:36:19.000Z,
      at: undefined,
      from: 5,
      to: 81
    },
    PlayerSessionEvent {
      type: 'end',
      emittedAt: 2021-06-21T12:37:19.000Z,
      at: 91,
      from: undefined,
      to: undefined
    },
    PlayerSessionEvent {
      type: 'pause',
      emittedAt: 2021-06-21T13:10:18.000Z,
      at: 91,
      from: undefined,
      to: undefined
    }
  ],
```


In this session, we again start playing at time = 0, but the next set of events occur at 81s (pause/resume). So the video stopped and restarted at t=81. The next event tells us how we got to t-81 - the view skipped ahead (noted as a 'seek.forward' event) at t=5, to t=81. The video paused because the video had to load, and then from t=81, it played until the end at t=91.  

In this case, even though the playback started at t=0, and ended at t-91, no one would consider this video fully watched, as the viewer skipped 76s of the video.

## Calculating the time watched

To calculate the time watched, we'll add up the time between every play/resume event and every pause/end event.  Then we'll subtract any time in a 'seek.forward' event.

```
 for(j=0; j< numberOfEvents; j++){
        if(lastSessionData.data[j].type == "play" || lastSessionData.data[j].type == "resume"){
          //start time measure
          starttime = lastSessionData.data[j].at;
          counting = true;
          console.log ("start" , starttime);
        }else if(lastSessionData.data[j].type == "pause" || lastSessionData.data[j].type == "end"){
          if(counting){
            endtime = lastSessionData.data[j].at;
            counting=false;
            console.log ("stop" , endtime);
            console.log ("added time" , endtime-starttime);
            summedtime += endtime-starttime;
            
          }
        }else if(lastSessionData.data[j].type == "seek.forward"){
          console.log("seeked forward", (lastSessionData.data[j].to - lastSessionData.data[j].from));
          summedtime -= (lastSessionData.data[j].to - lastSessionData.data[j].from);
          //if there was a seekforward, the max time previously calculated previously is no longer valid and needs to be recalculated.
          maxWatchedTime = 0;
        }
        console.log("summedtime: ", summedtime);
				
				
}

```

We can log the math that happens as we iterate through the events:

```
summedtime:  0
start 0
summedtime:  0
stop 81
added time 81
summedtime:  81
start 81
summedtime:  81
seeked forward 76
summedtime:  5
stop 91
added time 10
summedtime:  15

```

Comparing these events - we can see that from the first start to the first pause is 81seconds, but then we encounter the seeked forward of 76 seconds - leading to a summed time of 5 seconds.  After the last 10 seconds are watched, we have a total of 15 seconds of the 91 second video watched.


## Playback totals

When watching required training videos, it is often mandatory that the time watched is logged and and recorded. With the api.video session data, we can track each user's viewing to know if they have completed a video, or if they must re-watch the video.

In a future post, we will combine this video watching algorithm with code to 'unlock' subsequent videos in a training series.

Video event analysis using api.video sessions

large_screenshot-2021-06-21-at-13-06-24.png

medium_screenshot-2021-06-21-at-13-06-24.png

small_screenshot-2021-06-21-at-13-06-24.png

thumbnail_screenshot-2021-06-21-at-13-06-24.png

screenshot-2021-06-21-at-13-06-24.png

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)!_

Encoding and transcoding: what's the difference? 

large_EncodingTranscoding.png

medium_EncodingTranscoding.png

small_EncodingTranscoding.png

thumbnail_EncodingTranscoding.png

EncodingTranscoding.png

Once I upload my video, how quickly will it be ready to be viewed?

Our reply to this question has always been “it's really fast.”  And it is really fast. But, the dev team gave me access to the backend database, and pointed me to a few tables that might be helpful (thanks to Thomas Persohn for your patient help!)

Thus armed, I waded into a sea of data to better understand how fast our videos are encoded at api.video

## Encoding

When a video is uploaded to api.video, it is re-encoded to a HLS stream, with several different video dimensions and bitrates.  This allows api.video to deliver properly sized video to all users - no matter the device or network connection. (Read our post on [Responsive video delivery](https://api.video/blog/video-trends/responsive-video-delivery/) to learn more.)

> Summary:  All videos are encoded at 240p, 360p, 480p, 720p, 1080p and 2160p. However, the videos are only encoded up to the initial size of the video (so if the original video is 720p, there will not be 1080p or 2160p versions available). 

**FYI:** For our customers, encoding is absolutely free – we offer adaptive bitrate encoding at zero cost. 

How long does this step take? If a customer uploads a video to our service - they want to know how efficient api.video creates the content for viewing.

### Data in the study

We are constantly making adjustments to our infrastructure to speed the encoding step of our video (and that is one reason this post is dated 2H 2020 - we expect to be faster in early 2021). The last major adjustment was made in mid October, so the data presented in this study from every video uploaded to the api.video service between 15 October and 2 December 2020.

### Parameters that affect encoding

There are 2 major parameters that affect the speed of encoding a new video stream: the output dimensions and the length (duration) of the video.  

#### Dimensions

The output video dimensions have a huge impact on video creation - a 3840 × 2160 (or 4K or 2160p) video has millions more pixels than a 320x240 (240p) video, so it takes a lot longer to create.  In general, the videos exit the encoding process from smallest to largest.

#### Duration

If a video is 30 frames per second, and is 60 seconds long, there are 1800 frames to be created.  If a 30 frame per second video is an hour long 3600s), there are 108,000 frames to be created, so the longer the video - the more time for creation.

## Analysis

To better understand the encoding time, I divided the data by the size of the output video size, and looked at 2 lengths of video  - those under 5 minutes, and videos that are 45-75 minutes long (we are often asked how long a 1 hour video takes to encode).

I calculated encoding time for each bucket of video using percentiles.  

> Quick review - percentiles break the data into 100 evenly sized segments, so the 25th percentile is when 25% of the videos have been encoded. The median is the 50th percentile, and is when 50% of videos have been encoded.  We report here to the 95th percentile for video encoding.

### Short videos - under 5 minutes long

Many of the videos uploaded to api.video are short - under 5 minutes long.  These videos are generally ready to play in a few seconds:



The above chart has a lot of data, the 25, 50, 75, 90 and 95th percentile encoding times for all 6 variants of the video that api.video creates.

The median video is ready to play (at 240p) in 5.6 seconds, but a 720p version will be ready in 15s after encoding begins, and the 4K version will be ready in 37 seconds.

95% of all videos (under 5 minutes) will be playable in 32.6s, and will have 1080p versions ready in just over 2 minutes (140s).

### Long videos - 45 - 75 minutes long

Our most frequently asked question on encoding is "how long for a 1 hour video to be encoded and ready?"  Here are the numbers:


Observant viewers will see there are no 4K videos in this report. At this time, there are very few 4K streams that reach the 1 hour timeframe, and the data was quite noisy.  Hopefully, more of our 'long uploads' will add 4K support, so we can add this metric in our next update.

The median hour long video (red line) will be ready to play (at 240p) in just over 9 minutes (555s), and a 720p version will be ready about 18 minutes after encoding begins (1099s).

95% of hour long videos will have a 240p version ready in 33 minutes, and 720p in 54 (3230s).  the 1080p version will be available for 95% of videos in 108 minutes,

## Conclusion

Short videos will be ready to play - even at high resolution - in under a minute: the median 4K encoding for a short video is 37s. 

Hour long videos take longer to encode, and the median 720p video will be ready in 18 minutes.  95% of 720p videos will be ready to play in 54 minutes.

This is really fast! You can have responsive streaming video ready for your customers in just a few minutes with a simple upload!

That said, our team is working hard in the background to improve our infrastructure to make our encoding speeds even faster! 

We're really excited to have hard numbers to share with you on our encoding speeds, and we cannot wait to re-benchmark this data in 2021 to see how much faster your videos will be encoded as we improve our service.

Do you have questions about api.video or video encoding? Reach out on our [community page](https://community.api.video).


How fast does api.video encode video? 2H 2020 data

medium_gif.jpg

small_gif.jpg

thumbnail_gif.jpg

gif.jpg

Huge pricing update! Introducing video encoding at zero cost

Featured article

# api.video blog

Blog

Follow the api.video Blog to explore tutorials, video use cases, and learn about on-demand and live-streaming video updates.

Video 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

Tutorials

Follow along these tutorials using api.video