next.js

video api

api video plugin

Normal

large_img_8063-min-1.jpg

medium_img_8063-min-1.jpg

small_img_8063-min-1.jpg

thumbnail_img_8063-min-1.jpg

img_8063-min-1.jpg

github-brands.svg

GitHub Yohann

5a22d420c9a5a7-416105621512231968826.png

LinkedIn Yohann

Yohann Martzolff

Tutorials

JavaScript

Typescript

Next.js

React

No doubt, Next.js is one of the best React framework for full-stack web applications.

What if you want to create your own video application? A Next.js boilerplate with all [api.video](http://api.video) features is ready for you to begin your journey 🧑‍💻 

## What’s a boilerplate 🤔

A boilerplate is a unit of writing that can be reused without change. The idea is sometimes applied to reusable programming, and that’s the case here: our Next.js boilerplate is a starter pack containing all [api.video](http://api.video) features that anybody can use, without having to change anything in it to start a new project. 

Of course, you are free to modify anything once your application is running!

## What can I achieve with this boilerplate 🥇

After the boilerplate has been bootstrapped, you can run your brand-new application and enjoy [api.video](http://api.video) features!

Upload videos, display them as a list, and play any video in a fully customizable player.

[api.video](http://api.video) proposes many more endpoints to manage and create a complete video application.
Check [our documentation](https://docs.api.video/docs) to learn about this.

## Get started 🏁

Find out about ***[how to use our boilerplate](https://github.com/vercel/next.js/tree/canary/examples/with-apivideo)*** on the README file, or follow the guide bellow 👇 

1. Create a new Next.js application by running one of the following commands in a new terminal and following the command prompts.

2. Rename the `.env.local.example` file with `.env`.
3. Find your API key in the [api.video](http://api.video) dashboard [API keys section](https://dashboard.api.video/apikeys) and add its value to the API_KEY environment variable in the `.env` file.

💡 If you don’t already have an api.video account, create a free one [here](https://dashboard.api.video/register).

4. Start your application by running `yarn dev` in your terminal, and voilà!

You should be able to see a basic sample app from where you can upload videos and see them as a list.

large_screenshot-2023-01-31-at-17-24-04.png

medium_screenshot-2023-01-31-at-17-24-04.png

small_screenshot-2023-01-31-at-17-24-04.png

thumbnail_screenshot-2023-01-31-at-17-24-04.png

screenshot-2023-01-31-at-17-24-04.png

Everything in this application is set up to build a complete video application, from Next.js to api.video, enjoy coding! 

Find the full boilerplate in the official Next.js repository [right here](https://github.com/vercel/next.js/tree/canary/examples/with-apivideo).

large_02fev23.png

medium_02fev23.png

small_02fev23.png

thumbnail_02fev23.png

02fev23.png

api.video Next.js boilerplate: start your video project the easy way

strapi

thumbnail_mathieu_round-1.png

mathieu_round-1.png

Github Mathieu Thiry

linkedin_logo_initials.png

LinkedIn Mathieu Thiry

Mathieu Thiry

[Strapi](https://strapi.io/) is a headless CMS used to develop websites, mobile applications, eCommerce sites, and APIs. Strapi allows you to create an API without knowing anything about backend development or databases. 

Today, we're pleased to announce our new plugin on the Strapi marketplace 🎊. A powerful, easy, and secure way to bring video content to your websites and applications using the Strapi interface. 

In this tutorial, we will focus on how to use the [api.video](http://api.video) plugin, and provide a basic example on how to integrate the api.video plugin into your project. 

## Install the api.video plugin for Strapi

Take a look at the following video which goes through the following:

* How to install the api.video uploader on your Strapi CMS with a few simple steps.
* How to add your api.video key to the Strapi CMS to connect your accounts.




You will need to have your instance of Strapi installed. If you haven’t installed a Strapi project yet follow this [guide](https://docs.strapi.io/developer-docs/latest/getting-started/quick-start.html). 

We are going to install the [api.video uploader](https://www.npmjs.com/package/@api.video/strapi-uploader-plugin) Strapi plugin in this step. Run the following command from within the project root of Strapi.

🎉 Congrats, the *api-video-uploader* plugin should appear in the **Plugins** section of Strapi sidebar after you run app again.

## Connect your api.video API Key

Before getting started, you will need to obtain an **API Key** which can be generated from the [api.video dashboard.](https://dashboard.api.video/)

On your Strapi dashboard, you will see the api.video uploader on the left side. Click on the api.video uploader and you will see the *Go to settings* button. Enter your API Key you have obtained on your api.video dashboard and copy it here. 

Now you are all set to upload your videos 🎖️

large_api-video-uploader-strapi.png

medium_api-video-uploader-strapi.png

small_api-video-uploader-strapi.png

thumbnail_api-video-uploader-strapi.png

api-video-uploader-strapi.png

## Manage and integrate your videos 

Take a look at the following video which goes through the following:

* How to add, update, and delete your videos on the api.video uploader in your Strapi CMS.
* How to integrate your videos into your application using the Postman application for testing.



## Upload your first video

As you can see, you have two options to add a video. Click any of the buttons, and a pop-up window will appear.

large_api-video-uploader-strapi-1.png

medium_api-video-uploader-strapi-1.png

small_api-video-uploader-strapi-1.png

thumbnail_api-video-uploader-strapi-1.png

api-video-uploader-strapi-1.png

You can choose to upload your video file by either clicking on the Select a video box or drag and drop your video file into the boxed area. As you can see, the video must have a title. Once you select a video and enter a title, you can go ahead and click the Upload button. Wow! You have just uploaded your first video 🎈

large_api-video-uploader-strapi-2.png

medium_api-video-uploader-strapi-2.png

small_api-video-uploader-strapi-2.png

thumbnail_api-video-uploader-strapi-2.png

api-video-uploader-strapi-2.png

Before clicking the *Upload* button, you can also add several video attributes that would help you or your business to organize and rank your videos in a more efficient way. You can write a description of the video, list a number of tags to categorize your video, and add metadata. 

By default, the metadata sends the value Strapi as upload source and can’t be deleted. However, you can add as many other metadata as needed.

medium_api-video-uploader-strapi-3.png

small_api-video-uploader-strapi-3.png

thumbnail_api-video-uploader-strapi-3.png

api-video-uploader-strapi-3.png

It’s worth mentioning that behind the scenes, it uses our home made [`typescript uploader`](https://github.com/apivideo/api.video-typescript-uploader) for fast uploading.

### Edit or delete your videos

You can edit and update your videos at any time. The information modified will be applied and visible on the Strapi dashboard. The delete option is available on the thumbnail.

### Configure the external resources**

large_api-video-uploader-strapi-4.png

medium_api-video-uploader-strapi-4.png

small_api-video-uploader-strapi-4.png

thumbnail_api-video-uploader-strapi-4.png

api-video-uploader-strapi-4.png

If you encounter an issue in visualising the thumbnail and the video like the image above, please add those 2 external resources `embed.api.video` and `cdn.api.video`. Modify the `middlewares.js` file like below:

## Permissions

With the Community Edition of [Strapi](https://strapi.io/), any user with the role of super administrator can configure and use the plugin.

With *Strapi Enterprise* the permissions can be fine tuned according to the role of the users. This is done in the **Roles** view in the **Administration Panel**.

large_api-video-uploader-strapi-5.png

medium_api-video-uploader-strapi-5.png

small_api-video-uploader-strapi-5.png

thumbnail_api-video-uploader-strapi-5.png

api-video-uploader-strapi-5.png

## Integrate the api.video uploader with your application

The `api-video-asset` collection type gives users a way of easily integrate [api.video](http://api.video) assets in their front-end application thanks to custom api call. 

The info that is stored on the `api-video-asset` collection type is the following: 


large_graphic_strapi.png

medium_graphic_strapi.png

small_graphic_strapi.png

thumbnail_graphic_strapi.png

graphic_strapi.png


The endpoint is protected, so you need a token to authenticate. Go to the *Settings* section on your Strapi dashboard and then select *API Tokens*. Click on Create new *API Token*. Select *Custom*  as your *Token type* and then scroll down to *Api-video-uploader* and choose what type of permission you want.

large_api-video-uploader-strapi-6.png

medium_api-video-uploader-strapi-6.png

small_api-video-uploader-strapi-6.png

thumbnail_api-video-uploader-strapi-6.png

api-video-uploader-strapi-6.png

After clicking on the Save button, copy the bearer token published. We are going to test it on Postman. Copy the following URL address http://localhost:1337/api/api-video-uploader/api-video-asset and paste it next to your request type. Go to Authorization, select the Type Bearer and paste the copied token. Click send and you will get your videos details! 

medium_api-video-uploader-strapi-7.png

small_api-video-uploader-strapi-7.png

thumbnail_api-video-uploader-strapi-7.png

api-video-uploader-strapi-7.png

## Final thoughts

We're super excited to see what folks will build with the api.video and Strapi 🤩 

If you're looking for an easy way to integrate video into your application, check out our **[docs](https://docs.api.video/docs)** and **[sign up for a free account](https://dashboard.api.video/register).**

large_api-video-strapi-plugin.png

medium_api-video-strapi-plugin.png

small_api-video-strapi-plugin.png

thumbnail_api-video-strapi-plugin.png

api-video-strapi-plugin.png

api.video Strapi Plugin: Add videos to your headless CMS.

Video upload

SDKs and libraries

small_olivier.png

thumbnail_olivier.png

olivier.png

Olivier Lando

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

screenshot.jpg

## Prerequisites

The only things you’ll need are:

- a text editor
- an [api.video](http://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.

large_build-your-own-loom.png

medium_build-your-own-loom.png

small_build-your-own-loom.png

thumbnail_build-your-own-loom.png

build-your-own-loom.png

Build a Loom-like app with just a few lines of code

Delegated Upload

API client

NodeJS

Uploading a video to [api.video](http://api.video) can be done in several ways: 

- **API:** make calls to get the mandatory information such as access token, create your fully customized video container, and finally upload your video file 🧑‍💻.
It’s the most secure way to upload, but it requires a backend to hide sensitive data and several API calls. Even though it’s easy, customizable, and reliable, you may need a faster way to do this.
- **TypeScript uploader:** [api.video](http://api.video) provides a [TypeScript uploader](https://www.npmjs.com/package/@api.video/video-uploader) that allows you to upload video directly to your workspace without calling the API. You can even choose between three upload methods 🤩!
Don’t forget you still have to implement a UI for your uploader if it’s not already done!
- **React upload button:** a few weeks ago, we quietly released the first version of our [React upload button on NPM.js](https://www.npmjs.com/package/@api.video/react-upload-button).
This new package allows you to display a fully customizable button in your application in less than a minute!
Today, we will see together how to get mandatory information from a Node backend to use this React component without exposing any sensitive data 🔒.

## **Prerequisites**

- [React](https://reactjs.org/docs/getting-started.html) and [NodeJS](https://nodejs.org/en/) knowledge
- For the simplicity of this example, we’ll use [Next.js](https://nextjs.org/), a React framework that provides an already implemented Node server. Basic knowledge of it can help you go through this tutorial.

Remember that any Node backend will work to get information, as seen in this article.

## Get started

You need an [api.video](http://api.video) account to work with our API and our packages.

[**Create a free one or log into yours just here.**](https://dashboard.api.video/login)

## 1. Create a new Next.js application

From your command line, run one of the below commands:

Once completed, open your new Next.js application in your favorite IDE and run it:

large_screenshot-2022-05-23-at-10-30-25.png

medium_screenshot-2022-05-23-at-10-30-25.png

small_screenshot-2022-05-23-at-10-30-25.png

thumbnail_screenshot-2022-05-23-at-10-30-25.png

screenshot-2022-05-23-at-10-30-25.png

## 2. Get the required packages

To complete this tutorial, we’ll need two [api.video](http://api.video) packages 🛠️

- **NodeJS client package:** to access the API with ease
- **React upload button:** to upload our videos

From your application root, run this command:

## 3. Create a .env.development file

Create a `.env.development` file at the root of your application and store two environment variables in it:

- The **Next.js public API host:** to access the implemented Node.js API from Next
- Your **API key value:** to instantiate the Node.js client from api.video

You can find your API key in the **[API keys section of the api.video dashboard](https://dashboard.api.video/apikeys)**.

large_image-3-1.png

medium_image-3-1.png

small_image-3-1.png

thumbnail_image-3-1.png

image-3-1.png

⚠️ You need to **restart your application** each time you’ve made changes in your .env.development. Otherwise, you cannot access new environment values.

## 4. Create your API endpoint

In this part, we want to create **one API endpoint** that allows us to make **two actions**:

- **Retrieve** our upload tokens list
- **Create** one if needed

To do this, we will differentiate the calls to this endpoint by HTTP methods:

- **GET** to retrieve our upload tokens list
- **POST** to create one upload token

Create a new file under the `/pages/api` directory in your application and name it `uploadTokens.ts`

thumbnail_screenshot-2022-05-23-at-11-26-11.png

screenshot-2022-05-23-at-11-26-11.png

### Retrieve your upload tokens list

In your brand new `uploadTokens.ts` file, create your endpoint and the method to retrieve your upload tokens list. Copy and paste the code below:

*[Find the official documentation for the upload tokens list method here.](https://github.com/apivideo/api.video-nodejs-client/blob/main/doc/api/UploadTokensApi.md#list---list-all-active-upload-tokens)*

### Create a new upload token

We may need to generate a new upload token if we don’t have any available.
Add the creation method in your `uploadTokens.ts` file:

*[Find the official documentation for the upload token createToken method here.](https://github.com/apivideo/api.video-nodejs-client/blob/main/doc/api/UploadTokensApi.md#createtoken---generate-an-upload-token)*

## 5. Call your API

Now we can **retrieve our upload tokens list** and **generate a new one** on demand. We’ll see how to make it happens from the **front end.**

Let’s clean our Home component 🧹
Go to your `pages/index.tsx` file and modify it:

Now our app is nice and clean, let’s implement our logic in 2 steps:

- We want to check if we have any available upload tokens from our upload tokens list.
- If we do not have any upload token, we want to create one.

### Set your upload token

Create a new method that calls your API endpoint `uploadTokens` to retrieve your list, and create one if the list is empty. You should call it in a useEffect inside your Home component:

Call the method in a useEffect inside your Home component:

## 6. Click. It’s magic! 🧚

Already? 😱

Everything should work well now. Click on the displayed button in your application and choose a file to upload to your [api.video](http://api.video) workspace.

large_screenshot-2022-05-23-at-16-04-10.png

medium_screenshot-2022-05-23-at-16-04-10.png

small_screenshot-2022-05-23-at-16-04-10.png

thumbnail_screenshot-2022-05-23-at-16-04-10.png

screenshot-2022-05-23-at-16-04-10.png

## 7. Customize your upload button 💅

You can customize multiple things to make your upload button unique:

- CSS: make it looks the way you want
- Progress event: trigger a callback on upload progress
- Success event: trigger a callback on upload success
- Error event: trigger a callback on upload error

**[Check our complete list of examples for inspiration](https://codesandbox.io/s/great-shtern-0ck5eo?file=/src/App.tsx)** 🧘

backend.svg

How to upload a video with React and NodeJS

Video list

Video Status

thumbnail_aya-modified.png

aya-modified.png

Github Aya Bochman

Aya Bochman

In this tutorial we will create a Udemy-like learning platform with [api.video](http://api.video) using Next.js, React, and Typescript. Udemy is an open online learning and teaching marketplace where you can have access to a variety of courses.

We’ll focus on how to easily add Udemy’s notes feature to your video with the help of [api.video’s player SDK](https://github.com/apivideo/api.video-player-sdk), which allows us to control and interact with our player. We’ll also see how to show a progress bar on the videos preview and resume a video where it was last paused.

You can see the demo [here](https://udemy-clone-next-typescript.vercel.app/) and the complete code [here](https://github.com/apivideo/udemy-clone-next-typescript).

video-note-demo.gif

## 1. Quick Setup

Let's start to build a new Next.js application using **Create Next App** and `--ts` for **Typescript**

Run these commands in the terminal:

Once inside our project, install api.video’s Node.js client and player SDK  with some style and icon packages:

Note: We'll use styled-components and react-icons to style our example application, but you can use any styling libraries you want. 

## 2. Video list preview

First, on our main page, we will display a list of our videos. You can follow the 3rd step, “How to fetch data,” in our [Youtube clone tutorial](https://api.video/blog/use-cases/rebuilding-youtube-with-api-video-next-js) to achieve that. 

After you fetch the videos data in `pages/index.tsx`, add a component that you’ll pass the `videos` result to.

## Video preview

Once we have our array of videos in a designated component, we want to create a simple video preview with a title and thumbnail.  

We’ll map the list, and in each video object, we can access the thumbnail CDN with `assets.thumbnail` and show the `title`. Pass it to your desired preview component, style it, and you can get a result like this:

large_videos-preview-empty.png

medium_videos-preview-empty.png

small_videos-preview-empty.png

thumbnail_videos-preview-empty.png

videos-preview-empty.png

## 3. Video page view

### Setting up the player SDK

I’ve created a `components/Video/index.tsx` component which will display the video on my `pages/video/[videoId]` page. Then let’s set up the player SDK in 2 simple steps:

**Step 1 - Get video details**

Create an API route in `pages/api/video.ts` for getting video details by Id with our [Node.js client](https://github.com/apivideo/api.video-nodejs-client).

Now in the front end, get the `videoId` from the query, send it to the API, and you will get a video object. 

**Step 2 - Create player SDK**

Now the fun part begins 😄 after we get the `videoId`, we can create our [api.video player SDK](https://github.com/apivideo/api.video-player-sdk#documentation). The SDK will help us to get a bunch of information from our video, and to control and customize the player as we want. 

After these 2 steps, our code should look like this:

Go to the [player SDK documentation](https://github.com/apivideo/api.video-player-sdk#documentation) to read more about the params `id, hideTitle, hidePoster` 

You’ll notice that we’re getting an element by id called `myVideo`. We need it to connect the SDK to the actual HTML5 player. So let’s create that iframe element in our render:

large_player-img.png

medium_player-img.png

small_player-img.png

thumbnail_player-img.png

player-img.png

Set the player SDK in the state, and once it’s added to the state for use, we want to add a few more features when the player is ready with `addEventListener('ready', callback)`. `ready` means the player is loaded and ready to play, so here we can customize the theme to Udemy’s player colors, and get the total duration of the video for the Overview tab display.

We can do that with the SDK’s `setTheme()` and `getDuration()` methods. I’ve put the methods in separate functions to keep the code clean.

Read more about the player SDK methods and event listeners [here](https://github.com/apivideo/api.video-player-sdk#methods).

The duration we get from the SDK is in seconds, so I’ve added a conversion to hours function in `utils/functions.ts`

large_duration-preview.png

medium_duration-preview.png

small_duration-preview.png

thumbnail_duration-preview.png

duration-preview.png

### Bookmarking a video - How to listen to a player’s timestamp?

In this part, we'll focus on how to add a note to a video’s specific timestamp! We can achieve that by using [api.video player SDK](https://github.com/apivideo/api.video-player-sdk) that we set in the previous step.

JavaScript

api.video Next.js boilerplate: start your video project the easy way

api.video Strapi Plugin: Add videos to your headless CMS.

Build a Loom-like app with just a few lines of code

How to upload a video with React and NodeJS

How to create a Udemy-like learning platform

How to build a live streaming app in 3 steps

Rebuilding YouTube with api.video and Next.js

Add bumpers to your video with bumper.a.video

Video duets in the browser

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