live - create

API client

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 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

⚠️ 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

Video list

thumbnail_mathieu_round-1.png

mathieu_round-1.png

Github Mathieu Thiry

linkedin_logo_initials.png

LinkedIn Mathieu Thiry

Mathieu Thiry

large_api-video-blog-case-studies.png

medium_api-video-blog-case-studies.png

small_api-video-blog-case-studies.png

thumbnail_api-video-blog-case-studies.png

api-video-blog-case-studies.png

Case Studies

NodeJS

Next.js

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.

As shown below, we pass each video object as props to the Video component.

We don't need to format the answer in the child component Video. We can destructure the video object and access the image and video.

Rebuilding YouTube with api.video and Next.js

large_real-cover-youtube-clone.png

medium_real-cover-youtube-clone.png

small_real-cover-youtube-clone.png

thumbnail_real-cover-youtube-clone.png

real-cover-youtube-clone.png

small_olivier.png

thumbnail_olivier.png

olivier.png

Olivier Lando

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

As we all know, WordPress is an excellent platform to use for building your own website because it is easy to you. The variety of plugins at your disposal is a game-changer, especially if you do not code. 

We're pleased to announce our new WordPress integration on the [Wordpress plugins directory](https://wordpress.org/plugins/api-video/). 
If you have a WordPress website or blog, our plugin will allow you in a few clicks to:
* embed any of your videos in your WordPress content using our HTML5 video player
* manage your videos from your WordPress admin interface: list all your videos, upload a new one, and edit existing ones

All you need is: 

1. A WordPress website 🤓
2. An api.video API key (get a free sandbox key [here](https://dashboard.api.video/register))


## Installing the api.video WordPress plugin

### Adding the plugin from the plugins library

The easiest way to install the plugin is to use the plugin search. Log in to your WordPress administration area, and go to the **Plugins » Add New** page. 

Plugin installation from the plugins directory

large_plugin-installation-from-directory.jpg

medium_plugin-installation-from-directory.jpg

small_plugin-installation-from-directory.jpg

thumbnail_plugin-installation-from-directory.jpg

plugin-installation-from-directory.jpg

You'll see a screen like the one above. In the top-right search area, type "api.video". You should see the api.video plugin appear. 

Click on the **Install now** button on the api.video plugin card. After a few seconds (or minutes, depending on your connection), the **Install now** button changes to **Activate**. Click on **Activate** to activate the plugin. That's it; the plugin is installed!

### Setting up the plugin

There is one last step before using the plugin: you have to enter your api.video API key in the plugin settings.

A new entry called **api.video** automatically appeared in your administration menu after you installed the plugin. Go to the **api.video » Settings** page.

Enter your API key in the plugin settings

large_plugin-installation-api-key.jpg

medium_plugin-installation-api-key.jpg

small_plugin-installation-api-key.jpg

thumbnail_plugin-installation-api-key.jpg

plugin-installation-api-key.jpg

Copy your API key from your [api.video dashboard](https://dashboard.api.video) and paste it in the dedicated field, as shown in the above screenshot. Finally, click on the Save button. If an error message appears, double-check your API key. 

## Usage

### Uploading a video

To upload a new video, go to the **api.video » Add new** page. From here, you'll be able to select the video file you want to upload by clicking on the **Select files** button.

large_plugin-add-new-video.jpg

medium_plugin-add-new-video.jpg

small_plugin-add-new-video.jpg

thumbnail_plugin-add-new-video.jpg

plugin-add-new-video.jpg

Once the video file has been selected, the upload starts automatically. Once the upload is complete, a link is provided to the video editing page ("Watch the video here" link). By clicking on this link, you'll be redirected to the video editing page (see bellow [Editing a video](#editing-a-video)). 

### Listing your videos

You can find the list of all the videos you have uploaded to your api.video account by clicking on **api.video » Library**. For each of your videos, you will see the associated thumbnail and its title.

large_plugin-videos-list.jpg

medium_plugin-videos-list.jpg

small_plugin-videos-list.jpg

thumbnail_plugin-videos-list.jpg

plugin-videos-list.jpg

If you want to integrate one of the videos into an article and then modify it, click on the associated thumbnail. You will be redirected to the **video editing page**. 

### Editing a video

You can access the video editing page right after uploading a video or selecting an entry in the videos list.

large_plugin-edit-video.jpg

medium_plugin-edit-video.jpg

small_plugin-edit-video.jpg

thumbnail_plugin-edit-video.jpg

plugin-edit-video.jpg

From here, you'll be able:
- to update the video title, description, and tags
- to decide whether the video is private or not, panoramic or not, and downloadable or not 

Don't forget to click on the **Save** button after making your changes!

Another essential element on this page is the **"shortcode"**. This is what will allow you to embed the video on your website.

### Embedding a video in a post/page

The first step is to copy the **shortcode** associated with the video you want to embed. This shortcode can be found on the [video editing page](#editing-a-video). 

Once you have copied this shortcode, go to the editing page of the article where you want to embed the video. 

At the spot where you want the video to appear, insert a "shortcode" block into your article. One way to do that is to show the **block inserter** by clicking on the big **+** at the top left of the page. Then type "shortcode" in the search input and click on the **Shortcode** element. 

large_plugin-shortcode.jpg

medium_plugin-shortcode.jpg

small_plugin-shortcode.jpg

thumbnail_plugin-shortcode.jpg

plugin-shortcode.jpg

Once the block has been added in your article, you now have to paste the value you copied in the video editing page (it should look like **[api.video video_id=123456789]**).

Paste the shortcut value into the dedicated input

large_plugin-shortcode-paste.jpg

medium_plugin-shortcode-paste.jpg

small_plugin-shortcode-paste.jpg

thumbnail_plugin-shortcode-paste.jpg

plugin-shortcode-paste.jpg

In most cases (but it depends on your WordPress theme), you will get a better result if you transform the block to "Columns." To do so, click on the first icon above the block and select **Columns**.

large_plugin-shortcode-columns.jpg

medium_plugin-shortcode-columns.jpg

small_plugin-shortcode-columns.jpg

thumbnail_plugin-shortcode-columns.jpg

plugin-shortcode-columns.jpg

And that's it! Once your article is saved, you will see the video appear where you inserted it. 

Your video is now embedded in your article

large_plugin-player.jpg

medium_plugin-player.jpg

small_plugin-player.jpg

thumbnail_plugin-player.jpg

plugin-player.jpg

## Conclusion

If you have any questions, please ask us on our [community forum](https://community.api.video/).

For any feature request or bug report, don't hesitate to open an issue on the [Wordpress plugin Github repository](https://github.com/apivideo/api.video-wordpress-plugin).

The New api.video WordPress Plugin

large_wordpress-andapi-video.jpg

medium_wordpress-andapi-video.jpg

small_wordpress-andapi-video.jpg

thumbnail_wordpress-andapi-video.jpg

wordpress-andapi-video.jpg

thumbnail_anne-sophie.jpg

anne-sophie.jpg

twitter-brands.svg

Twitter (Anne-Sophie)

Anne-Sophie Poupard

We're excited to announce the launch of a highly requested feature: **Workspaces**.

Anyone can now share their [api.video dashboard](https://dashboard.api.video/login) with a colleague or client. It's a great way to involve stakeholders in your projects.
Workspaces enable the primary account owner to invite unlimited team members to their dashboard securely, so they can help with video integration or add video content.

The new feature will allow multiple users to share videos and collaborate under the same roof, with a unique API key and unique billing.

Video on demand

Live streaming

Analytics

Video infrastructure

Video player

AI features

See all features

Online learning & Corporate training

Social & Entertainment

Marketplace & E-commerce

Communication & UGC

Generative AI

Quickstart guides

Documentation

Ecosystem catalog

Clients & SDKs

Community

Blog

Demos

Customer success stories

Help center

Blog

AI >< Video: The Video Model Hub unveiled