Normal

small_t02cw29ka-u04jtt0jcg3-549047173ac2-512.jpeg

thumbnail_t02cw29ka-u04jtt0jcg3-549047173ac2-512.jpeg

t02cw29ka-u04jtt0jcg3-549047173ac2-512.jpeg

Artem Matinian

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

React Native

NodeJS

Next.js

How do you make sure that your live stream viewer stays **engaged**? what are the tools that you can leverage in order to make **the most out of the experience**? and how can you **analyze the viewer's reaction**?

In this article, you can learn about the way you can integrate real-time communication into your live stream in order to make an engaging user experience with your live streams.

Although we will only learn how to share emojis between viewers in your live stream, you will be able to leverage the example in order to build **robust analytics** that will provide you **great insight into when and how the viewers reacted to the stream**.

We’ll leverage [api.video](https://api.video) with **Ably** to create a real-time communication scenario where one viewer of the live stream will post an emoji, and all of the other viewers of the same live stream will be able to see the reaction.

Check out the diagram below on how this works:

livestream-with-realtime-communication-diagram-ably

large_livestream-with-realtime-communication-diagram-ably.jpeg

medium_livestream-with-realtime-communication-diagram-ably.jpeg

small_livestream-with-realtime-communication-diagram-ably.jpeg

thumbnail_livestream-with-realtime-communication-diagram-ably.jpeg

livestream-with-realtime-communication-diagram-ably.jpeg

## Why do Livestream viewers need to be engaged?

Live streaming is growing at a very rapid pace. Let’s talk statistics:

Did you know that the revenue for the entire video streaming app industry reached **$82.3 billion in 2022**, and is projected to reach **$115 billion by 2026.** according to some resources it’s going to be **$118 billion by 2025**. ([Business of Apps](https://www.businessofapps.com/data/video-streaming-app-market/))

Live commerce-initiated sales could account for as much as **10 to 20 percent** of all e-commerce by 2026 ([McKinsey](https://www.mckinsey.com/capabilities/mckinsey-digital/our-insights/its-showtime-how-live-commerce-is-transforming-the-shopping-experience)) and **41.2%** of consumers said they tune in to live streams focused on home products, and **37.5%** said they watch [live shopping events](https://tinuiti.com/blog/paid-social/live-shopping-tips/) for electronics ([Retail Touchpoints](https://www.retailtouchpoints.com/topics/digital-commerce/livestreaming-update-coresight-debunks-5-common-myths)).

In 2022, there were **532 million** esports viewers worldwide ([Insider Intelligence](https://www.insiderintelligence.com/insights/esports-ecosystem-market-report/)).

**52%** of live video viewers stream content through social media ([eMarketer](https://www.insiderintelligence.com/content/livestream-viewers-social-media)).

Brands earn nearly **40%** more engagement with Instagram Reels compared to other Instagram content formats ([Business Wire](https://www.businesswire.com/news/home/20220907005644/en/Brands-Earn-Nearly-40-More-Engagement-with-Reels-Compared-to-Other-Instagram-Content-Formats)).

And this is just a small part of some impressive live stream and video content statistics. So you ask yourself, how do I start integrating livestream into my app or website? 

## How to build a scalable and engaging live stream quickly?

What we’ll be leveraging:

- [api.video](https://api.video) to create and deliver the live stream
- [Ably](https://ably.com/) for the real-time communication handling
- For streaming, you can use OBS, [one of our live streaming SDKs](https://docs.api.video/sdks/livestream/react-native-livestream-component), or stream directly from the [api.video](https://api.video) dashboard

With [api.video](https://api.video), you can integrate livestream into any project in a few minutes. You can find the article on how to get started here: https://docs.api.video/docs/create-a-live-stream

We’ll start with this simple example that was built using Next.js. You can go ahead and clone it from here: https://github.com/apivideo/livestream-with-realtime-ably

Let’s break it down; what are we looking at here? 

### The [api.video](https://api.video) React Player module

We are using [api.video](https://api.video) in order to create a stream and then the api.video React player SDK in order to create a responsive on-screen video delivery while removing the control elements. 

If you navigate to the `src/pages/index.tsx` file, here’s where we consume the player and buildout the video delivery:

We consume the [api.video](https://api.video) React player SDK here:
`import ApiVideoPlayer from '@api.video/react-player';`

And we pass it as a component to be rendered:

**Disclaimer! In this example, the streamId is hardcoded in the index file, however, you’ll probably want to serve the streamId dynamically from your backend when you get to production.** 

You can notice that we are passing the `ApiVideoPlayer` component all of these parameters; let’s break it down a bit; I’ll focus on the important ones:

- With Style, we are passing CSS parameters in order for the video to fit the screen first while the `size` parameter is dynamic, as `size` is a state:

Each time you resize the window, the video player size will adapt to the size of the screen.

- `chromeless` parameter removes all the player controls, which will give the user a better experience.
- With the `video` parameter, we are passing an object that includes the stream id and the optional parameter `live` that is set to true in order to give the player the indication that we are passing in a live stream and not a video

Getting the live stream id can be done in two ways. 

**Programmatically**:

1. You can leverage the livestream endpoint in order to get the list of livestream ids from your workspace: https://docs.api.video/reference/get_live-streams

2. You’ll get a JSON response from which you can get the stream id you need:


**Manually from the dashboard:**

1. Click on the live stream in Live Streams

large_get-livestream-id.png

medium_get-livestream-id.png

small_get-livestream-id.png

thumbnail_get-livestream-id.png

get-livestream-id.png

large_copy-livestream-id-from-dashboard.png

medium_copy-livestream-id-from-dashboard.png

small_copy-livestream-id-from-dashboard.png

thumbnail_copy-livestream-id-from-dashboard.png

copy-livestream-id-from-dashboard.png

You can find more information about the [api.video](https://api.video) React Player in our documentation: https://github.com/apivideo/api.video-react-player

### Everyone loves Emojis!

Now let’s get to the fun part; the example gives you the ability to share emojis between all the viewers of the stream; each person in the stream gets an emoji picker; once the emoji is clicked, a cool little animation will play where the emoji is hovering and then disappearing. The cool thing about that is that the animation will be played to all the viewers.

large_Demo.gif

medium_Demo.gif

small_Demo.gif

thumbnail_Demo.gif

Demo.gif

This example is very basic; however, you can take the example and **expand** on it in order to create **real-time statistics** for the live stream session, for example: 

- Count the reactions from the users
- Map the different reaction emojis and get the timeframe with the most reactions
- Get real-time feedback from the users
- And more

The emoji animation is built with **React Simple Animate**  https://www.npmjs.com/package/react-simple-animate, it has a bit of complex logic, but you are free to reuse it in your app. You can find the actual animation parameters in `src/utils/randomframevalues.tsx`  

The random values are being passed to the `<AnimateKeyframes>` component that includes the actual emoji:

Go ahead and play around with the random values and the parameters, should be fun 😃

### Spread the emojis

And now we get to the challenge, how do you get these emojis across to all other users? this was an interesting task, but with Ably, it wasn’t that difficult to implement. 

We created a new class that is called `MessageHandler` where we use the Ably node library:

`import Ably from 'ably';`

Ably has a great API that allows you to create channels, get users to subscribe to them, and then broadcast and listen to any events that happen inside these channels; that’s a great fit for our use case! 

In the example, all you need to do is to replace the values of the `#apiKey`  with the one that you get from Ably:

large_get-ably-api-key.png

medium_get-ably-api-key.png

small_get-ably-api-key.png

thumbnail_get-ably-api-key.png

get-ably-api-key.png

**Disclaimer! Please note that these keys should be consumed from the backend. In this example, just to make it easy, we expose the keys on the front end. Please ensure that the backend serves the keys when you go to production.**

**Briefly on what we are doing in the `MessageHandler` class:**

When we use Ably there are a few things we need to understand and utilize:

- Channels
- Users
- Subscriptions (listeners)
- Message publishing

Every time the user opens a new window, they will be assigned a user id for a session (this logic works in the `index.tsx` file); the userId is passed to the class when it is initialized in order to create a unique user id for each user that watches the stream. 

Then we use the stream id as the channel id for Ably, of course, you can generate any channel id, however, it’s easier to just leverage the values that we already have. 

We then subscribe to the same channel and also broadcast the messages to it at the same time. 

The caveat is that we set the listener in the `/src/components/emoji.tsx` file, if you look closely at the listener, we have a logic that will make sure that the listener is not getting duplicated. We check if there are no listeners created already; if there aren’t, we create one. This situation is caused by the fact that each time the state changes, React will re-render and will run the same code again, causing the listener to be created multiple times, so we do something like this:

Finally, we have two functions to generate the message (which will include the emoji) and publish the message to the channel.

Now that you know how it works, you can run the example and play around with it. Just make sure to install all the dependent modules by running `npm install` or `yarn install`

After the installation is done, run the example by `npm run dev`

The example will run on `localhost:3000`

Happy Hacking! 🙂

If you have any questions about the article, feel free to raise issues on the [Github repo](https://github.com/apivideo/livestream-with-realtime-ably), reach out to me directly: artem@api.video, or just open a ticket with our support team.

Boost your live streams

small_Frame 427319160.jpg

thumbnail_Frame 427319160.jpg

Frame 427319160.jpg

Boost your live streams with user engagement 

next.js

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

Typescript

React

There’s no doubt that Next.js is a leading solution for creating a full-stack web application. Some of the biggest and finest companies around the world are using this React framework such as Twitch, Nike, and Notion.

On October 2022, Vercel released one of its biggest updates in a brand new version: Next.js 13. This new release ships React 18 with it and some big new features. 

*Read the full [Next.js 13](https://nextjs.org/blog/next-13) / [React 18](https://reactjs.org/blog/2022/03/29/react-v18.html) release notes to learn more.*

Let’s see how we can manage videos in a Next.js 13 and React 18 web application with [api.video](https://api.video) 🧘🏽‍♂️

## Create a Next.js 13 application 🚀

If you already have a Next.js project with a version under 13, you can upgrade it to v13 by [following this guide](https://nextjs.org/docs/upgrading). To keep this article simple, we will create a new application.

1. Run one of the following commands in a new terminal and follow the command prompts

We will name our brand new application videos_app. We will use TypeScript, ESLint (not mandatory), the src/ directory, and the app/ directory (since there is a new V13 feature available). 
Don’t configure any alias yet.

large_screenshot-2023-02-07-at-16-30-34.png

medium_screenshot-2023-02-07-at-16-30-34.png

small_screenshot-2023-02-07-at-16-30-34.png

thumbnail_screenshot-2023-02-07-at-16-30-34.png

nextjs-prompt.png

3. Check it out on `http://localhost:3000` and edit `src/app/page.tsx` to see the updated result in your browser.
Next.js 13 introduces the `app/` directory that can be used pretty much as the `pages/` directory. [More information available on their documentation.](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app)

Everything is working fine? Good job! 🎉

💡 *Too long for you? Create a video-ready Next.js app with all api.video tools already installed in seconds with our official Next.js boilerplate! Read our short tutorial [here](https://api.video/blog/tutorials/api-video-next-js-boilerplate-start-your-video-project-the-easy-way/)* 🤓

## Our video application structure 🏗️

Our goal here is to build a basic but fully operational video application. To do so, we will divide it into 3 pages:

- Our landing page to upload a video ⬆️
- A player view where you can playback a video 📺
- A videos list view where all of your videos will be displayed 🏄🏽‍♂️

Next.js provides a perfect navigation and page system that will help us build our project easily.

## Get your API key 🔑

To be able to upload and playback videos from [api.video](https://api.video), create and customize video players, and do many more things, you need an API key.
Get it from your [dashboard](https://dashboard.api.video/login) or [create a free account](https://dashboard.api.video/register) (yes, it’s free, really).

## A minimal layout first 💅🏽

The goal of this tutorial is to make a working video app without any great design.
But we need a minimal layout: top navigation, and a little CSS to keep things readable.
We will also create a loading component that is automatically displayed while the content of a route segment loads 😲

1. Replace your `src/app/layout.tsx` code with the following one.

Next.js 13 `app` directory allows you to declare layout globally (root layout) and for specific pages (nested layouts). The `src/app/layout.tsx` file also replaces the previous `pages/_app.js` and `pages/_document.js`. *[Read more about it here.](https://beta.nextjs.org/docs/routing/pages-and-layouts#layouts)*

2. Create a new file `src/app/loading.tsx` and add a simple component.

In Next.js 13, a `loading.[tsx,js]` file in the `app` directory is globally and automatically used by your whole application for loading state. How great it is! *[Read more about it here.](https://beta.nextjs.org/docs/data-fetching/streaming-and-suspense)*

## Upload a video with Next.js 13 ⬆️

In this section, we will create a page that allows a user to select a video file and upload it to [api.video](https://api.video).

We will keep this view as our home page, the `src/app/page.tsx` file.

1. We need to use the [api.video TypeScript video uploader](https://github.com/apivideo/api.video-typescript-uploader#readme) package to upload a video to your project. Install it by running one of the following commands

As you can see, you will need an upload token to upload a new video. You can create and find yours [here](https://dashboard.api.video/project-settings/upload-tokens).

⚠️ *You can also decide to use an API key or an access token in the TypeScript video uploader, but it’s strongly discouraged because you’re exposing sensitive information*

Few things to notice here:

- `'use client'` : By default, the app directory’s components are [server components](https://beta.nextjs.org/docs/rendering/server-and-client-components). These components are great for rendering non-interactive content. 
However, if you want to allow client interaction in your component (React hooks, event listeners, browser-only APIs), you need to add the `'use client'` directive at the top of your component file.
- Next `<Link />` component: In Next.js 13, you don’t need to pass a `<a>` tag as children to the Link component.
- `onProgress` and `onPlayable` events: our TypeScript video uploader allows you to track upload progress whenever the uploaded video is playable.

Congratulations! You now have implemented a video upload solution into a Next.js application 👏🏽
Pretty easy right? Let’s move on to the next part: display your video list.

## Display a videos list with Next.js 13 🏄🏽

You can now upload videos to your [api.video](https://api.video) project. You can [watch and edit them through your dashboard](https://dashboard.api.video/videos). You can also implement this feature in your application. Let’s implement it together 🧑🏽‍💻

1. We need to use the [api.video Node.js client](https://github.com/apivideo/api.video-nodejs-client) to access our videos. Install it by running one of the following commands

2. Create a new videos directory under src/app/ and create a page.tsx file in it.
In Next.js 13, pages that are created under the app directory need to be named page.[tsx,js]. Read more about it here.

thumbnail_screenshot-2023-02-08-at-11-12-11.png

nextjs13-app-directory.png

3. Edit your new src/app/videos/page.tsx file with the following code

This component is a perfect example of a Server Component. Instead of using Next.js `api` directory or `getServerSideProps` to fetch our videos from [api.video](https://api.video), we can directly do this from our component.

Congratulations! You displayed all your videos in seconds 🏎️

## Playback a video with Next.js 13 📺

In any application, a video needs a container to be played, which is often called a player. In our video app, we will use the [api.video React player](https://github.com/apivideo/api.video-react-player) to playback our videos.

We want to access and playback a video in two different ways:

- Once a new video is uploaded and playable, we want to display a player in the same view to playback it directly.
- If we go through our videos list, each item is a clickable link that redirects us to the video view, and thus the player.
1. Install the React player package by running one of the following commands

2. Replace your src/app/page.tsx (the uploader page) code with the one bellow

A video player will now appear when your uploaded video is ready to be played.

3. Create a new directory `src/app/videos/[videoId]` and a file `page.tsx` in it, and add the following code to it

The new `app` directory lets you create dynamic routes as previously. Here, we are reading the `videoId` URL parameter with the reserved `params` Next.js parameter and sending it to our React player.

4. Go back to your videos list view and try to click on one of them. You should be redirected to the player view where your video can be read  🎉

We are excited to see the creative solutions built with [api.video](https://api.video) and Next.js 13!
[Join our community](https://community.api.video/) to share anything about video with other passionate people 💬

Create a Next.js 13 & React 18 video app

How to create a Next.js 13 & React 18 video app

small_Nextjs&React.png

thumbnail_Nextjs&React.png

Nextjs&React.png

video api

api video plugin

JavaScript

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](https://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](https://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](https://api.video) features!

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

[api.video](https://api.video) proposes many more endpoints to manage and create a complete video application.
Check [our documentation](https://docs.api.video/) 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](https://api.video) dashboard [API keys section](https://dashboard.api.video/project-settings/api-keys) 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

api-video-next-js-boilerplate-preview.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).

Start your video project with api.video Next.js boilerplate

large_NextjsBoilerplate.png

medium_NextjsBoilerplate.png

small_NextjsBoilerplate.png

thumbnail_NextjsBoilerplate.png

NextjsBoilerplate.png

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

Player SDK

video create

Video list

Video upload

Player

Mobile

thumbnail_mathieu_round-1.png

mathieu_round-1.png

Github Mathieu Thiry

linkedin_logo_initials.png

LinkedIn Mathieu Thiry

Mathieu Thiry

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

Delegated Upload

API client

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 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](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:

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

Next.js