Delegated Upload

API client

Video upload

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

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

JavaScript

React

NodeJS

Next.js

Uploading a video to [api.video](https://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](https://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](https://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

next-js-new-application.png

## 2. Get the required packages

To complete this tutorial, we’ll need two [api.video](https://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 on the right hand column of your dashboard 'Overview' page. 

large_Screenshot 2024-02-21 at 4.55.04 PM.png

medium_Screenshot 2024-02-21 at 4.55.04 PM.png

small_Screenshot 2024-02-21 at 4.55.04 PM.png

thumbnail_Screenshot 2024-02-21 at 4.55.04 PM.png

copy-api-key-through-dashboard.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

application-project-tree.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](https://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

upload-application-screen.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)** 🧘

How to upload a video with React and NodeJS

small_UploadReactNodeJs.png

thumbnail_UploadReactNodeJs.png

Upload-React-NodeJs.png

Video list

Video Status

thumbnail_aya-modified.png

aya-modified.png

Github Aya Bochman

Aya Bochman

Typescript

In this tutorial we will create a Udemy-like learning platform with [api.video](https://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/case-studies/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](https://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

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

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

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

start-live-stream-action-card.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

api-video-modal-start-live-stream.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

Video on demand

Live streaming

Analytics

Video infrastructure

Video player

See all features

Online learning

Short-form videos

Marketplace & E-commerce

Video messaging and recording

Quickstart guides

Documentation

Ecosystem catalog

Clients & SDKs

Community

Blog

Demos

Help center

Blog

Huge pricing update! Introducing video encoding at zero cost