Video upload

Video update

Normal

large_logo_avatar.jpg

medium_logo_avatar.jpg

small_logo_avatar.jpg

thumbnail_logo_avatar.jpg

logo_avatar.jpg

api.video

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

NodeJS

no code

Video content is a critical digital media component, offering a dynamic way to share information and engage with audiences. [api.video](https://api.video) provides a robust video on demand platform, where you and your users can have full control over video accessibility. You can enable viewers to download the source videos directly from the api.video player, or from the player of your choice. Improve user experience and drive engagement in your solution by enabling viewers to access videos offline, or give content creators the ability to create backups of their media. It also works the other way around - you have the ability to disable video download functionality altogether and restrict access to the video source file, if that suits your use case better.

This article will explain the ways you can **enable or disable video downloading through the api.video player using our API and the Dashboard**, and will also give you a simple example for creating a custom download button for the player of your choice.

## Download access control with a single setting

api.video simplifies the process of offering downloadable videos by providing a single property that can be set to either `true` or `false` when a video is uploaded. The `mp4Support` property decides whether your viewers can access and download the source file a of a video. When enabled, this feature introduces a download button directly on the api.video player, allowing viewers to download videos with a single click. Setting the property to `false` on the other hand disables the download option, giving creators more control over the distribution of their content.

>The `mp4Support` property is enabled by default for all video uploads.

### Control downloads via the API

Let’s dive into how you can control video downloads programmatically when integrating with one of api.video’s API clients. 

>This example uses api.video’s **[Node.Js API client](https://docs.api.video/sdks/api-clients/apivideo-nodejs-client).** Check out our Libraries & SDKs for a complete list of [available API clients](https://docs.api.video/sdks/api-clients).

Utilizing api.video’s `/videos` endpoint, you can enable or disable downloads for individual videos during upload, or you can update an already uploaded video to change download permissions.

 
Let’s see how this process looks like when uploading a video: 

 

&nbsp;

1. **Create a video object and define the `mp4Support` property**

 

Now let’s see how the same thing looks like for a video that is already hosted on api.video:

>Check out the [API reference](https://docs.api.video/reference/api/Videos) for more details about the `/videos` endpoint, and take a look at the [Video Download guide](https://docs.api.video/vod/video-download)’s examples for other API clients.

### Enable downloads through the Dashboard

When you are hosting your own content at api.video, the Dashboard gives you granular control over every video that you upload. Check out the [Videos page](https://dashboard.api.video/videos) to see a list of all your uploaded videos!

&nbsp;

Let’s see how you can modify download access without writing a single line of code:

 

&nbsp;

1. Open the **Details** view for any specific video where you want to enable or disable download access:

Showing an uploaded video in the Dashboard

medium_Untitled.png

small_Untitled.png

thumbnail_Untitled.png

video_download_1.png

2. On the Video details page, click on the **Update video object** button:

Showing the Video Settings page in the Dashboard

large_Untitled (1).png

medium_Untitled (1).png

small_Untitled (1).png

thumbnail_Untitled (1).png

video_download_2.png

3. Modify the `MP4 support` setting with a simple toggle and click on **Update Video** to save your changes:

large_video_download_3.png

medium_video_download_3.png

small_video_download_3.png

thumbnail_video_download_3.png

video_download_3.png

Once you save your changes, the download button will appear for this video in the api.video player.

## Create a custom download button

Most video player solutions have native support for downloading the video’s source file. However, you can also add a download button to a custom player that does not have this functionality.

&nbsp;

Leverage api.video’s API by sending a request that retrieves the video’s `id`,  and then render a custom download button serves the `mp4` asset for video.

&nbsp;

Check out the [Video download guide](https://docs.api.video/vod/video-download#creating-a-custom-download-button) for a step-by-step walkthrough on how to create a custom download button using Node.Js, api.video’s Node.Js API client, npm, and React.

## Conclusion

The ability to enable or disable video downloads is a fundamental aspect of content management, and [api.video](https://api.video) is here to offer a simple and intuitive solution for both developers and content creators. 

&nbsp;

Explore the capabilities of api.video! Check out our [documentation](https://docs.api.video/), browse through the available [Libraries & SDKs](https://docs.api.video/sdks), and [sign up to get started for free](https://dashboard.api.video/register).

&nbsp;

Start with api.video today to deliver a comprehensive, feature-rich video on demand service. The team is readily available to assist you with any inquiries or to help you discover the full potential of api.video.

Enhancing Video Accessibility: Control Video Downloads with api.video

small_Blog_ VideoDownload.jpg

thumbnail_Blog_ VideoDownload.jpg

Blog_VideoDownload.jpg

vimeo

Arushi_.png

Arushi Gupta

api-video-blog-video-trends.png

Video trends

_“Once a new technology rolls over you, if you're not part of the steamroller, you're part of the road.”_ - Stewart Brand, Writer

&nbsp;

Picture yourself in your office or home, daydreaming about your next thrilling vacation. Two options lie before you: flipping through a travel booklet, or immersing yourself in captivating videos showcasing breathtaking landscapes, mountains, oceans, delicious food, vibrant cultures, and more! If you had to choose, you will surely choose the second option, because let’s all agree, videos are far more realistic and give you the right information quickly. !

&nbsp;

But there are various formats to videos, and video-on-demand is one format in which videos are consumed today — thanks to video-on-demand (VOD) platforms like Netflix, Hulu, Hotstar, and more. 

&nbsp;

Now what are VOD platforms in the first place and how do they work? Let’s find out. 

## What is VOD?

Let’s first understand what is on-demand. On-demand is something that is desired for or wanted. Similarly, [video-on-demand ](https://api.video/what-is/vod-video-on-demand/)or VOD is any content format that gives the audience the power to watch it whenever, wherever, and however they want. It can be found anywhere on the internet for any purpose — be it entertainment, online learning, or e-commerce. Since VOD is streamed through the internet, there is no intervention of cable or satellite connections unlike traditional broadcasting methods. 

&nbsp;

And that is what makes VOD so popular and also, so convenient to use. 

## Benefits of VOD

Now that we know the meaning of VOD, let's look at some of its important benefits.

### VOD offers enhanced engagement

With VOD, you can create multiple videos for your products and services, providing proper descriptions of their features and functionalities. Attendees can watch, understand, and learn about your offerings through these on-demand streaming videos. Moreover, it is a common habit for people to watch various videos, read content, and then make product comparisons before making a decision. This provides you with an opportunity to capture the attention of a global audience for your products and services. 

&nbsp;

_Did you know?_

According to a 2022 study by [Wyzowld](https://www.wyzowl.com/video-marketing-statistics/), it was found that a massive 94% of marketers agree that video helped them understand a product or service better. It was also noted that 88% of people had been convinced to buy a product or service after watching the brand's video. Not to mention, the study also found that 96% of people watched an explainer video to know more about a product or service.



giphy.gif

### VOD is convenient for your business

Video on demand allows your audience or customers to watch content according to their will. There are no restrictions on place and time, and they can watch the video as they wish. The best part is that unlike most other general broadcasting services, VOD platforms’ availability is not restricted to certain geographical locations, so viewers from around the world can stream content. 

&nbsp;

_Did you know?_

[77% of Americans](https://www.statista.com/statistics/949965/pay-tv-streaming-satisfaction-rate/) report being happy with the convenience and flexibility of streaming video on demand, while [71% discarded cable TV](https://www.statista.com/statistics/319924/reasons-not-have-cable-usa/) as they can easily find the content they want online. 


### VOD tastes like freedom

VOD platforms offer the freedom to create content with complete control, free from advertisers' guidelines and restrictions. Producing videos-on-demand allows you to share your authentic self with the world. With just an idea, a camera, and an internet connection, you can craft the perfect video content for your product or service, ready to be showcased on your app or website.


giphy (1).gif

### VOD offers better opportunities at lesser cost

Video-on-demand proves more budget-friendly than hosting a virtual event or live streaming content. As opposed to livestreaming where you can be online for just a defined time — like a day or a week — video-on-demand has no restriction on the availability of your content and that allows people access to your content for a larger duration of time.


## What makes a great VOD platform

There are various aspects of a good VOD streaming platform. Let’s see what they are.

1. ### Customization with a white-label video player

The foremost focus of your product lies on branding. It is always great to have logos, images, and colors to maintain your brand's prominence by white-labeling your videos — and a good VOD platform should let you do that with ease. 

&nbsp;

At api.video, you get complete control to showcase your brand and [stand out with our customizable video streaming API](https://api.video/blog/product-updates/white-labeling-api-video/).

### 2. Content delivery network (CDN)

A content delivery network (CDN) is like the backbone of a VOD platform. A CDN plays a crucial role in delivering videos with minimal buffer time to your users across the globe, making sure they can enjoy smooth and speedy streaming.

### 3. Digital rights management

Digital Rights Management (DRM) is a tech tool that safeguards your content from piracy and unauthorized sharing. A good VOD platform usually has a DRM solution that lets you create videos and restrict their viewership to private or public. 

### 4. Multi-user access

A multi-user access feature provides custom access controls and user permissions within your business and for each target audience group. With the [help of built-in safeguards, a good VOD platform](https://api.video/blog/product-updates/workspace/) lets you share your workspaces with other members and collaborate on a project. 

## How is VOD different from live streaming?

The best way to describe the difference between VOD and live streaming is to understand real acting vs. reel acting. In theater, there are no second chances; what happens on stage is the final act. On the other hand, movies and series permit multiple takes, extensive editing, and color correction before producing the final video. Similarly, VOD empowers you to shoot, edit, and upload videos at your pace, granting you the freedom to pause, play, rewind and fast forward. 


giphy (2).gif

On the other hand, live streaming lacks such options since it takes place in real-time, untouched by editing. If you see the broader aspect, live streaming is a subset `of VOD as live videos can be watched on demand by the viewers at a later date. 

If you are wondering which one’s better, we would say both of them can be combined for a wholesome business package. While VOD offers convenience and accessibility, live streaming is more engaging for the user. 

## Is VOD the right option for you?

In a word, YES. There can be a lot to do in this era of online marketing, but video-on-demand can change your brand in a lot of ways. It is attractive because it grants you complete control over your videos without adhering to advertisers' guidelines. With the ability to shoot, edit, and upload at your own pace, VOD caters to diverse needs and audiences. Viewers can indulge in on-demand content, pause, play, and revisit their favorite moments at their convenience. 

&nbsp;

In a nutshell, VOD is an excellent way to connect with your audience and make a meaningful impact that can go a long way in your business’ growth but you need to evaluate your content goals, target audience, and desired level of control to be able to decide if it is the right option for your business. 

&nbsp;

_If you are looking for an API that lets you integrate videos seamlessly to your product, checkout [api.video](https://api.video/). With usage based pricing that does not burn a hole in your pocket, lightning fast encoding and a developer friendly API, you get everything you need at api.video to integrate VOD in your app or website._

&nbsp;

_[Sign-up ](https://dashboard.api.video/register)for a free sandbox account or [take a look at our features ](https://api.video/features/)now!_

What is VOD and how does it work?

large_Frame 427319229.jpg

medium_Frame 427319229.jpg

small_Frame 427319229.jpg

thumbnail_Frame 427319229.jpg

Frame 427319229.jpg

Announcements

alexw.png

linkedin Alex W

Alexandre Willot

api-video-blog-product-updates.png

Product updates

We are excited to introduce Domain Restrictions, a feature that will allow you to restrict your videos and live stream playback to specific domains or subdomains, providing an additional layer of security for your videos and streams.

## 1. What does ‘Domain Restrictions’ do?

&nbsp;

With Domain Restrictions, you can now specify which domains or subdomains are allowed to stream your videos or live streams. This means that even if someone gets a hold of your API credentials, or video and live stream links, they won't be able to use them to watch or stream your content from an unauthorized domain.
&nbsp;

## 2. How it works

&nbsp;

1. Log in to your [api.video account](https://dashboard.api.video/login) and navigate to [Domains](https://dashboard.api.video/project-settings/domains).
2. Click on "Set your allowed domains"

    

set your allowed domains api.video.png

3. In the conversation popup, input the domains or subdomains you want to allow.
4. Our customer care team will evaluate your request and provide you access as soon as possible 
5. You are all set! Your videos will only play from the list of domains you have listed.  

&nbsp;

## 3. Pricing

&nbsp;

As an api.video customer, you can use this feature at $20/month in your Production Account. 

&nbsp;

## 4. Documentation

&nbsp;

If you need more information, you can explore our docs [here](https://docs.api.video/delivery-analytics/domain-referrer)

&nbsp;

## 5. What are the other ways to secure your videos?

&nbsp;

Domain Restrictions is just one of the many privacy and security features that api.video offers to help you protect your videos and streams. We take security seriously and are constantly working to improve our platform. 

For instance, our infrastructure provides safe, replicated video storage.

Also, in addition to domain restrictions, [api.video](https://api.video) offers multiple solutions to secure your online videos:

1. [Private videos](https://docs.api.video/delivery-analytics/video-privacy-access-management) will allow you to secure videos individually, you can select which videos are private and which are public. This is a very powerful feature that will help you control and manage access to video in a granular way. Get started with Private Videos [here](https://docs.api.video/delivery-analytics/video-privacy-access-management).

2. The [custom domain](https://dashboard.api.video/project-settings/domains) feature lets you white-label the video experience you offer to your users, and also bypass firewalls that are configured to display content only from a finite list of approved domains. 

3. [api.video](https://api.video) offers a [video watermark functionality](https://docs.api.video/vod/add-a-permanent-watermark). It allows you to embed any watermark you want into your video to protect your content. For example, it is useful to apply watermarks if you are streaming copyrighted videos. 

4. Last but not least, if you use api.video’s player, you can also add your own [player themes](https://docs.api.video/delivery-analytics/player-customization). Among the options, you can [add your own brand logo](https://docs.api.video/reference/api/Player-Themes#upload-a-logo) on top of your player. While the video watermark gets burnt onto the video, this player feature only creates a front-end overlay on top of your video.

If you have any questions or feedback, please don't hesitate to reach out to our support team, at hello@api.video. Now time to set up your own playback restrictions based on your domains 😀

And if you don't have an api.video account yet but want to test the product, remember that api.video offers a [free signup option](https://dashboard.api.video/register), where you can test all of the product features.

Happy video day!

Restrict playback to specific domain with Domain Restriction

small_restrict_playback_cover.jpg

thumbnail_restrict_playback_cover.jpg

restrict_playback_cover.jpg

webhooks

Doug Sillars

JavaScript

Video bumpers are small video intro and exit scenes added to a video to help the viewer understand what they are about to watch.  The intro 'bumper' often has a title or description of the video that is to follow, and the outro 'bumper' provides a call to action on what the viewer can do next - now that they have watched the video.

At api.video, we add bumpers to many of our videos to provide context and a subject for each video, and the end bumper provides a 'call to action' after the video has been watched.

Adding bumpers to your video makes your video appear more polished, as an editing step was taken to add these to the raw video you recorded with your camera (or screen sharing tool).  It is often a manual task in your video editing software.

In this post, we'll automate the task of adding bumpers to a video recording.  We'll use the [Shotstack API](https://shotstack.io/) to add the bumper image and text titles to the front and end of a recorded video.  The completed video will then be uploaded to api.video, and be ready to play in seconds - removing several manual steps from the creation of your training videos!

You can also check out the API reference documentation for the endpoints used for this project: 
* [Webhooks](https://docs.api.video/reference/api/Webhooks#create-webhook)
* [Video status](https://docs.api.video/reference/api/Videos#retrieve-video-status-and-details)

## The "old way" of adding bumpers:

1. Create slides in Google Slides for the intro & outro
2. Take screenshots of the slides
3. Import the screenshots into iMovie
4. Add them to the video timeline
5. Encode the video
6. Upload the video to api.video


The downsides to this: 
Steps 1-4 are all manual, and are repeated for each video that I create.
In steps 5&6 there is a lot of waiting.  

## The "new way": bumper.a.video

Add images, text and video to a web form. Click "upload." The video will upload and have the bumpers added automatically - with no manual work, and (what seems like) a lot less waiting.



Let's see how it is built!


## Ingredients for the demo

* [api.video account](https://dashboard.api.video/register)
* Background image: a 16:9 image suitable for the background

* Watermark image.  In this demo, we'll use the api.video logo. It is sized to 100x100 pixels to fit properly on the video. The image is also transparent to ensure that there is no white "background" on top of the video.


* 4 Text fields

  * Intro title
  * Intro 2nd title
  * Outro title
  * Outro 2nd title


## The tools used in this demo

### Shotstack

The Shotstack API is a video editing API. You can splice together videos, add watermarks, and add text into your video using their API.  We'll use this API to create our bumpers:

1. Upload a background image (we use the same image for both bumpers)
2. Add a title and a 2nd title for both bumpers (text fields)
3. Add a watermark in the upper right corner for the entire video.

### api.video

The initial video will be uploaded to api.video. Once the mp4 has been produced, it is sent to Shotstack for 'bumper work.' Once the video with bumpers has been created via the Shotstack API, we will re-add the completed video to api.video, and provide a playback url.


## Creating the video

Once you hit 'send' on the form at bumper.a.video, a lot of action takes place:

1. The 2 images are uploaded to bumper.a.video/images.  Shotstack requires that the images be publically available on the internet for the api to process them.
2. The video is uploaded to api.video.  For security reasons there are a few steps in this process:

   * The node server makes 2 calls to api.video: creating a delegated token and a videoId (with the name & description provided by the user). 
   * A delegated token works as a public API token for upload only.  
   * Sending this and the videoID back to the browser, we can use the api.video [JavaScript uploader](https://docs.api.video/sdks/vod/apivideo-typescript-uploader) to securely upload the video to api.video.
3. Once the video is uploaded - a message appears to the user, and a button appears to update the status of the processing.

Now that the video has been uploaded to api.video, the rest of the work is done between the Node server, api.video and Shotstack. 

1. Shotstack requires a publically available video URL for processing the video.  We use the ```video.encoding.quality.completed``` [webhook](https://docs.api.video/reference/api/Webhooks#create-webhook) to monitor the creation of the videos at api.video. When the webhook alert tells us that the mp4 version of the video has been created, we know that the mp4 file is ready.  Now we can request the api for the URL of the mp4 (to send to Shotstack).
2. In order to build the bumpers correctly, we also need the duration of the video uploaded. The [video status](https://docs.api.video/reference/api/Videos#retrieve-video-status-and-details) endpoint tells us the duration of the video in the metadata section of the response.

### Creating the call to Shotstack

The Shotstack API works like an onion with many layers that must be defined to create a full video: 

Every video has a ```timeline``` that defines the overall video.

Each ```timeline``` has one or more ```tracks```.  Tracks sit atop one another (in our case, we will have a watermark track sitting atop the video track).

Each ```track``` has one or more ```clips```.  The clips are bits of video/text or images that have specific durations inside the track.

Each ```clip``` has an ```asset``` that defines the clip - this could be a string of text, or an image or a video file.



There are two tracks that play the length of the video - the watermark track - which has a single clip for the single image asset.

the code for this (using the NodeJS SDK) looks like this:

```
let watermarkAsset = new Shotstack.ImageAsset;
							watermarkAsset.setSrc('https://bumper.a.video/images/'+wmpath)
						//watermark to run full video 
						let watermarkClip = new Shotstack.Clip;
							watermarkClip.setAsset(watermarkAsset);
							watermarkClip.setPosition("topLeft");
							watermarkClip.setOffset({"x": 0.05,"y": -0.05});
							watermarkClip.setOpacity(0.5);
							watermarkClip.setFit("none");
							watermarkClip.setStart(0);
							watermarkClip.setLength(4+duration+4);
```

The clip is used to set the location - in this case the top left - with a bit of (x,y) adjustment, the opacity (50%), and how long the clip should play.

Since the intro and outro are 4 seconds, and the video has length ```duration``` - we set this clip to appear for the entire video.

The main track of the video has many clips (and assets).  Both the intro and outro have background and 2 text assets each, and the middle section has just the video clip/asset.

Shotstack does not like having clips with identical times. That means I cannot add the titles at the same moment as the background image. I could have perhaps placed the text items into different tracks to overlay the background - and then had them all start at the same time.  Instead I have the background appear, and then add each bit of text every 100ms:

```
						let titleIntroTextAsset =new Shotstack.TitleAsset;
							titleIntroTextAsset.setText(introTitle);
							titleIntroTextAsset.setStyle('chunk');
							titleIntroTextAsset.setColor('#ffffff');
							titleIntroTextAsset.setSize('x-large');
							titleIntroTextAsset.setPosition('center');
						let titleIntroClip = new Shotstack.Clip;
							titleIntroClip.setAsset(titleIntroTextAsset);
							titleIntroClip.setStart(0.1);
							titleIntroClip.setLength(3.9);

						let titleIntroTextAsset2 =new Shotstack.TitleAsset;
							titleIntroTextAsset2.setText(introTitle2);
							titleIntroTextAsset2.setStyle('chunk');
							titleIntroTextAsset2.setColor('#ffffff');
							titleIntroTextAsset2.setSize('large');
							titleIntroTextAsset2.setPosition('bottom');
						let titleIntroClip2 = new Shotstack.Clip;
							titleIntroClip2.setAsset(titleIntroTextAsset2);
							titleIntroClip2.setStart(0.2);
							titleIntroClip2.setLength(3.8);
```

The main text asset is present from 100ms into the video to 3.9s, and the secondary text asset is present from 200ms to 3.8s.  It looks kind of cool, as if they are boomeranging in and out, so I kept it this way.

The video clip in the middle has the volume set to 50%. It starts at 4s, and has a length of ```duration``` seconds.

```
						let videoAsset = new Shotstack.VideoAsset;
							videoAsset.setSrc(mp4Url);
							videoAsset.setVolume(0.5);
						let videoClip =  new Shotstack.Clip;
							videoClip.setAsset(videoAsset);
							videoClip.setStart(4);
							videoClip.setLength(duration);
```


All of this data is sent to the Shotstack API, and it begins processing the video - adding the watermark and the bumpers.

Once the video is completed (the Node server polls every 2s to get an update), a new video at api.video is created, using the source URL from Shotstack:


```
	function updateApiVideo(url){
							//ok so the video is created at Stostack
							const videoCreationPayload = {
								title: title, // The title of your new video.
								description: descr, // A brief description of your video.
								source: url, // If you add a video already on the web, this is where you enter the url for the video.
								
							}; 
							finalUpload =  client.videos.create(videoCreationPayload);
							finalUpload.then (function(finalVideo) {
								console.log(finalVideo);
								var finalvideoId = finalVideo.videoId;
								var finalPlayerURL = finalVideo.assets.player;
								console.log('finalvideoid',finalvideoId);
								console.log('finalPlayerURL',finalPlayerURL);
								//res.send(finalPlayerURL);
								videoProgressJson.finalVideoId = finalvideoId;
								videoProgressJson.finalPlayerURL = finalPlayerURL;
								videoStatus(videocreationList, videoId);



							});
						}
```

Finally - we use the same video encoding webhook we used earlier to wait until the 720p version of the video is ready for playback (looking for the new videoID, and the HLS version at 720p resolution).

The user - back on the webpage, can click the "update status" button and track this process.  The update status reports:

* Initial mp4 created
* Shotstack id
* Shotstack status
* New api.video videoID
* Final video at 720p

When the last item reports true - we add a link and embed the new video right onto the bumper.a.video page.

## Conclusion

Automating the mundane tasks we run regularly makes life easier. In this demo, I identified a process that was very manual - creating video bumpers for demo videos.  I used [api.video](https://api.video) and [Shotstack.io](https://shotstack.io) to automate the process, and thereby making the creation of video demos faster and easier!

If you have any questions or suggestions, please share them on our [community forum](https://community.api.video). If you still need to create your api.video account, you can do that in just a few moments by following [this link](https://dashboard.api.video/register). Happy building! 

Add bumpers to your video with bumper.a.video

bumperavideo-1.png

Restrict playback to specific domains with Domain Restrictions 

small_t02cw29ka-u04jtt0jcg3-549047173ac2-512.jpeg

thumbnail_t02cw29ka-u04jtt0jcg3-549047173ac2-512.jpeg

t02cw29ka-u04jtt0jcg3-549047173ac2-512.jpeg

Artem Matinian

React Native

Next.js

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

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

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

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

Check out the diagram below on how this works:

livestream-with-realtime-communication-diagram-ably

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

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

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

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

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

## Why do Livestream viewers need to be engaged?

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

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

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

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

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

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

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

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

What we’ll be leveraging:

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

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

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

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

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

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

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

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

And we pass it as a component to be rendered:

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

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

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

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

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

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

**Programmatically**:

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

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


**Manually from the dashboard:**

1. Click on the live stream in Live Streams

large_get-livestream-id.png

medium_get-livestream-id.png

small_get-livestream-id.png

thumbnail_get-livestream-id.png

get-livestream-id.png

large_copy-livestream-id-from-dashboard.png

medium_copy-livestream-id-from-dashboard.png

small_copy-livestream-id-from-dashboard.png

thumbnail_copy-livestream-id-from-dashboard.png

copy-livestream-id-from-dashboard.png

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

### Everyone loves Emojis!

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

large_Demo.gif

medium_Demo.gif

small_Demo.gif

thumbnail_Demo.gif

Demo.gif

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

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

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

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

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

### Spread the emojis

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

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

`import Ably from 'ably';`

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

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

large_get-ably-api-key.png

medium_get-ably-api-key.png

small_get-ably-api-key.png

thumbnail_get-ably-api-key.png

get-ably-api-key.png

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

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

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

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

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

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

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

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

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

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

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

The example will run on `localhost:3000`

Happy Hacking! 🙂

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

Boost your live streams

small_Frame 427319160.jpg

thumbnail_Frame 427319160.jpg

Frame 427319160.jpg

Boost your live streams with user engagement 

API client

Private Videos

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

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-analytics/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:

large_private-videos-1.png

medium_private-videos-1.png

small_private-videos-1.png

thumbnail_private-videos-1.png

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:

large_screenshot-2023-02-09-at-20-41-37.png

medium_screenshot-2023-02-09-at-20-41-37.png

small_screenshot-2023-02-09-at-20-41-37.png

thumbnail_screenshot-2023-02-09-at-20-41-37.png

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:

large_screenshot-2023-02-10-at-19-43-18.png

medium_screenshot-2023-02-10-at-19-43-18.png

small_screenshot-2023-02-10-at-19-43-18.png

thumbnail_screenshot-2023-02-10-at-19-43-18.png

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:

large_private-videos-post-15feb23.png

medium_private-videos-post-15feb23.png

small_private-videos-post-15feb23.png

thumbnail_private-videos-post-15feb23.png

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 [here](https://docs.api.video/delivery-analytics/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?

Delegated Upload

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

React

Uploading a video to [api.video](https://api.video) can be done in several ways: 

- **API:** make calls to get the mandatory information such as access token, create your fully customized video container, and finally upload your video file 🧑‍💻.
It’s the most secure way to upload, but it requires a backend to hide sensitive data and several API calls. Even though it’s easy, customizable, and reliable, you may need a faster way to do this.
- **TypeScript uploader:** [api.video](https://api.video) provides a [TypeScript uploader](https://www.npmjs.com/package/@api.video/video-uploader) that allows you to upload video directly to your workspace without calling the API. You can even choose between three upload methods 🤩!
Don’t forget you still have to implement a UI for your uploader if it’s not already done!
- **React upload button:** a few weeks ago, we quietly released the first version of our [React upload button on NPM.js](https://www.npmjs.com/package/@api.video/react-upload-button).
This new package allows you to display a fully customizable button in your application in less than a minute!
Today, we will see together how to get mandatory information from a Node backend to use this React component without exposing any sensitive data 🔒.

## **Prerequisites**

- [React](https://reactjs.org/docs/getting-started.html) and [NodeJS](https://nodejs.org/en/) knowledge
- For the simplicity of this example, we’ll use [Next.js](https://nextjs.org/), a React framework that provides an already implemented Node server. Basic knowledge of it can help you go through this tutorial.

Remember that any Node backend will work to get information, as seen in this article.

## Get started

You need an [api.video](https://api.video) account to work with our API and our packages.

[**Create a free one or log into yours just here.**](https://dashboard.api.video/login)

## 1. Create a new Next.js application

From your command line, run one of the below commands:

Once completed, open your new Next.js application in your favorite IDE and run it:

large_screenshot-2022-05-23-at-10-30-25.png

medium_screenshot-2022-05-23-at-10-30-25.png

small_screenshot-2022-05-23-at-10-30-25.png

thumbnail_screenshot-2022-05-23-at-10-30-25.png

next-js-new-application.png

## 2. Get the required packages

To complete this tutorial, we’ll need two [api.video](https://api.video) packages 🛠️

- **NodeJS client package:** to access the API with ease
- **React upload button:** to upload our videos

From your application root, run this command:

Video on demand

Live streaming

Analytics

Video infrastructure

Video player

See all features

Online learning

Short-form videos

Marketplace & E-commerce

Video messaging and recording

Quickstart guides

Documentation

Ecosystem catalog

Clients & SDKs

Community

Blog

Demos

Help center

NodeJS