Video list

Video Status

Normal

thumbnail_aya-modified.png

aya-modified.png

github-brands.svg

Github Aya Bochman

Aya Bochman

Tutorials

JavaScript

NodeJS

Next.js

Typescript

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.

new-note-click.gif

To create a bookmark in a video, we need to constantly listen to the video’s playback. The idea is that once we click on ‘Add Note,’ the video will pause, and we can write and save a note on its timestamp. 

So our next step is to add a `timeupdate` event listener, then set it to the state called `currTimestamp`. Make it an object of `minutesFormat` and `seconds` because we want to have a formatted minutes display but also a seconds value for some of the player SDK methods.

Save the video’s timestamp in the localStorage to keep track of the video’s playback. We’re going to use it to show progress later.

I chose to format our seconds to `mm:ss` display, but you can choose whatever format you like, just add it in our `utils/functions.ts`

And we’re set! 👏  At this point, we have our `currTimestamp` in the state, and we can now create a note button that will pause the video when we click on it with `playerSdk.pause()` method, then open the Notes tab with an input on the current timestamp.

large_note-preview-filled.png

medium_note-preview-filled.png

small_note-preview-filled.png

thumbnail_note-preview-filled.png

note-preview-filled.png

*I’m saving the notes in an object state where the key is our formatted `mm:ss` timestamp, and the value is an object of `note` and `seconds`. For the simplicity of the demo, the notes are saved in the local state.*

Suppose you go straight to the Notes tab without deciding which timestamp you want or after saving a timestamp. In that case, Udemy has a ‘Create a new note at’ button at the top, which has a changing timestamp value corresponding with the player’s playback. 

This is easy to achieve since we’ve already set our `currTimestamp` in the state with a `minutesFormat` value. So when displayed in the button, it will change with the playback time, like this:

note-timestamp.gif

Now, after we have some saved notes, we want to be able to jump to the timestamp by clicking on the note’s timestamp button.

That’s going to be very simple - since we’re saving `seconds` in every note object we create, let’s map our `notesList` for display, then send `notesList[key].seconds` to our player SDK method `playerSdk.setCurrentTime(seconds)`. This will set the player’s playback time to our desired seconds.

jump-to-timestamp.gif

### Display video progress

Remember we saved the video’s timestamp in our localStorage? Now it’s time to use it for creating a progress bar like this:

large_filled-progress.png

medium_filled-progress.png

small_filled-progress.png

thumbnail_filled-progress.png

filled-progress.png

In our video preview component, create this function:

First, we’re calling [api.video](http://api.video) [GET video status API](https://docs.api.video/reference/api/Videos#retrieve-video-status-and-details) from which we can extract the total duration of our video. 

Then we get the video’s last timestamp we saved in our localStorage with `videoId`. 

Once you have the total duration and paused seconds, all you’ve got left is to choose how you want to draw the progress on the preview. I used [Radix UI progress](https://www.radix-ui.com/docs/primitives/components/progress) which is very easy to customize. 

The same goes for when we click on a video and want to set it to the last paused timestamp. Extract the timestamp from the local storage, then use our player SDK `setCurrentTime(seconds)` method. 

And voila! 🥳 Now we can display a nice progress preview on our videos and set a video to its last timestamp.

## Conclusion

This tutorial taught us how to recreate a Udemy-like learning platform, focusing on their notes feature and video progress. 

We achieved amazing, functioning results with the power of api.video’s player SDK, and Node.js client. The entire code is available for you [here](https://github.com/apivideo/udemy-clone-next-typescript).

That’s it! 💪 [Start building](https://dashboard.api.video/register) now and don’t hesitate to ask questions or share your project with us on the [Community](https://community.api.video/)!

See you in our following tutorials 👋

### Part 2 is available: Add AI-generated summary, topics, and transcript to your videos using [symbl.ai](https://symbl.ai/blog/accessibility-automated-content-management-e-learning-platforms/)

How to create a Udemy-like learning platform

large_udemy-preview-blog.png

medium_udemy-preview-blog.png

small_udemy-preview-blog.png

thumbnail_udemy-preview-blog.png

udemy-preview-blog.png

small_t02cw29ka-u01mb2yt4jy-6b20d89f5863-512.png

thumbnail_t02cw29ka-u01mb2yt4jy-6b20d89f5863-512.png

t02cw29ka-u01mb2yt4jy-6b20d89f5863-512.png

twitter-brands.svg

Twitter Jose

linkedin_logo_initials.png

LinkedIn Jose

José Barcelon-Godfrey

Product updates

The [api.video dashboard](https://dashboard.api.video) is the first step to getting started with our API - whether you are accessing your API key for the first time or quickly uploading a video on the fly. The second step is implementing the API into your app or product. 

Our goal is to help you quickly implement video into your app by facilitating communication between the two services.

facilitate communication between the two services.

large_untitled.png

medium_untitled.png

small_untitled.png

thumbnail_untitled.png

untitled.png

A little over a year ago, we released our [first iteration on webhooks](https://api.video/blog/product-updates/new-feature-webhooks/) which enabled developers to receive events when a **video quality had finished being encoded**.

This opened up a series of potential use-cases enabling product builders to know when a user’s video is ready to be watched. Once a video is ready, using webhooks, you can build follow-up actions to give your users a better experience. 

We later introduced other events for you to capture, such as **when a user starts and stops broadcasting a live stream** or when a **live stream has finished being recorded.**

But up until now, setting up webhooks was only doable through the API. This could be done by making a curl request on the command line or by building your own custom form to make things easy.

## Sometimes you just need a form.

You can quickly set up the endpoint to receive live events from api.video, saving you precious development effort and time.

set up the endpoint to receive live events from api.video

large_untitled-2.png

medium_untitled-2.png

small_untitled-2.png

thumbnail_untitled-2.png

untitled-2.png

Along with the action of creating webhooks, you’ll also find a new webhooks list and delete actions to help you deal with your endpoints without the hassle of code implementations.

large_screenshot-2022-04-07-at-12-20-13.png

medium_screenshot-2022-04-07-at-12-20-13.png

small_screenshot-2022-04-07-at-12-20-13.png

thumbnail_screenshot-2022-04-07-at-12-20-13.png

screenshot-2022-04-07-at-12-20-13.png

## Shortcut to the important stuff

Once you’ve set up your first webhook endpoint, you can now focus on building the workflow when receiving the event. 

Here’s an example of data your newly set up endpoint will receive when the quality has finished encoding.

Learn more about what you can do with webhooks from our blog [webhooks articles](https://api.video/blog/endpoints/webhooks/) or our [docs](https://docs.api.video/reference/api/Webhooks#create-webhook).

## More to come

Over the coming months, we’ll be making more and more enhancements to our Dashboard, making it even more straightforward for you to create your dream video features. 

We hope these changes make it faster and easier to manage your webhooks and speed up implementation. We’re constantly working to make the Dashboard more productive for you — [please send us ideas and feedback](https://community.api.video) on what we should improve next!

Setup Webhooks from your api.video Dashboard to save time

large_webhooks_dash.png

medium_webhooks_dash.png

small_webhooks_dash.png

thumbnail_webhooks_dash.png

webhooks_dash.png

Setup Webhooks from your api.video Dashboard: a feature to save you time.

live - create

API client

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 Yohann

5a22d420c9a5a7-416105621512231968826.png

LinkedIn Yohann

Yohann Martzolff

React Native

In this tutorial, you will learn how to build our own live streaming broadcast application with React Native and api.video.
We're also going to use TypeScript, but you can choose either TypeScript or JavaScript. Both work well with api.video's clients. For further details, check out our [official repository](https://github.com/apivideo/api.video-reactnative-live-stream).

Congratulations! The live streaming app is done!

ezgif-com-gif-maker-2.gif

## Getting started

First, follow the development setup steps from [React Native's official documentation](https://reactnative.dev/docs/environment-setup).

If you're new to React Native, you may also need to [learn the basics](https://reactnative.dev/docs/tutorial).

Make sure that you have the latest Node stable version installed.

*Quick reminder: iOS development is only enabled for macOS users. If you're on Windows or Linux, you can develop for Android.*

The official React Native documentation states, "you can follow the **Expo CLI Quickstart** to learn how to build your iOS app using Expo instead."


## Create a new React Native app

Open a new terminal. Go to the folder of your choice and run the following command to create a new React Native application with TypeScript:

### Launch the application

Inside your new project start Metro to bundle your application:

Once Metro is connected and ready, open another terminal. Go to your project folder, and launch your application.

This command line can take several minutes to finish, stay calm and grab a coffee ☕

If everything is set up correctly, you should see your new app running in your iOS / Android emulator like this

thumbnail_screenshot-2022-03-21-at-11-56-07-2.png

screenshot-2022-03-21-at-11-56-07-2.png

## Add the live stream client to your app

Congratulations! 🎉 You've just created a React Native application!
Now, it's time to install the [api.video RTMP live stream client](https://github.com/apivideo/api.video-reactnative-live-stream) into it to live stream directly from your mobile device for free.


### Installation

At this time, the `npx react-native init` command creates a React Native application with `yarn`.

Yarn is a package manager, like NPM. Don't worry if you've not worked with it before; it's easy to use and similar to NPM.


To install the api.video RTMP live stream client, open a terminal. Go to your project folder and run this command:

For iOS usage, you will need to complete two more steps:
1. Install the native dependencies with [Cocoapods](https://cocoapods.org/):

2. This project contains Swift code. If it's your first dependency with swift code, you’ll need to create an empty Swift file in your project (with the bridging header) from Xcode. [You can find instructions here](https://github.com/apivideo/api.video-reactnative-live-stream/#ios).


### Permissions

⚠️ Both iOS and Android need permission to broadcast from your device's camera and record audio.

You will also need to ask for internet permission for Android.

#### Android

From your project folder, open the `AndroidManifest.xml` file. It’s located in the `LiveStreamApp/android/app/src/main` directory.
Add the following content just under the opening `<manifest>` tag to enable internet, audio recording, and the camera for your application:

#### iOS

From your project folder, open the `Info.plist` file. It’s located in the `LiveStreamApp/ios/LiveStreamApp` directory.
Add the following content just under the opening `<dict>` tag to enable the camera and microphone:

Don't forget to add the app description, as shown above, if you want to deploy your application in stores.

#### Sign your iOS application (optional)

You may need to [sign your iOS application](https://github.com/apivideo/api.video-reactnative-live-stream#ios). I recommend doing it now to avoid issues later. 

### Usage

#### Component

Change your `App.tsx` file with the following code:

⚠️ You may need to relaunch your Metro after this.

A black screen with a round button at the bottom should appear in your emulator: it's your live stream view.

thumbnail_screenshot-2022-03-30-at-15-06-54-2.png

screenshot-2022-03-30-at-15-06-54-2.png

#### Launch your first live stream

If you want to test to live stream from an actual device (iOS in our case), open Xcode. Click on “Open a project or file,” select the `LiveStreamApp/ios` folder, and open it.
Connect your device to your iMac/Macbook and run your application.
For Android, you can check the [official documentation](https://developer.android.com/studio/run/device).

You will need to change `YOUR_STREAM_KEY` to a real one. You can find yours in the [api.video dashboard](https://dashboard.api.video/). If you don't have an account yet, create one, it's free.
Then, create a livestream from the overview or the “Live streams” page.

Find this action card and click on "Start live stream"

large_screenshot-2022-03-22-at-08-24-00.png

medium_screenshot-2022-03-22-at-08-24-00.png

small_screenshot-2022-03-22-at-08-24-00.png

thumbnail_screenshot-2022-03-22-at-08-24-00.png

screenshot-2022-03-22-at-08-24-00.png

A modal will appear with several pieces of information in it, including the shareable link and stream key. Save the shareable link to access your live stream later.

This modal should appear once you click on "Start live stream"

large_screenshot-2022-03-25-at-17-1-1.png

medium_screenshot-2022-03-25-at-17-1-1.png

small_screenshot-2022-03-25-at-17-1-1.png

thumbnail_screenshot-2022-03-25-at-17-1-1.png

screenshot-2022-03-25-at-17-1-1.png

💡 You can also use the [api.video](https://api.video/) API to create a live stream and retrieve your stream key dynamically. [Find how to do this right here](https://docs.api.video/reference/api/Live-Streams#create-live-stream).

Paste your stream key in place of `YOUR_STREAM_KEY`.

Click on the button in your application; it should turn red. Them, go to the shareable link you just saved. There you go! You can see what your mobile is streaming in real-time! If it's not the case, wait a few seconds and check your stream key value.


## Make it dynamic

Our application is working; we can now do an actual live stream directly from our smartphone. 
But api.video RTMP live stream client allows us to customize our live stream the way we want. 
In this section, we will see how to customize our live stream parameters and make our application UI better.

Check the [official README](https://github.com/apivideo/api.video-reactnative-live-stream/tree/v1.0.0) for exhaustive information about the `@api.video/react-native-livestream` package.

Some properties can be updated during the live stream:

- Camera: front or back
- Audio: muted or not

We can leave these properties on the live stream view. This way, we can update them during our live stream.


### Add icons

We will need icons in our application.
Install the corresponding dependency before going further.

1. Stop your application
2. Delete the pods (only for iOS usage.)

3. Add the [react-native-vector-icons](https://www.npmjs.com/package/react-native-vector-icons) NPM package:

4. Go into `/ios` and install your pods (only for iOS usage.)

5. To display an icon, import it and use it as a component

⚠️ An import error could be displayed in Visual Studio Code, but it should work anyway.


### Live stream view

Right now, we only have a single button at the bottom of our live stream view, contained in the `App.tsx` file.

We can customize this component a little bit to make it more obvious.

#### Streaming button

Let's add text if our live stream is not running and an icon when it is.
Replace the above code by this one:

Don't forget to update your style to display the streaming button conditionally:

#### Camera button

To change the camera input (front or back), we need to add a button we can access during our live stream.

To do this, a local state is needed, like the `streaming` one:

1. Add it in your `App` component and replace your static string for the camera props:

2. Handle the change of camera with this handler. Place it in your `App` component:

3. Add this code under your streaming button. It’s our camera icon component:

When you press the camera icon, displayed in the bottom right corner, you should switch from the back camera to the front and vice versa.

#### Muted button

We may want to mute our stream at a specific time. For this, we also need a local state and a button.

1. Add a new local state under the other ones and replace your static boolean for the `isMuted` props:

2. Handle the change of `muted` state with this handler. Place it in your `App` component:

3. Add this code under your camera button. It’s our mute icon component:

When you press the mute icon, displayed in the bottom left corner, you should switch from muted to unmuted.

And voilà! You can now launch a live stream directly from your device, choose which camera you want to use, and allow sound recording or not.

## And now what?

Congratulations! You just created a fully functional live streaming broadcast application. You can go further and implement the logic to modify all other settings provided by [api.video](https://api.video).
You can check the [React Native live streaming sample application](https://github.com/apivideo/api.video-reactnative-live-stream/tree/main/example) to get an idea of the potential of this tool (product?).

api.video provides two development environments. The sandbox allows you to live stream directly from your computer or mobile, but a watermark will be applied to your video and there is a 30 minute limit for live streams. 

To avoid these limitations, try one of the plans found [here](https://api.video/pricing) and go into production mode 🚀

How to build a live streaming app in 3 steps

large_image.png

medium_image.png

small_image.png

thumbnail_image.png

image.png

thumbnail_mathieu_round-1.png

mathieu_round-1.png

Github Mathieu Thiry

LinkedIn Mathieu Thiry

Mathieu Thiry

Use cases

This tutorial will show how quick and straightforward it is to build a youtube clone with [api.video](https://api.video) and Next.js. By encapsulating the front-end and backend inside our Next app, we can rapidly develop and deploy as we need a backend to run *[@api.video/nodejs-client](https://github.com/apivideo/api.video-nodejs-client).*

YouTube’s core functionality is the video library, so today, we will focus on this crucial feature: listing videos. You will have all the steps to build a public catalog of videos for your product. The demo is available [here](https://api-video-youtube-demo.netlify.app) and the code [here](https://github.com/apivideo/youtube-clone-next).
Let's start 🎬

large_cover-youtube-clone.png

medium_cover-youtube-clone.png

small_cover-youtube-clone.png

thumbnail_cover-youtube-clone.png

cover-youtube-clone.png

## 1. Application setup

Let's quickly start to build a new Next.js application using **Create Next App**

Run these commands in the terminal:

*Note: We'll use [styled-components](https://styled-components.com) and [react-feather](https://feathericons.com) for icons to style our example application, but you can ignore these steps if you have another preference. *

Once inside our project, install these three packages:

## 2. Configuration

**Configuration styled-components**

Since 12.1, Next.js added support to the Next.js Compiler for [styled-components](https://nextjs.org/docs/advanced-features/compiler#styled-components), update your `next.config.js` file:

**Create a custom _document.js file**

To render our styled-components at the server-side, we need to override `_document.js.` For this, create a `_document.js` file under the pages folder and add the following content into it. We will use also use the google font [Roboto](https://fonts.google.com/specimen/Roboto).

### 3. How to fetch data

**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>`. It's all server-side. We set our API key in an environment variable in the `.env.development` file for security.

Now create a `pages/api/content.js`file. Inside this file, add the following code:

We can get videos in just a few lines of code by applying the method `list`. 

*[@api.video/nodejs-client](https://github.com/apivideo/api.video-nodejs-client)* allows us to filter by `title`,  `tags`, `metadata`, `description`, `pageSize,` full documentation is [here](https://github.com/apivideo/api.video-nodejs-client/blob/main/doc/api/VideosApi.md#list). Let's focus on `title` for now.

**Call API routes in the front-end.**

Go to `pages/index.js` and call the endpoint we just created on mounting. Save the result in the state videos.

search-gif-youtube-clone.gif

*[@api.video/nodejs-client](https://github.com/apivideo/api.video-nodejs-client)*  allows us to filter videos by name. We’re going to implement a simple field where we can enter a searchable value.

tags-gif-youtube-clone-gif.gif

### How to filter videos with tags

api.video provides many features. One of them allows you to a tag to a single video. This demo excellently showcases how to use it.

**1 ) Add a tag to the dashboard.**

The easiest way to add a tag is to go to [api.video dashboard](https://dashboard.api.video/), go to videos sections, click on a video, “see details” of a video and add a tag. The video [here](https://www.loom.com/share/9219a1fa532d4e41884a016a45efef0e) explains how to do it.

The next step is to apply the `filterTags` function to the videos, which: 

- Retrieves all of the tags
- Sorts by “the most used”
- Returns a clean tag array that we will store in a state

**2 ) Store tags in a state**

We call this util function each time we get videos. We store the array of values in a state. We also create another state, “active state, “ the current state. By default, it is “All”.  

**3 ) Display Tags component**

 The tag's value is in the `Chip` component. By default, the Chip “*All”* is displayed, and next, each tag is stored in the tag array. If you click on the chip, you update the value of the tag state. The props `isActive` shows a different style based on whether true or false.

**4 ) Filter videos by the activeTag**

Then let's apply to the videos array the `filterElement` function, which only displays videos whose tags are equal to the activeTag. This function applies only if the activeTag is different from `All`.

## 5. How to use the player from api.video

[api.video](https://api.video) provides a performant and fully customizable [player](https://docs.api.video/reference/api/Player-Themes#list-all-player-themes). As soon as you upload a video, it automatically creates a link to the api.video's player. You can, of course, customize your player directly in the [dashboard](https://dashboard.api.video). Then, let's encapsulate the player in an `iframe`. The props video corresponds to a video object.

# Conclusion

We recreated YouTube thanks to api.video’s features in just a few steps. We did not cover all the topics such as dynamic routing usage of react context to store the API key, but the entire code is available [here](https://github.com/apivideo/youtube-clone-next).

And we're done! To start building right now, check 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 easily you can  **display the video on hover**

hover-gif-youtube-clone.gif

Create a file to regroup our CSS logic in `style.js`. The trick is to display the video on hover instead of the image. A way to achieve it is to add the property `display: none` to the image and `display: block` to the video.

Video on demand

Live streaming

Analytics

See all features

Online learning

Short-form videos

Marketplace & E-commerce

Video messaging and recording

Quick start guides

Documentation

Ecosystem catalog

Clients & SDKs

Community

Blog

Demos

Help center

Blog

Huge pricing update! Introducing video encoding at zero cost