Private Live

Normal

doug.jpg

twitter-brands.svg

Doug Twitter

Doug Sillars

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

We were recently asked in our website chat:

large_screenshot-2021-03-12-at-12-58-53.png

medium_screenshot-2021-03-12-at-12-58-53.png

small_screenshot-2021-03-12-at-12-58-53.png

thumbnail_screenshot-2021-03-12-at-12-58-53.png

screenshot-2021-03-12-at-12-58-53.png

I love hard questions. Before I come up with my answer, let's walk through a few definitions to describe what we are attempting to do.

## Live streaming

When you livestream a video with api.video, we take your live video input and turn it into multiple output streams (of different sizes) on the fly.  If your upload stream is 1080p, we will deliver 240p, 260p, 480p, 720p and 1080p streams to your viewers.

If your users are on a smaller screen (like a phone) - they’ll get a smaller resolution video.  If they are on a slower connection - we’ll serve the biggest video that will play in their network conditions.

## Watermarking

Adding a watermark requires ‘burning’ text into the video.  If you use our sandbox, you’ve seen what a watermark *could* look like:


medium_screenshot-2021-03-11-at-14-22-05.png

small_screenshot-2021-03-11-at-14-22-05.png

thumbnail_screenshot-2021-03-11-at-14-22-05.png

screenshot-2021-03-11-at-14-22-05.png

In our sandbox, we watermark each video to show that it is being delivered from the sandbox.

### What the ask was:

Burn the user’s name into the video. For example, if I were watching their highly sensitive video, it might look like:


medium_screenshot-2021-03-11-at-14-23-07.png

small_screenshot-2021-03-11-at-14-23-07.png

thumbnail_screenshot-2021-03-11-at-14-23-07.png

screenshot-2021-03-11-at-14-23-07.png

The idea here is to prevent leakage of the information. If anyone takes a screenshot, or they share the video stream - it is clear that the culprit was Doug, not Cedric, Anne-Sophie or Erikka.

### Why we cannot do this

If we create a unique stream for each user, and the video is 1080p, we’d have to encode 5 streams *per viewer*. Since we can host live streams with hundreds of thousands of viewers, it is not feasible (or cost effective for the account holder) to encode 100k unique videos.

## But...

It turns out, there is a pretty good workaround that satisfies the requirements of our user.

First, we’ll use a [private livestream](https://api.video/blog/product-updates/new-beta-feature-private-livestreams/). Private lives treams work just like a regular livestream, but our player URL has an added token on the url:

https://embed.api.video/live/li5rw3I105fgajJEpfvr59AK?token=1d5a3684-c653-4f2a-a9cb-0ae25c00fe66

If the token is removed, the live stream will not play.  Each token can be used exactly once. If your viewer starts watching your event and they grab the URL from the source code and share with their friends - all views past count 1 will get an error message.

So that takes care of the live stream being shared with people who should not have access.

### Screenshots

The video cannot be shared, but what if the video is showing off the latest top secret product from your company?  You want to show it to your selected audience, but photo leaks of the product would be just as disastrous to your company.  So, we’ll add watermarks.

As we stated above, watermarks cannot be ‘burned’ into the video.  But, we can overlay the video with CSS. Here’s the HTML:

```
<html>
<head>
</head>

<body>

<div class="container">
    <iframe id= "video"src="https://embed.api.video/vod/vi2nVamC6JpFFNXEJrV5kI1J" width="100%" height="50%" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>
    <div class="overlay">
        <p>This video is being watched by Doug.. This video is being watched by Doug.. This video is being watched by Doug.. This video is being watched by Doug.. This video is being watched by Doug.. This video is being watched by Doug.. This video is being watched by Doug.. This video is being watched by Doug.. This video is being watched by Doug.. This video is being watched by Doug..</p>
    </div>
</div>
</body>
</html>
```

There is a div with an iframe holding our video (in this case, it is a VOD that is not private -strictly for demo purposes, but you could add your private live stream in the `src` tag).  Then we have a paragraph of text that we will overlay on the video.


small_screenshot-2021-03-11-at-14-55-52.png

thumbnail_screenshot-2021-03-11-at-14-55-52.png

screenshot-2021-03-11-at-14-55-52.png

## Private video with a custom overlay

Now you have a custom live stream that cannot be shared. The watermark added to the video is unique for each viewer, which should prevent screenshot photos from the stream (or if there *are* leaks, you'll know who it was).


## Security

Sharing the video:  With our private tokens, sharing the live video is not possible.

Removing the watermark: There ARE workarounds that a technically savvy user might use to disable the CSS overlay. But for the vast majority of your users, this is unlikely to be an issue.  As in all issues of security, your team will have to weigh this possibility and decide if it is sufficiently secure to prevent leakage of your content.

## Conclusion

Private live streams are a great way to prevent the sharing of our sensitive videos. For an additional layer of security, you can add an overlay with CSS to identify each viewer’s screen - thus preventing screenshots being released from the presentation. 
Give it a try and [sign up](https://dashboard.api.video/register) for your free account today!

Secure live streams with unique overlay

medium_800px-cottonwoodparkfromfence.jpg

small_800px-cottonwoodparkfromfence.jpg

thumbnail_800px-cottonwoodparkfromfence.jpg

800px-cottonwoodparkfromfence.jpg

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

One of our most popular video on demand features is the ability to turn a video ‘private,' where each url to the video has a one time token to prevent sharing.  We have been asked many times about when the 'private' feature would be available for live streaming. We are very excited to release this as a new feature today!

When you set a video to private, the video link has a one use token connected to it. This token can be used exactly once (in a single web session). This means that the video cannot be shared, and any subsequent access of the url will throw an error. This also means that each time the video is shown, a new token must be requested from api.video via the [Get video](https://docs.api.video/reference/api/Videos#retrieve-a-video-object) endpoint.

If you use the api.video player, this all works automatically. If you use a different player, we have a walkthrough of how you must handle the headers.


## Private Live streaming

Starting today, we now have a public attribute for all live streams. Setting this to 

```
"public": false
```

will add a token to each url for viewing.  With private live streams, you can be sure that your live video is not being shared outside your expected audience - perfect for live concert streaming, or classes.

Of course, just like the video on demand feature, you’ll need a new URL for the live video for each viewer.  When you call the [Get Livestream](https://docs.api.video/reference/api/Live-Streams#retrieve-live-stream) endpoint, each live for the m3u8, the player and the iframe will have the token attribute appended.

```
{
	"liveStreamId": "123",
	"createdAt": "2021-02-15T10:30:49+00:00",
	"updatedAt": "2021-02-15T10:30:49+00:00",
	"streamKey": "123",
	"name": "Dougs staging private livestream",
	"public": false,
	"record": false,
	"broadcasting": false,
	"assets": {
		"iframe": "<iframe src=\"https://embed.api.video/live/li4SB0HXeul4ITH5DXJFGPxT?token=4851b6b0-3c8a-4f15-8298-c2db754fa6ac\" width=\"100%\" height=\"100%\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"true\"></iframe>",
		"player": "https://embed.api.video/live/li4SB0HXeul4ITH5DXJFGPxT?token=4851b6b0-3c8a-4f15-8298-c2db754fa6ac",
		"hls": "https://live.api.staging/private/4851b6b0-3c8a-4f15-8298-c2db754fa6ac/li4SB0HXeul4ITH5DXJFGPxT.m3u8",
		"thumbnail": "https://live.api.staging/private/4851b6b0-3c8a-4f15-8298-c2db754fa6ac/li4SB0HXeul4ITH5DXJFGPxT/thumbnail.jpg"
	}
}


```

## See it in action

### Why URL tokens?

Our video tokens are completely server side, removing the need for developers to do any security development (unless you are integrating with a 3rd party player).  The app makes an API call to the api.video server, receives the token, and can simply pass the value to their users.  

Once the token is used, api.video removes the token from being able to be used again.  As long as the user keeps their browser open, they can watch the video, but it cannot be shared, and if a new session is started, the user will need a new token.

### Saved private live streams

One of the great features of our live streams is the ability to have it available as recorded Video on Demand after the stream is completed. To enable this, the “record: true” setting must be enabled before the stream starts.

If your stream is set to private and set to record, all of the recorded videos will also be set to private - and will require the equivalent [private token](https://api.video/blog/product-updates/video-access-management-how-to-create-deliver-and-manage-private-videos-and-what/) for each view.

To make the example video above public, I had to update the video's setting to "public": true.


## Current Limitations

As we test and tweak private live streams, we want to keep the audiences lower. Please limit all private live streams to audiences of 3,000 viewers or less. For larger audiences - you can use a public live stream.

Later this year, we’ll be able to remove this cap, and allow for unlimited size of viewers for your private live stream.

[Give it a try](https://dashboard.api.video/register) - we'd love to see what you've built - share a link in our [forum](https://community.api.video)

Create private live streams with api.video

small_258221048310c8d7478d1k.jpg

thumbnail_258221048310c8d7478d1k.jpg

258221048310c8d7478d1k.jpg

The internet is fascinating; vast information zooms through back and forth, enabling millions of people worldwide to share their knowledge and experiences. However, it’s also a place where one must be cautious and protect oneself regarding private content and limit access to personal information, especially videos. We understand that it’s a sensitive topic for many it's difficult to implement on your own, so we created Private Videos.

## Secure & manage access to your videos

Maybe you are asking yourself: “ok, but how does *video privacy setting* help me?”. There are quite a few use cases for private videos, and we’ve discussed the hassle of securing the videos yourself. 

- On-demand videos behind a paywall
- Content Protection
- Video NFTs
- Video for internal use only
- Private video messaging
- Disposable one-time videos

And pretty much any video where you want to limit or restrict access! 🔒

### What are private videos

A private video is a video object secured by a private token and can be consumed only once. After the private token is consumed, the video is only available once you have another private token assigned to it. So, even if your user has the video URL, sharing it with anyone else is useless. 

We tried to make it as simple as possible to secure your videos:

- Create a video container with a `public: false` flag, which will make the video (surprise 🥳) private!
- Private videos will generate a new private token each time a request is made for that video id.
- Each private token is usable only once.

If you like to get into nitty gritty details, feel free to check out our docs about [Private Videos](https://docs.api.video/delivery/video-privacy-access-management).

### How to deliver private videos to your audience

After you learn how private video works and what it’s good for, we can now talk about the delivery part, which is the most important part. 

To reiterate the private video concept, here’s a visual representation of how the whole thing works:

private-videos-1.png

Knowing that now we can finally start building stuff! 

It’s that simple! (if you want the advanced stuff, scroll down to “Time to roll up our sleeves!”)

Let’s try to deliver one video in HTML with our own (amazing!) [api.video](https://api.video) player. 

Suppose you already have a cool video uploaded. Go to the dashboard and get make the video private (if it’s not already private)

Now that the video is private, we can deliver it to users. Here’s a quick snippet in HTML that you can use to play your video in the browser. Just copy the code snippet and replace the URL with your private video URL. You can find the video URLs in the Assets section of the Video Details:

video-urls-assets-section.png

We played the video once with a browser. Now, open another browser tab in incognito mode and play the same video. You can see that it’s gone! no more video! don’t worry; even though the video still exists, the token changes once you consume it. If you refresh the video details page, you’ll notice that the private token has changed. If you paste the URL with the new private token in the `src` you will be able to play the video again in a new tab, but already with a different private token. Cool right? 🙂

### Let’s get programmable

The concept works the same for API requests. You can request the API and fetch the video by id; if it’s a private video the response will give you the URLs with the private tokens (the `XYZ` in the URLs stands for the private token):

test video

### Assets? what assets? 🏠

Notice that JSON above has a field called `assets`. We’ll refer to assets later, but it’s important to know what they are. Assets include the URLs for the video thumbnail, iframe with the [api.video](https://api.video) player for embedding directly into the HTML, and several other video formats like `mp4` and `hls`. Now you know! 💡

### How to create a sample app with private videos

Now that we know the privacy setting concepts, it’s time to write some example apps that will give us a small glimpse into what powerful tool we are dealing with here.  

Let’s assume that we want to build an app that will display all the private video thumbnails on our website and make them clickable so it will open a video once it’s clicked. Something like that:

On the backend, we will have to do some magic. While with public videos it’s pretty simple as just returning the videos, for private videos we will need to get the session first. Let’s look at the HTML code:

private-video-html-code.png

Notice the `avh` parameter in the query string? The `avh` parameter is where you will pass the session token... oh wait, what's a session token?!

### Session token & session management

Session Tokens are designed to retain the same session for a user. Let’s take an example - a user opened a tab with the private video and would like to refresh the tab, or the video didn’t work with our player for whatever reason. Hence, you redirect the user to an mp4 version of that video (different asset). For these cases, we’ve created the session tokens.

There are two types of tokens for private videos:

- **Private token** (which we already discussed): generated every time you pull a private video from the API.
- **Session token**: This token is used to retain the private video session with the same private token.

At a very high level, to request different assets for the same private video, more than having the private token is required; you also need to retain the session. For that, we have the session token. In the flowchart below, you can see that for each private video, we are using a session token + the private token:

private-videos-post-15feb23.png

So let’s get a bit technical here. To start the session, you will need to request the `/session` endpoint, get the session token, add it to the first asset you request, and then add it to every following asset you request. In the example above, we will request the `/session` endpoint, then add the session token to the query string of the private video thumbnail → request an embedded video asset with the session token in the query string → request a private video asset in mp4 format with the session token, and so on, you got the idea 😄

In other words:

Get the session token:
`GET https://vod.api.video/vod/{videoId}/token/{private token}/session`

Response:
`{"session_token": "111-222-333"}`

Now we can request the private video thumbnail asset → embedded video → mp4:

`GET https://vod.api.video/vod/{video id}/token/{private token}/thumbnail.jpg?avh={session token}`

`GET https://embed.api.video/vod/{video id}?token={private token}&avh={session token}`

`GET https://vod.api.video/vod/{video id}/token/{private token}/mp4/source.mp4?avh={session token}`

Sample runnable code of the above app in Node.js:

Let’s do a step-by-step review of what we are doing here.

1. We are creating a server that will serve HTML on port 3000 with Node.js
2. To make it easy on ourselves, we create a wrapper that will make an HTTP request to [api.video](https://api.video) with api key already embedded in HTTP header. That’s the `apiVideoReq` function.
3. We will get a raw response from the apiVideoReq, so need to create a parser that will parse the JSON response if the request is successful (200). That’s going to be the `getJsonResponse` 
4. Then we need to create a function that will get the list of our videos. That’s pretty simple with the wrapper function we have, so let’s reuse the `apiVideoReq` and make a request to `[https://ws.api.video/videos](https://ws.api.video/videos)` endpoint. You can find more info about the `/videos` endpoint [here](https://docs.api.video/reference/api/Videos#list-all-video-objects).
The response we'll get is an array of objects of the following format:

Notice that the second object has a property `public` which is set to `false` , which means that the video is private; hence we need to get all of these videos. 

1. Extract all the private videos from the list by creating an iterator that will run through the array of objects and get each video with the flag `public` set to `false` pushing only the assets and video id into a new array.
2. If you remember, we need to get the session token by requesting the /session endpoint. The endpoint accepts the video id and private token; however, if you notice the private token is only in the URL. So let’s extract it! we can use this simple regex to extract it from the embedded URL `(?<=token=).*$` 
3. We first extract the private token from the URL and map it to the asset objects (with the video URL, video id, etc.) 
4. Then we request the /session endpoint passing in the video id and private token, and we get the session_token. Now we can also map to the same asset object.
5. We’re almost done; hang in there! now let’s get generate `<img>` tags with the src as the asset thumbnails and add the session token in the query string as an `avh` parameter, i.e: `<img src=https://vod.api.video/vod/AABBCC/token/c77d7bf3-4e2f-4a85-9e15-5c35992c11fc/thumbnail.jpg?avh={{session token}}>` .  Then in the same line generate the `<a href>` tag that will lead us to the actual video, and as you understood already, it too has to include the session token, i.e: `<a href=https://embed.api.video/vod/AABBCC?token=c77d7bf3-4e2f-4a85-9e15-5c35992c11fc&avh={{session token}}>`
6. And lastly, generate the HTML `<head>` and `<body>` while encapsulating the `<a href><img></a>` we’ve already created, and…. DONE!

Now you have clickable thumbnails of your private videos which you can secure behind user credentials for example 🙂

Let’s summarize what we’ve learned here:

- We’ve understood how private videos work and the purpose of private videos with real-life use cases.
- We’ve also built a small app to leverage private videos to create clickable thumbnails with minimal code.

If you have any questions or feedback about this article, do not hesitate to contact our support. You can also find the [docs for private videos](https://docs.api.video/delivery/video-privacy-access-management).

Create, deliver, and manage private videos

large_14feb23-copie-2.png

medium_14feb23-copie-2.png

small_14feb23-copie-2.png

thumbnail_14feb23-copie-2.png

video-access-management.png

Video Access Management: How to create, deliver, and manage private videos and what are they anyway?

After hearing from our customers about the need for low-latency live streaming, we at api.video have been relentlessly chasing seconds of latency everywhere, from ingest to delivery. Having already provided the best performance for on-demand delivery in terms of playback and [encoding](https://api.video/blog/product-updates/video-encoding-pricing-update/), we're excited to announce our latest upgrade: low-latency live streaming!

&nbsp;

Keeping true to our core belief of making video easy and manageable for you, we've rolled out our live streaming product with latency as low as 3 seconds in best conditions. Now, you can stream your videos with a latency of 3 seconds in ideal conditions, revolutionizing the way you connect with your audience.

## What does this mean for you?

With this latest upgrade, you can stream your videos live with a minimal delay of 3 seconds. This means that you can ensure better interaction with your viewers, lower bounce offs due to viewer frustration and a smoother viewing experience. 

&nbsp;

Additionally, you also get the flexibility to push a live stream using Real-Time Messaging Protocol (RTMP) or Secure Reliable Transport [(SRT)](https://api.video/blog/product-updates/SRT-livestreaming/) protocol based on your needs. 

&nbsp;

[*How do you choose between SRT or RTMP protocols? Read on!*](https://api.video/blog/video-trends/srt-vs-rtmp/)

## How can your business benefit from low latency?

Several use cases benefit significantly from low latency in live streaming:

### 1. Esport live streams
Low-latency live streaming is crucial for esports viewing as it ensures real-time action with minimal delay, providing a more immersive and engaging experience for fans. It allows viewers to stay in sync with live events, participate in interactive chats, and react instantly to game-changing moments. This immediacy becomes crucial to build the excitement and zeal of watching an esport live, making viewers feel as if they are right there in the arena.

&nbsp;

Additionally, top level games that are being broadcast all over the globe and possess official data feeds are where the issues of latency have the biggest impact. It can be unfair for punters who are watching and betting on the event as the stream does not reflect what is actually happening on the field. 

&nbsp;

As opposed to online gaming where latency as low as 25 miliseconds is ideal, esport broadcasting industry usually has a [latency of under 10 seconds](https://sbcnews.co.uk/features/2021/07/27/how-latency-stream-delay-work-esports/).

### 2. Live events and concerts

For virtual concerts, conferences, and other live events, low latency is crucial for delivering a seamless viewing experience to remote audiences. By minimizing delay, organizers can create a sense of presence and immersion, allowing viewers to feel like they're part of the action, even from afar.

### 3. Webinars and workshops

Low-latency live streaming can significantly enhance webinars and workshops by providing an  interactive experience for participants. With reduced delay between the presenter and the audience, feedback, questions, and discussions can take place with ease. The low latency here helps instructors or guest speakers of the webinar to adapt their content on the fly based on audience input. In case a webinar is being streamed live and is also happening in-person, the minimal delay for the virtual audience keeps the whole event synchronised.

### 4. Telehealth and live patient monitoring

A good usage of low-latency lives treaming in the healthcare industry is for remote patient monitoring and live consultations. These demand streaming capabilities with minimal delays to ensure the highest quality of care. For individual healthcare professionals and hospitals that offer this service, being able to monitor and interact with patients live is crucial for accurately assessing symptoms, providing diagnoses, and making treatment decisions within time. Delays or interruptions in the video feed in this scenario may hinder the communication between patients and providers, which shows the relevance low-latency live streaming holds in this space.

## How to live stream with api.video: Step-by-step guide

- In order to establish a video live stream, you must first create a live stream container at api.video.
- Then, you can begin streaming with the tool of your choice.
- For this guide, we’ll see how you can [create a live stream with OBS](https://api.video/blog/tutorials/live-stream-tutorial/) – free and open source software for video streaming. 

### **Step 1: Authenticate**

You need an access_token in order to create and upload a video.

&nbsp;

You will need your API key to obtain the access_token. You’ll find your API key in [your api.video dashboard](https://dashboard.api.video/overview).

&nbsp;

(This guide uses the sandbox endpoint. To upload your video in production, simply replace all `sandbox.api.video` instances with `ws.api.video`.)

&nbsp;

First, call the authentication endpoint and get your access token.
&nbsp;

**Example - Curl Request**

### **Step 2: Create the live stream**

Now we [create the live stream](https://docs.api.video/reference/api/Live-Streams#create-live-stream). In the JSON parameter, feel free to edit the name of the live stream from "Your Stream Name" to whatever you want to name your stream.

&nbsp;

**Example - Curl Request**

Your Stream Name

Now the server is ready to accept our live stream, and once broadcast begins (JSON above shows broadcasting:false), it will be viewable on the URLs listed in the JSON response.

### **Connecting live video**

The JSON response above lists your live stream's streamKey, which will be needed in OBS to connect your video to the server.

&nbsp;

Now in the OBS application,

1. Establish a source. In the sources section, choose a video feed to share. You could choose to share your screen, or to share your camera (on a Mac: Video Capture Device, and then in the "Device" dropdown choose the camera). You should now see the video source in the main OBS window.
2. Connect OBS to api.video. Under Settings, choose Stream. You'll see a choice for service - choose custom.
3. The server should be `rtmp://broadcast.api.video/s` and the `streamKey` is the value you received in the Json when you created the stream. Click OK to accept the changes.
4. Press ‘Start Streaming’.
5. Share the embed, iFrame, so that others can watch your stream!

## Player support for low-latency live streaming

We are pleased to announce that our low-latency live streaming feature has been thoroughly tested with several popular video players to ensure optimal performance and seamless integration. The players we have tested include:

&nbsp;

- api.video embed player
- THEOplayer 7.4.1
- Video.js 8.14.0
- hls.js 1.5.11
- JW Player 8.34.1

&nbsp;

These players have been verified to support low-latency streaming. However, if you encounter any issues with a specific player, please reach out to our support team through chat with detailed information about the problem.

&nbsp;

We highly value and appreciate any feedback you can provide to help us improve our services. Your insights and experiences are crucial to identifying potential issues, enhancing features, and ensuring the overall quality and performance of our product. 

&nbsp;

_To start live streaming with api.video, [sign-up](https://dashboard.api.video/register) now! For questions, [talk to our team](https://meetings.hubspot.com/apivideo/talk-to-us) and we’ll try to answer your queries._

Stream smarter, not slower: Introducing low-latency live streaming

Low-latency live streaming with api.video

small_Low latency livestreaming with api.video (1).png

thumbnail_Low latency livestreaming with api.video (1).png

low-latency-live-streaming-api-video.png

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

&nbsp;  

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.  

&nbsp;  

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

&nbsp;  

We’ll leverage api.video with [Ably](https://ably.com/) 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.  

&nbsp;  

Check out the diagram below on how this works:

## 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)).  

&nbsp;  

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** to create and deliver the live stream
- **Ably** 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 dashboard](https://dashboard.api.video/overview)  

&nbsp;  

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

&nbsp;  

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

&nbsp;  

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

### The api.video React Player module

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

&nbsp;   

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 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.**_  

&nbsp;  

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  

&nbsp;  

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

&nbsp;  

### Programmatically:

1. You can leverage the livestream endpoint in order to get the list of livestream ids from your workspace: [GET Livestreams](https://docs.api.video/reference/api/Live-Streams#list-all-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

You can find more information about the api.video React Player in our documentation: [api.video React player](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.

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

&nbsp;  

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`  

&nbsp;  

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.  

&nbsp;  

We created a new class that is called `MessageHandler` where we use the Ably node library: `import Ably from 'ably';`  

&nbsp;  

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!  

&nbsp;  

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

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

&nbsp;  

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

&nbsp;  

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.  

&nbsp;  

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.  

&nbsp;  

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

&nbsp;  

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.  

&nbsp;  

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`  

&nbsp;  

Happy Hacking! 🙂  

&nbsp;  

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 with user engagement & real time data

Boost your live streams with user engagement

live-streams-boost-user-engagement.jpg

SRT vs RTMP: Which one to choose for your livestream?

Choosing the right bitrate for your OBS live stream

Boost your live streams with user engagement 

A few months ago, my colleague Yohann wrote a fantastic article on [How to create a React Native live streaming application for mobile targets](https://api.video/blog/tutorials/how-to-build-a-live-streaming-app-in-3-steps/). This time, you will learn how to create the same application with a React Native competitor: Flutter.

In this article, you will develop a live streaming application in Dart. For further details, check out our official [Flutter live stream repository](https://github.com/apivideo/api.video-flutter-live-stream).

## **Few words about Flutter**

Google developed Flutter in 2015. In 2021, it was the most used cross-platform mobile framework (42% against 38% for React Native, [source](https://www.statista.com/statistics/869224/worldwide-software-developer-working-hours/)). It is used to develop cross-platform applications (including iOS and Android) quickly. The main difference between Flutter and React Native is that Flutter compiles Dart code to native bytecode/libraries, whereas React Native uses an engine to interpret JavaScript or TypeScript code. If you haven't heard of Flutter, you can learn more on the [Flutter website](https://flutter.dev/). 

## **Getting started**

First, follow the development setup steps from [Flutter's official documentation](https://docs.flutter.dev/get-started/install).

If you're new to Flutter, you may also need to [learn the basics](https://docs.flutter.dev/get-started/codelab).

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

### **Create a new Flutter app**

1. Open Android Studio.
3. You should see a “New Flutter Project” button. Click on it.
5. Verify the Flutter SDK path and click on “Next.”
7. Enter your project name: “live_stream_app” (according to the [pubspec documentation](https://dart.dev/tools/pub/pubspec#name), the name must be lower_case_with_underscore.)
9. Make sure the project type is set to Application.
11. Click on “Finish.”

### **Launch the application**

Once Android Studio is launched, you can directly run your application with the control toolbar:

1. Select your phone.
2. Click on the *Run* ▶️ icon.

It will take several minutes to finish, stay calm and grab a coffee ☕️

When the application build completes, it will be launched on your phone. Check your phone 🤳🏾

🎉🎉🎉Congratulations, you have created your first Flutter application 🎉🎉🎉  

&nbsp;  

#### **Signs your iOS application (optional)**

If you have trouble building the application for an iOS device, it might be because the application is not associated with a development profile.

Open Xcode, click  "Open a project or file," and open the `Runner.xcworkspace` located in `live_stream_app/ios.`

Click on Runner, go to the `Signing & Capabilities` tab, add your team, and create a unique bundle identifier.

## Add the **live streaming client to your app**

Now let's install the [Flutter live streaming client](https://api.video/catalog/flutter-live-stream/)!

### **Installation**

Open a terminal in your `live_stream_app` folder and the following command:

Also, you need to set the Android minSdkVersion to the one supported by Flutter live stream client.

Open your application build.gradle. It's located in the live_stream_app/android/app directory and replace:

The Flutter default project Kotlin version and the `apivideo_live_stream` Kotlin version might not be in sync.
In this case, when building the application, you face errors like `was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.9.0, expected version is 1.7.1.`.

To fix this, open `android/settings.gradle` and set the `org.jetbrains.kotlin.android` in the `plugins` section to the appropriate version (`1.9.0` in the previous error log).

### **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 `live_stream_app/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 `live_stream_app/ios/Runner` 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 app stores.

### **Usage**

You can check the [Flutter live streaming sample application](https://github.com/apivideo/api.video-flutter-live-stream/tree/master/example) for the whole application picture.

#### **Create a controller and the camera preview**

Change your `main.dart` file located in the `live_stream_app/lib` with the following code:

Launch your application. You now have the camera preview.

#### **Manage application lifecycle**

The next step is to manage application lifecycle. You will have to stop/start the camera when your application goes to/from the background. 

The class `_MyHomePageState` must implement the abstract class `WidgetsBindingObserver`. Replace its declaration with:

Register the lifecycle observer, add in `initState`:

#### **Add a control panel**

You still can't start a live stream because there is no way to do it. 

We are going to add a [Row](https://api.flutter.dev/flutter/widgets/Row-class.html) of [IconButton](https://api.flutter.dev/flutter/material/IconButton-class.html) that can control your live streaming.

Import the following package:

Then, add the following code in `_MyHomePageState`:

Then, add the `_controlRowWidget()` in the Colum under the `ApiVideoCameraPreview`. Replace your `_MyHomePageState` `build` method by:

Finally, update the `_isStreaming` variable in the controller’s callbacks to update the `IconButton` state when the live streaming is stopped.

Replace `createLiveStreamController` by:

#### **Launch your first live stream**

⚠️⚠️⚠️ If you want to run your live stream, 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.

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.

💡 You can also use the api.video API to create a live stream and retrieve your stream key dynamically. Find how to do this right here. Paste your stream key in place of `YOUR_STREAM_KEY`. Paste your stream key in place of `YOUR_STREAM_KEY`.  

&nbsp;  
Click on the live button in your application; it should be disabled if the live streaming properly starts. Then, go to the shareable link you just saved. 

There you go! You can see what your mobile is streaming in real-time! If not, wait a few seconds and check your stream key value.

🎉🎉🎉 Congratulations, you have created your first live streaming Flutter application 🎉🎉🎉

You can now do an actual live stream directly from your Android and iOS devices. 

## And now what?

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

&nbsp;  

To avoid these limitations, [sign up](https://dashboard.api.video/register) to api.video and go into production mode 🚀.

Also, the Flutter RTMP live stream client allows us to do much more in terms of configuration!

You can match both audio and video configuration to your needs.

Also, there are some properties can be updated during the live stream:

* Camera: front or back
* Audio: muted or unmuted.

Check out the [README](https://github.com/apivideo/api.video-flutter-live-stream/blob/master/README.md) for exhaustive information about the `apivideo_live_stream` package.

Build your Flutter live streaming application with api.video

build-flutter-live-stream-app-api-video.jpg

api.video player for Flutter: playback videos on your apps

How to build a live streaming app in 3 steps

Video trends

Here at [api.video](https://api.video/), we talk with lots of developers who are looking for ways to build cool and innovative services with video. Many are still figuring out all of their use cases, and trying to match them with the technical capabilities of different video services.

[Streaming live video](https://api.video/product/live-stream/) is one feature that we receive many questions about. At api.video, **our video streaming solution uses HTTP Live Streaming (HLS) to live stream video**. Another technology we are frequently asked about is WebRTC.  Both technologies are great, but have significantly different applications. In this post, we’ll look at the features and advantages of both, and the primary applications that they are suited for.

## What is HLS?

HTTP Live Streaming (HLS) was developed by Apple, and is currently the primary way that video is streamed on the web today.  The “live streaming” in the name HLS is a bit of a misnomer, as the video does not need to be live - YouTube, Netflix and other video on demand services use HLS to stream video that is not live.  This is an advantage of using HLS for live streaming - the same files used to deliver the video live can be used to playback the video later ‘on demand.’

The ‘HTTP’ in HLS indicates that it uses traditional web protocols to transmit the data over a TCP connection. The video is cut into small segments and sent from the server to the user. The player on the user’s device recombines the video for playback based on a text based manifest file that is transmitted with the video segments. What makes this powerful is that if you have different versions of the same video (different dimensions and bitrates), the player can optimise the delivery based on the actual conditions for each user (primarily network speed and screen size).

When a live video is being transmitted with HLS, the video is sent to a server and transcoded into segments for transmission to end users. This makes HLS ideal for live streaming in one-to-many streams - once the files are recorded, the files are sent like any other HTTP request and the limitation is essentially the server hosting the video. (and of course with CDNs this overhead can be further reduced).

**Latency**: HLS streaming does suffer from about 6-15 seconds of latency (and depending on architectures, it can even be longer). Since the video is transcoded into segments of finite length, the video must be held up for at least as long as the segment length. To reduce transmission errors, some players require 2 segments to be stored in the playback buffer before playback begins, further pushing playback time away from the exact live event.

NOTE: There is active work being done today to reduce HLS streaming latency, and this is expected to improve over the coming months (and api.video is investing in bringing low latency HLS to our users in the *very* near future).

**HLS Summary**: A robust solution for streaming to many users. The current state of HLS includes 10-20 seconds latency that makes HLS not ideal for interactive presentations. HLS videos are also available for playback after the live event.



## WebRTC

“Web Real Time Communication” or WebRTC is a W3C standard that is supported in all browsers, allowing for - as you might have guessed - real time communication. WebRTC has near instantaneous delivery, typically under 300ms, making it ideal for interactive back and forth conversations like in web conferencing solutions.  

The reduction in latency is (partly) due to the use of UDP instead of TCP, and because the formats being used do not require any transcoding before transmitting.

However, since there is instantaneous delivery of video between peers, there is a limit to the number of users who can share video, typically under 6. There are implementations for WebRTC where a small number of users (under 5) share their video, and another number of users can watch in real time (but this number is usually small - under 300.).  

Each person sharing video uses about 1 MBPS of bandwidth. If there are 4 people streaming, the video is 4 MBPS per viewer - the bandwidth coming out of the server will quickly be the limiting factor for the number of users who may join the stream. Additionally, users on low quality networks may not be able to ingest 4MBPS of video, and have trouble playing back the video due to the size. 

In order to save the video for later playback, the WebRTC implementation will use the MediaRecorder attribute to save the video on a local computer. For later playback, this video will have to be uploaded to a server.

WebRTC is ideal for real-time instantaneous communication, but is for small groups of viewers - typically 1-4 sharing video, and a small number of viewers.


## Are HLS and WebRTC independent?

Melding HLS and WebRTC is actually quite common. For example, if you are hosting a panel of speakers, they could join over WebRTC (like a Zoom call), and then stream the call over HLS to a large audience (Zoom offers this as a feature to increase your audience).

How are you using WebRTC and HLS in your video applications? Feel free to continue this conversation on our developer forum: [community.api.video](https://community.api.video).

Delivering live video: Streaming vs. WebRTC

webrtc.png

Live streaming your content is a great way to connect with your audience. In this tutorial, we'll walk through the steps you need to follow to set up a video livestream.

Note: we have example code of setting up a live stream in the [browser](https://api.video/blog/tutorials/live-stream-tutorial/), with [Zoom](https://api.video/blog/video-trends/start-remote-work-with-online-video-and-zoom-us/)
and with [OBS](https://api.video/blog/video-trends/video-live-streaming-in-just-5-easy-steps/).

[Here](https://docs.api.video/reference/api/Live-Streams#create-live-stream) is the direct link to the technical docs to create a live stream.

In order to establish a video livestream, you must first create a livestream container at api.video. Then you can begin streaming with the tool of your choice. In this example, the live stream will be created with OBS, free and open source software for video streaming.  

## Creating Live Stream

### Step 1: Authenticate

You need an access_token in order to create and upload a video.

You will need your API key to obtain the access_token. You can find your API key in [your dashoard](https://dashboard.api.video).  

This tutorial uses the sandbox endpoint. To upload your video in production, simply replace all `sandbox.api.video` instances with `ws.api.video`.

First, call the authentication endpoint and get your access token.


#### Example - Curl Request


### Step 2: Create the Live Stream

Now we [create the live stream](https://docs.api.video/reference/api/Live-Streams#create-live-stream). In the JSON parameter, feel free to edit the name of the live stream from "Your Stream Name" to whatever you want to name your stream.

#### Example - Curl Request

Now the server is ready to accept our live stream, and once broadcast begins (JSON above shows broadcasting:false), it will be viewable on the urls listed in the JSON response.

### Connecting Live Video

The JSON response above lists your live stream's streamKey, which will be needed in OBS to connect your video to the server.

in the OBS application:

1. Esablish a source.  In the sources section, choose a video feed to share.  You could choose to share your screen, or to share your camera (on a Mac: Video Capture Device, and then in the "Device" dropdown choose the camera).  You should now see the video source in the main OBS window.
2. Connect OBS to api.video. Under Settings, choose Stream.  You'll see a choice for service - choose custom.
3. The server should be `rtmp://broadcast.api.video/s` and the `streamKey` is the value you received in the Json when you created the stream. Click OK to accept the changes.
4. Press Start Streaming.
5. Share the embed, iFrame, so that others can watch your stream!


Extra Step:  The default video poster that your users will see is api.video branded.  You can update the thumbnail with an image of your choice:

## Conclusion

That's all it takes. We've walked through the process of creating a livestream at [api.video](https://api.video), and then how to connect that video's streamKey into OBS. Using OBS, we are then able to broadcast video to all our viewers, who can watch using the player (oriframe) url provided by the api.

[Give it a try](https://dashboard.api.video/register), and let us know how it worked for you in our [community forum](https://community.api.video). We're also there to help out if you run into any difficulties.

Create a Live Stream

create-a-live-stream.png

large_create-a-live-stream.png

medium_create-a-live-stream.png

small_create-a-live-stream.png

thumbnail_create-a-live-stream.png

Private live streams

Announcements

small_cedric.webp

thumbnail_cedric.webp

cedric.webp

Cédric Montet

Company News

AI, models, assistants, agents and prompts sound and look magical on social networks. But from the countless conversations we have had with startups and Enterprise customers over the last months, we have realized that the gap between existing video workflow and concrete use cases is real.

&nbsp;

Whether it’s getting transcripts in seconds, changing the language of your video or being able to search for items in your content – the benefits, value or potential savings you see and can get with AI are obvious.

&nbsp;

This is why we are thrilled to unveil how we are bringing AI into video, where we are heading and how you can get more value from it!

## What does the future of video streaming look like?

AI will completely upend video consumption as we know it today. We envision a world where video is not a content piece anymore which you can only start and stop – because AI will make videos discoverable and universally understandable. More than ever it resonates fully with our core mission – connecting people through their cameras.

&nbsp;

Since Day 1, we are building api.video to make your use cases, first, a reality and, then, a success.

&nbsp;

Back in the days, the fragmented video streaming market, the number of services you had to aggregate, the lack of innovation by the incumbents was preventing you from joining our video-first world, while your efforts and budgets were consumed by maintaining mashups instead of focusing on what matters. 

&nbsp;

This is why we have built the video backbone and seeing that, now, you host 2.5 millions videos on api.video and deliver dozens of millions videos every month demonstrate why simplicity, exceptional performances and an E2E approach were key.


&nbsp;

What’s happening today with AI, the efforts it requires to benchmark, setup and customize LLMs, to run and maintain them, the Infrastructure you have to build to execute them before getting any value, remind us of the state of the streaming market when we had launched api.video.

&nbsp;

Helping you to benefit from the AI revolution by abstracting all the underlying complexity became obvious and a natural next step in our evolution.

&nbsp;

To get there and to bring you there, here is what we are building, api.video’s very first – **Video Model Hub**.

&nbsp;

Let’s start with the root principles encompassing our work on this Hub:

&nbsp;

- **Open-source models over private ones.** We are long time believers and contributors of the open source community and we have chosen to run only models that are available publicly.

- **Your data is… your data.** You already trust us to host and deliver sensitive content,and this is exactly why we won’t train our own models or sell the data generated from your videos to anyone.

- **Privacy at the core.** We host and execute the models inside our own infrastructure. Your data remains inside the api.video infrastructure. Your videos or data is not sent to external partner, SaaS providers like OpenAI, or others.

- **We believe that every organization will eventually build their own models to leverage their unique data sets**. Next year, alongside the ability to run public and open source models on api.video, we will offer you the ability to host your own.

- **One API to rule them all.** As we have already replaced a dozen of services and vendors under GET/videos to make your videos available worldwide in seconds, we are abstracting all the complex work of executing LLMs behind clear and straightforward endpoints.

&nbsp;

At a glance, api.video brings to you today the power of AI by:

- Leveraging its years of experience in video management and building infrastructure, with GPUs.
- Combining with the most advanced LLMs available on the market.

so that you get more value from your videos in a few lines of code!

&nbsp;

## Here are the first three new features from the Video Model Hub

### 1. Summarization of long-form videos

Upload a video in English, Spanish, French, Portuguese or Chinese and get a text summary of 120 characters with the 3 key takeaways discussed in the video (within seconds!). Ideal to index or preview long form recorded meetings or courses!

&nbsp;

_The video below gives you a glimpse into AI summarization._


### 2. Transcription of your video in seconds

Get a transcript (in .VTTformat) from your uploaded video with the timecodes and offer the captions to your audiences. The best part? The api.video player supports VTT files so there’s nothing new that you need to build on your side!
This also makes your content more inclusive by making it accessible to people with hearing impairments. 


### 3. Translation of subtitles in 5 different languages (and more to come!)

Is your video in English? You can get Spanish and French subtitles. In Chinese? You will get English subtitles and three more languages. In short, this is the perfect solution to spread your message to your international audience!

&nbsp;

_Check out the video below for a glimpse into AI translation._ 


_Try it for yourself now by uploading a video in your [sandbox account](https://dashboard.api.video/overview)._ 

## What’s next

From video classification, alteration, generation, audio alteration, metadata generation, we have identified and plan to implement more than 200 additional use cases and features within the upcoming months!

&nbsp;

From next year, we will let you bring your own models on the infrastructure to get even better and more personalized outcomes.

&nbsp;

This is a long-journey and we’re only getting started. The whole team is thrilled to be at the forefront of this next chapter!


AI  >< Video: The Video Model Hub unveiled

small_AI thought leadership.png

thumbnail_AI thought leadership.png

AI-thought-leadership.png

Arushi Gupta

Our mission at api.video has always been to turn your use cases into successful realities. We built the video backbone with this goal in mind, and today, you host 2.5 million videos and deliver tens of millions more!

&nbsp;

Helping you harness the power of AI, while simplifying the problems that come along with, was the next direction to take. 

&nbsp;

To achieve this and to support your journey, we bring to you –  **AI features for your videos.**



## What are the AI video features?

### 1. AI video transcription & captions

With AI transcription, you can convert spoken words in your videos into written text, providing an accurate, searchable record of your content. This means you can easily create subtitles, enhancing accessibility for the hearing impaired or getting a written record of your meetings or events. 






### 2. AI video translation

With AI translation, you can translate your videos into multiple languages, ensuring that viewers from different linguistic backgrounds can understand and engage with your content. This can be useful if you’re hosting an international virtual event, creating multilingual educational materials, or expanding your marketing reach.

&nbsp;

Translation will be available for 5 languages – French, English, Spanish, Portuguese and Chinese.


### 3. AI video summarization

Using AI summarization, you can distill lengthy content into concise, digestible summaries, allowing viewers to quickly grasp the key points without watching the entire video with AI video summarization. This can prove invaluable for educational lectures, business presentations, and lengthy seminars where time is of the essence.

## Do you really need this?

Well, the potential [uses of our AI features](https://api.video/use-cases/generative-ai/) are limitless! From e-learning and e-commerce to online streaming, these [AI features](https://api.video/product/ai-features/) are going to be the difference between ordinary and excellent. What can you do really?

&nbsp;

- Summarize educational lectures for a quick review
- Translate virtual events into multiple languages for global reach
- Transcribe video interviews for easy reference
- And so much more!

## More than just encoding, hosting, and delivery

We’ve gone beyond the basics of video hosting and delivery to give you features that are a step up from the ordinary. Now, not only can you ensure that your customers get video delivery at minimal cost, but also that they get the flexibility to offer content  in their preferred language and in a crisp manner. 

&nbsp;

Additionally, when the features are in production, you may also get the option of adding them via your API. This means that you get complete power to add the features you like without having to go through the dashboard.

## Your videos stay private to you

Your data is yours, and we respect that. You already trust us to host and deliver your most sensitive content, which is why we will never train our own models or sell data generated from your videos. Privacy is at the core of everything we do, and that’s why we host and execute the models within our own infrastructure. Your data stays entirely within the api.video ecosystem and is never sent to external partners, SaaS providers like OpenAI or others.

&nbsp;

_Our CEO and founder, Cedric Montet, speaks more about privacy being our topmost concern in his latest [blog](https://api.video/blog/company/video-model-hub-ai/)._

## Give it a try!

See a glimpse how these AI features look like with a free sandbox account! [Upload a video now in your dashboard](https://dashboard.api.video/overview) and witness AI make a difference to your videos. As this is a Beta release, any feedback, questions, doubts on the features are welcome and much appreciated.

Create a sandbox account now 

Lights, Camera, AI Action! Discover our AI features

Introducing AI features to compliment your videos

small_Introducing AI features to compliment your videos.png

thumbnail_Introducing AI features to compliment your videos.png

AI-features-to-compliment-your-videos.png

AI >< Video: The Video Model Hub unveiled

How to integrate AI facial expression detection to control your video – Javascript 

5 AI tools that will save you 10+ hours on video production

Lights, Camera, AI Action! 

In a world where time is money and creativity reigns supreme, AI tools that convert text to video are game-changers! These AI-powered wonders are designed to save your day—and countless hours. Join us as we unveil the top 5 AI video tools that can dramatically cut down your video creation and editing time. From transforming text into captivating visuals to adding that perfect touch of magic to your edits, these tools are set to become your new best friends in the digital playground!

## **1. CapCut**

At number 1, we have Capcut. 

&nbsp;

[CapCut](https://www.capcut.com/) surged in popularity due to its user-friendly interface and powerful editing features, making it a favorite among video creators. Its integration with TikTok and social media platforms is also reason for its widespread adoption.

&nbsp;

The best part about using CapCut is that most of these important features are available for free, which kicks out budget-constraints out of the window. CapCut uses AI to empower users to create stunning videos without needing any fancy editing experience. With mobile and desktop apps, as well as a web version, CapCut can easily be used on the go. 

&nbsp;

CapCut offers a range of AI-driven features that are very, very impressive. With 'Smart Cuts & Trims', CapCut's AI automatically detects shaky parts, long pauses, or unnecessary bits, suggesting cuts to tighten up your video and eliminate boring footage. 'Effortless Audio Magic' helps isolate voices and enhance audio quality, making your message crystal clear even if there’s noisy background interference. 'Instant Captions' auto-generate captions, making your videos more accessible and saving you time and effort. Moreover, if your filming didn't capture the perfect lighting, 'Light Like a Pro' allows CapCut’s AI to adjust lighting in your videos post-production, creating the ideal mood.

What I most love about CapCut AI video generator is its AI-driven background removal feature which eliminates the need for a green screen, allowing me to replace any background with an image or color of my choice.

&nbsp;

Something to note about Capcut is that the free version includes watermarks on exported videos. which can be removed only with a paid subscription. This may potentially pose a barrier for you if you’re a budget-conscious user.

## **2. Runway**

[Runway](https://runwayml.com/) can be called a virtual sorcerer's wand for video editing! It has the potential to be an entire AI video production studio, so it can basically create an entire movie without filming a single frame — if you have the time, that is. Runway can generate videos and animations from simple text prompts, create animations from still images, generate lip-syncing avatars based on a recording of your voice, and even allow you to train your own AI models. 

&nbsp;

Runway might be a little intimidating in the beginning. That’s because it has an array of features that take time to understand, execute and implement, and that could be slightly time-taking and if I can say, complex.

Another aspect to note is that while Runway offers a range of pricing plans, the advanced features that truly set it apart are locked behind higher-tier subscriptions, making it less accessible for small businesses or individual creators on a tight budget.

## **3. Invideo AI**

[Invideo AI](https://invideo.io/ai/) is an excellent tool for generating a starting point for your videos. It helps you to quickly create a basic structure for your videos, which can then be further customized and polished. The  features allow you to input simple prompts, from which the tool generates an initial draft that includes relevant footage, transitions, and effects. 

&nbsp;

A few standout features of Invideo AI are an extensive stock media library that offers a range of options to choose from, AI-powered script generation which creates a complete script for your videos and, voiceover addition. Their AI voiceover generator is particularly good because it has an option to add your own voice which it then uses to narrate scripts in. The narration is also decent, with multiple accents and focussing well on the feeling, intent, and emotion behind each word.

Overall, the tool is great for YouTubers and people who want to start off their video making journey with minimal effort. 

&nbsp;

One of the shortcomings of Invideo AI is its dependency on a stable internet connection, as the tool is cloud-based. This can be a significant limitation for users in areas with unreliable internet access. I also noticed that rendering videos on Invideo AI can sometimes be slow, especially for longer or high-resolution projects, so keep enough time in hand before you expect a final video. 

## **4. Wondershare Filmora**

[Wondershare Filmora](https://filmora.wondershare.net/de/ad/videobearbeitungsprogramm-brand.html) has been a staple in the video editing world for over 15 years. Despite its long history, it's continuously evolving, with a suite of AI features that enhance video quality without requiring professional training or extensive time investments. 

&nbsp;

Filmora is a popular choice among full-time influencers and video editors for advanced-level video editing. It is also a preference because the tool keeps evolving based on new technological developments, and therefore is easily able to meet the demanding standards of modern digital media.

&nbsp;

Some of Filmora’s features include 'AI smart cutout', which allows you to cut objects out of scenes simply by painting their area on the screen, and 'AI audio denoise', which helps control background noise. 'AI audio stretch' lets you extend music to match scene transitions, while AI motion tracking enables face blurring for privacy or fun effects. They also have AI remove background which allows you to create imaginative scenes without hefty budgets. 

Wondershare also provides detailed explanations of these features on their website, so if you ever face a problem using any of them, be sure to check their dedicated pages. 


&nbsp;

However, do note that Filmora's performance can be sluggish when handling large files or high-resolution videos, leading to slower rendering times and potential crashes at times.

## **5. Canva Magic Studio**

Easy to use. Neat interface. Quick results. 

&nbsp;

Those were the three things I liked best about [Canva Magic Studio](https://www.canva.com/magic/). 

&nbsp;

Canva Magic Studio looks very promising as an AI video tool. Having been a fan of Canva for infographics, presentations and social posts since the past few years, their AI video tool has quite impressed me. What stands out is that their UI is very, very simple to understand. Plus, their features don't seem to be overwhelming when it comes to video editing, which I often feel is the case with other professional editing tools. 

&nbsp;
 
Canva Magic Studio gives you amazing results when it comes to video quality and is also very quick to generate the final video. The good video quality comes from its integration with Runway (our #2 in the list).

&nbsp;

To show you an example, I used the prompt: "A cute rabbit watching a video on a laptop”. And the [result](https://www.canva.com/design/DAGGCqwwf4A/GS7q42J5C9nx26gxJGR9lA/watch) was surprisingly very apt!

Canva Magic Studio is a great option if you want to bulk-create your social media posts – create a chunk of Instagram reels or Facebook ads in a go or create similar kinds of videos using a single template. The template options Canva offers have a wide range and are decent for beginners to start with.

## Sora – Open AI’s video generator

Open AI sparked a wave of excitement around AI with ChatGPT, demonstrating its incredible potential in natural language processing. Now, it's taking things a step further with [Sora, an innovative AI](https://openai.com/index/sora/) video creator.

Open AI recently shared a series of tweets showing the potential of Sora and I must say, I am amazed. Be it [several giant mammoths](https://x.com/OpenAI/status/1758192960116785459) rushing through a snowy meadow or a [fluffy monster](https://x.com/OpenAI/status/1758192964222988506) behind a melted candle, the kind of videos Sora will be able to create is astounding! It looks like it will be able to take detailed prompts into consideration, just like it did with ChatGPT, to create exactly what the user needs.

&nbsp;

As Sora continues to evolve and improve, it will undoubtedly shape the future of video production, showing way to new forms of storytelling and engagement in the years to come.

## AI is great – but it cannot replace you

While these AI video tools can ease the load for you and save some time, they cannot really take the place of your creativity, intuition, and emotional intelligence. In the end, it is your perspective, personal touch, and experiences that shape the videos you create. 

&nbsp;

_If you’re finding a place to store, host and deliver your [AI generated videos](https://api.video/use-cases/generative-ai/), api.video could be just what you’re looking for. With quick video upload options, flexible hosting capabilities, ability to add watermarks and keep videos private, you can choose api.video for all your video needs. If you would like to test out our features, [sign-up](https://dashboard.api.video/register) for a sandbox account now and you wound’t be disappointed._

small_7 AI Tools for Quick Video Creation.jpg

thumbnail_7 AI Tools for Quick Video Creation.jpg

7-AI-Tools-for-Quick-Video-Creation.jpg

5 ways the human eye impacts how we do video compression

7 eye-opening stats that prove the impact of product videos in e-commerce

5 ways to utilize product videos to boost your e-commerce sales

Yohann Martzolff

React

In today's tech-driven world, enhancing user interaction and creating immersive experiences is crucial. One exciting way to achieve this is by integrating AI facial expression detection into your video content.  In this blog, we'll guide you through the steps to <u>integrate AI facial expression detection to control your videos using React</u>. 

&nbsp;

Let's start.

&nbsp;

_*To learn how to do the integration with Javascript, head to this [blog](https://api.video/blog/tutorials/AI-facial-expression-detection-javascript/).*_

## 1. Create a minimal React app

As the first step, we need to create a new React app. Run the following command for the same. 

Now add the MediaPipe and the api.video React player packages

## 2. Add a video player

You’re going to use the official [api.video’s React player](https://github.com/apivideo/api.video-react-player) in this application, but feel free to use your favorite one and adapt the callbacks to it.

&nbsp;

Replace the code inside `App.tsx` with the following.
The `playerRef` allows us to control the [api.video player](https://api.video/product/player/).

Run your application with the npm run start command and go to `http://localhost:3000/`, you should see a video that you can play, pause or mute. 

## 3. Record your facial expressions

To control the player with your facial expressions, you need to stream your face through your webcam and pass this streamed data to the trained machine-learning model.

&nbsp;

Add a `<video />` HTML tag to `App.tsx`. 
Its `webcamRef` allows the video element to be targeted.
Apply a `display: "none"` inline style to hide the element, and an `autoPlay` attribute so the webcam stream time is updated. 

&nbsp;

**Note:** You can remove the `display: "none"` style and customize your CSS, it doesn’t matter.

## 4. Load the machine-learning model

Before we can use the machine-learning model, we must wait for it to finish loading. These models can be large and take a moment to get everything needed to run.

&nbsp;

Put this logic inside a `useEffect` and store the `faceLandmarker` class as a React stateful value.

## 5. Start detecting the webcam stream

Once the machine-learning model has been loaded and the `faceLandmarker` class has been instantiated, you can start detecting the stream.

&nbsp;

Create a new `useEffect`

Run your application with the `npm run start` command, go to `http://localhost:3000/`, and open your console. You should see a lot of console logs appearing each millisecond.

&nbsp;

Each one of them logs an array of objects of type:

## 6. Use the facial expression detection results

You now have access to a list of facial expression detection results. Use them to do whatever you want and in this case, to control your video player.

Let’s assume that you want to play the video when you smile, and pause it when you do a kiss.

Check the facial expression detection results on each frame and play or pause your video depending on the score of the wanted result by replacing your console.log with the following.

Once again, run your application with the `npm run start` command, go to `http://localhost:3000/`, and try to smile at your webcam. It should trigger the player’s `play` callback and play the video. Then, try to do a kiss ( 😗 ) in front of your webcam, and the video should pause.

## 7. Display the results

It can be helpful to have a visual representation of the detection results. Display these results as a list and highlight the detected facial expressions by adding a `<ul />` HTML tag to your JSX and creating a new ref to target it.

Add the code to update the HTML according to the results.

Now, you should see a list of results displayed in your application, with a green highlight on the ones with more than 60% confidence.

## 8. Code samples

Check the full `App.tsx` code below.

We hope this blog helped you understand the coding behind integrating AI facial expression detection to your videos.

 &nbsp;

_For any questions or doubts you may have, chat with us on our [website](https://api.video/contact/). If you would like to try out api.video for your videos, [sign-up](https://dashboard.api.video/register) for a free sandbox account here._

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

Private Live