codec

transcoding

video api

Normal

large_logo_avatar.webp

medium_logo_avatar.webp

small_logo_avatar.webp

thumbnail_logo_avatar.webp

logo_avatar.webp

api.video

large_api-video-blog-video-trends.png

medium_api-video-blog-video-trends.png

small_api-video-blog-video-trends.png

thumbnail_api-video-blog-video-trends.png

api-video-blog-video-trends.png

Video trends

Have you ever uploaded a video on YouTube and wondered how your video is magically available in 5+ different qualities and 5+ different sizes? It’s not magic ✨ it’s *video transcoding*. 

Well, it’s kind of magic 🌟

In this article, we’ll tell you everything you want to know about video transcoding — from what it is, to its importance in video streaming and [video APIs](https://api.video/). With that said, let’s get started! 🚀

## The difference between video encoding and video transcoding 

Encoding and transcoding sound very similar but, in fact, are two very [different processes](https://api.video/blog/video-trends/what-is-the-difference-between-encoding-and-transcoding/). To learn about video transcoding, let’s first describe video encoding.

### What is video encoding? 

[Video encoding](https://api.video/blog/video-trends/guide-to-video-encoding-video-codec/) digitally compresses raw video from a digital or analog camera. You almost never have to worry about video encoding as your device encodes all videos automatically. The video you recorded of your dog this morning and stored on your phone - it is there on your phone because of video encoding. Similarly, the video that you shared with your friend using WhatsApp wouldn't have been be possible to share without video encoding.

In shirt, encoding is necessary for creating manageable file sizes.

### What is video transcoding?

Video transcoding re-compresses an encoded file which means that video transcoding cannot happen without an initial video encoding.

Transcoding, compresses a file from one digital [codec](https://api.video/blog/product-updates/every-video-format-codec-and-container-explained/) to another. Being able to play videos across a wider range of devices, or to improve playback experience are two of the many reasons that we transcode videos today.

An example of video transcoding is to transcode an encoded AV1 video to an H264 video codec. Why do you need to do that, you may ask? AV1 codec, despite being an efficient codec, is not supported on a wide range of devices. H264 codec on the other hand, is supported on almost all of the devices out there.

large_transcoding-1-1.png

medium_transcoding-1-1.png

small_transcoding-1-1.png

thumbnail_transcoding-1-1.png

transcoding-1-1.png

## Types of video transcoding

When transcoding a video file, some data is lost, which is what we call lossy—the greater the compression, the smaller the file size and the lower the quality. Let’s now look at three main types of video transcoding.

### 1. Lossy-to-lossy

It occurs when one type of lossy data is converted into a different kind of lossy data. Having a file of lower quality before transcoding means the quality will drop even further during the process. Reducing the bitrate for use on portable devices is one of the justification for this transcoding method.

### 2. Lossless-to-lossy

This transcoding reduces quality loss relative to lossy-to-lossy methods while creating files with manageable sizes for mobile devices. To make good use of this transcoding technique, you will need to save archives of files that have been compressed losslessly.

### 3. Lossless-to-lossless

This type of transcoding involves using improved compression to shrink a file without altering its quality. This transcoding method saves quality when switching between formats, but the generated files are sometimes too large to transfer to mobile devices.

## Why is video transcoding used?

The use of video transcoding is based on requirements. Here we can look at some of the top reasons for using video transcoding:

- **Adaptive bitrate streaming (ABR streaming)** - ABR streaming ensures the best video experience on a wide range of devices depending on your internet connection’s speed and stability. Transcoding is a crucial intermediate step to get the highest quality streaming output based on HLS or DASH. For example, video playback on Youtube could be switching between 1080p and 720p versions of the video stream, depending on your device and connection. This leads to the fewest buffering instances and higher-quality playbacks.

- **Limited storage capacity** - The word cloud is one of the biggest tricks played by marketers. It allows us to imagine a world with an infinite storage capacity for data. This is far from reality. Cloud is some hardware located in a room somewhere. No matter where you store your videos, cloud or not, you are using certain storage space. Transcoding is the key to maximizing your storage capacity, resulting in lower carbon footprints. Yes, actual carbon footprints.

- **Quality of user experience** - Transcoding is about more than just reducing a file size. Transcoding is also used to improve the playback experience.

- **Multiple target devices, browsers, and applications** - Transcoding is used for video compatibility amongst different devices, browsers, and applications.

## Who uses video transcoding?

Many individuals and businesses use video transcoding.

- Video streaming APIs for businesses and developers such as [api.video](https://api.video/). Video transcoding is an integral element of an adaptive video streaming workflow to get video content ready for a delivery protocol — like the current industry standard, HLS or DASH — that can play on as many devices as possible.
- Video-On-Demand (VOD) services such as Netflix, Hulu, and Youtube use video transcoding on large scales.
- Content Management Systems (CMS) targeting multiple devices with a variety of video formats and sizes.
- Video Editors. As a video editor, you may prefer to work on the highest quality video codec, and once you're done editing, you could transcode your video to other codecs for delivering to a wider range of devices.

## Video APIs and video transcoding

As one of the more important users of video transcoding, video APIs are beneficial for businesses, both big and small, to create and host on-demand videos. 

[High-quality video APIs](https://api.video/) such as api.video can change your video into HTTP Live Streaming (HLS) for smooth streaming at high speeds anywhere in the world without you needing to worry about doing the process yourself. For the highest possible video quality on any connection, it handles the nitty-gritty of transcoding in different qualities for ABR streaming over HLS while keeping the best playback quality on a wide range of devices.

## Final thoughts

New gadgets are being introduced to us every day. This means there will be more cameras with greater capturing capacities and there will be more screens with higher display qualities.  At the same time, the video world is booming, and more and more businesses need to reach out to users with all sorts of devices and bandwidth. 

Transcoding is not magic, but it certainly has a magical aspect to it. It makes it possible for us to connect through high-quality videos.

Hopefully, now you know more about transcoding and why it’s used in our industry. 

Would you like to start your video journey today? 🎬 Go ahead and start testing in the [api.video](https://dashboard.api.video/register) dashboard for free.

Video transcoding: What, why, and how?

large_Transcoding.png

medium_Transcoding.png

small_Transcoding.png

thumbnail_Transcoding.png

Transcoding.png

Android

Mobile

Private Videos

Player

Player update

thumbnail_thibault_rond.png

thibault_rond.png

Thibault Beyou

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

Kotlin

We have now released an [api.video](https://api.video/) player for Android. The api.video player helps you to include your videos in your Android applications very easily and quickly. In this tutorial, we are going to show how to add an api.video player to your Android application. It will only take 5 minutes. Let’s do this! 👊

Before starting this tutorial, you can upload a video to your api.video. If you haven’t yet, you can check [Upload your first video guide](https://docs.api.video/vod/upload-a-video-regular-upload), which will walk you through your first video upload. The video that you have uploaded to your api.video account will have an assigned `videoId`. In the following steps, we will call for your videoId using the `YOUR_VIDEO_ID` parameter.

To just give you a quick preview, we are going to create an Android application with an api.video player that looks like this:

## The api.video player for Android

The api.video Android player is available on GitHub and comes with an example application, and the artifact is hosted on Maven Central.

The minimum Android API version supported by the api.video Android player is 24. Make sure that you don’t have a `minSdk` version under 24.

The API is divided into 2 main components:

- **The player view:** This component displays the video and its controls: `ApiVideoExoPlayerView` class.
- **The player controller:** This component controls the video and its events: `ApiVideoPlayerController` class.

## Add api.video Android player to your project

If you don’t have an Android application yet, you need to create one before you go further. The [Build Your First Android App in Java](https://developer.android.com/codelabs/build-your-first-android-app#0) is a simple guide that will help you create your Android application. 

### Dependency

The first thing is to add the [api.video](https://api.video/) Android player to your project dependencies. In your application `build.gradle`, add your `dependencies` tag as shown below:

It’s always good to check out if a [new version](https://github.com/apivideo/api.video-android-player/releases) is available.

To have access to the view, I am going to use `ViewBinding` in this tutorial because it is elegant to use as it will be more user-friendly. Now we add the `android` tag:

### XML Layout

In your `Activity` layout, add a player view:

You might have some constraints to add depending on the parent layout.

With `ViewBinding`, we can access our `ApiVideoExoPlayerView` by using the following field:

### Implementation

The main part of the implementation is to create a player controller, but it depends on several other components.

To manipulate video from api.video, the `videoId` is wrapped in an object called `VideoOptions`:

Create a player controller in your `Activity`. For example, in the `onResume`:

Launch the application. You have successfully integrated the [api.video](https://api.video) Android player in your application! 🥳🥳🥳

### Video privacy setting

For more information on changing video privacy settings, see this [article](https://api.video/blog/product-updates/video-access-management-how-to-create-deliver-and-manage-private-videos-and-what/).

If your application requires the use of private videos, then pass your private token to the `VideoOptions`:

### Fullscreen

For the fullscreen button, you will have to develop the fullscreen behavior. The base principles are: 

* When full screen is activated, hide all surrounding views, menu,…, and lock the application in landscape mode.
* When the full screen is deactivated, display surrounding views and unlock the application orientation.

These behaviors must be implemented on the `onFullScreenModeChanged` of `ApiVideoExoPlayerView.Listener`:

In this quick tutorial, you learned about how to simply add an [api.video](https://api.video) player for your Android application. Now you know how to add the api.video player as a dependency, configure the XML layout, and implement the player controller. Moreover, you learned how to change your video privacy and how to set up a fullscreen behavior. 

You can successfully integrate the api.video Android player in your own application by following the steps in this tutorial. For an example of api.video Android player, see the [example](https://github.com/apivideo/api.video-android-player/tree/main/example) provided in the player repository.

If you miss any features, face any bugs, or come across any other issues, we will be happy to help you on our [GitHub issues](https://github.com/apivideo/api.video-android-player/issues) page.🤝

How to add an api.video player to your Android application

large_23nov22-1.png

medium_23nov22-1.png

small_23nov22-1.png

thumbnail_23nov22-1.png

How-to-add-api-video-player-to-your-android-app.png

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?

large_poster-1_2.png

medium_poster-1_2.png

small_poster-1_2.png

thumbnail_poster-1_2.png

poster-1_2.png

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

Video upload

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

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

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

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

## 1. Android Service

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

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

Nice!

There is another interesting part about the service:

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

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

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

small_untitled.png

thumbnail_untitled.png

service-notifications-android-app.png

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

small_untitled-1.png

thumbnail_untitled-1.png

progress-notification-example.png

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

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

## 2. api.video UploadService

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

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

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

### UploadService notification customization

The UploadService comes with many levels of notification customization:

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

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

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

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

There is a solution for each of your requirements!

### Implementation

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

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

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

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

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

## Conclusion

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

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

Upload videos on your Android app with an Android Service

large_blog-thibault-article.png

medium_blog-thibault-article.png

small_blog-thibault-article.png

thumbnail_blog-thibault-article.png

Upload-video-in-your-android-app.png

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

Player SDK

video create

Video list

github-brands.svg

Github Mathieu Thiry

linkedin_logo_initials.png

LinkedIn Mathieu Thiry

Mathieu Thiry

React

Typescript

Next.js

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

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

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

Screenshot TikTok demo on desktop screen size

large_cover_image_tiktok_clone.png

medium_cover_image_tiktok_clone.png

small_cover_image_tiktok_clone.png

thumbnail_cover_image_tiktok_clone.png

cover_image_tiktok_clone.png

## Quick Setup

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

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

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

## Get videos

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

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

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

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

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

**Initialize swr**

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

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

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

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

### How to create smooth scrolling

thumbnail_screenshot_mobile.png

tiktok-demo-screenshot-mobile.png

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

**CSS scroll snap**

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

## Display videos

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

## Upload a video

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

**Upload using delegated upload token**

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

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

## Conclusion

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

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

***BONUS***

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

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

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

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

Ready to build your own TikTok-like project? Get started by [signing up](https://dashboard.api.video/register) with api.video!

Build your own TikTok with PWA and api.video

large_cover-tiktok-s-clone.png

medium_cover-tiktok-s-clone.png

small_cover-tiktok-s-clone.png

thumbnail_cover-tiktok-s-clone.png

cover-tiktok-s-clone.png

5a22d420c9a5a7-416105621512231968826.png

linkedin Alex W

Alexandre Willot

large_api-video-blog-product-updates.png

medium_api-video-blog-product-updates.png

small_api-video-blog-product-updates.png

thumbnail_api-video-blog-product-updates.png

api-video-blog-product-updates.png

Product updates

We’re excited to explain how you can use our sandbox environment to play with our API without spending any money 💸 or fearing generating usage overages. Simply relax 🧘 and explore our video API capabilities without needing a credit card.   

## What is the purpose of the sandbox environment?
api.video’s sandbox environment functions as a testing environment. It enables you to try out our product at no charge. In our sandbox environment, you can upload and stream videos. Simply follow the following steps:

large_copy-your-sandbox-api-key.png

medium_copy-your-sandbox-api-key.png

small_copy-your-sandbox-api-key.png

thumbnail_copy-your-sandbox-api-key.png

copy-your-sandbox-api-key.png

1. [Log in](https://dashboard.api.video/login) to the api.video dashboard, and go to the [API keys](https://dashboard.api.video/project-settings/api-keys) page
2. At the top right, select “Sandbox” as your preferred environment
3. Copy your API key, and start playing with our API through your sandbox environment.

## How can the sandbox environment be helpful to you?

large_video-with-watermark.png

medium_video-with-watermark.png

small_video-with-watermark.png

thumbnail_video-with-watermark.png

video-with-watermark.png

### Discovering our API

Let’s say you just signed up for our service and want to try to upload and stream videos with our service, only you are not sure yet how this works 🤔 , and you do not want to break anything. The sandbox would then be the right place for you to get familiar with our video API routes.

## Testing our API performance

Suppose you want to test api.video’s upload or delivery performance, feel free to try uploading and watching videos with the sandbox. You will get a fair idea of the upload speed and the encoding quality of our service 💪.  

### Testing out a new feature

The sandbox environment is the right place to start if you are already familiar with our product but wish to try out some of our more advanced features (for example, creating private videos or adding a watermark to your video). You can upload any video and try to manipulate it accordingly in the sandbox environment.

### Are there limits to the sandbox environment?
* We display a watermark to prevent content abuse
* Your video length will be capped at 30 seconds
* The video disappears after 24 hours 👋

thumbnail_watermark.png

watermark.png

### What if I don’t want any limitations or watermarks on my videos?

Simply subscribe to one of our paid [plans](https://api.video/pricing/) if you haven’t already 😉

Our sandbox environment can help you test our API for free

Test our video API at no cost with our Sandbox Environment

large_sandbox-post.png

medium_sandbox-post.png

small_sandbox-post.png

thumbnail_sandbox-post.png

api-video-sandbox-environment.png

How our sandbox environment can help you test our API for free

SDKs and libraries

small_olivier.png

thumbnail_olivier.png

olivier.png

Olivier Lando

JavaScript

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

## **Presentation**

### **The Loom tool**

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

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

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

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

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

Here are its main features:

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

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

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

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

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

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

large_screenshot.jpg

medium_screenshot.jpg

small_screenshot.jpg

thumbnail_screenshot.jpg

loom-like-app-screenshot.jpg

## Prerequisites

The only things you’ll need are:

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

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

### **Page layout**

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

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

This is what it looks like:

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

### **Initialization**

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

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

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

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

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

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

### **Adding video streams**

We will add two streams to our composition:

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

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

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

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

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

### **Drawing tool**

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

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

### **User interactions**

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

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

*The `start` button*

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

*The `stop` button*

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

*The `tool-select` select*

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

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

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

## **Conclusion**

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

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

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

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

Ready to build your own Loom-like App? Get started by [signing up](https://dashboard.api.video/) with api.video!

Video on demand

Live streaming

Analytics

Video infrastructure

Video player

AI features

See all features

Online learning & Corporate training

Social & Entertainment

Marketplace & E-commerce

Communication & UGC

Generative AI

Quickstart guides

Documentation

Ecosystem catalog

Clients & SDKs

Community

Blog

Demos

Customer success stories

Help center

Blog

AI >< Video: The Video Model Hub unveiled