Announcements

small_alexw.png

thumbnail_alexw.png

alexw.png

5a22d420c9a5a7-416105621512231968826.png

linkedin Alex W

Alexandre Willot

Product updates

## 1. What do domain referrer restrictions do?

&nbsp;

With Domain Referrer 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 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) and navigate to the [domains](https://dashboard.api.video/domains) sections.
2. Click on "Set your allowed domains"

    

large_set your allowed domains api.video.png

medium_set your allowed domains api.video.png

small_set your allowed domains api.video.png

thumbnail_set your allowed domains api.video.png

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

&nbsp;

As an api.video customer, you can create your own list of allowed domains, at no additional cost. 

&nbsp;

## 4. Documentation

&nbsp;

Depending on your use case, you might need more explanations, you can explore our domain referrer validation docs [here](https://docs.api.video/docs/domain-referrer)

&nbsp;

### Q&A

&nbsp;

**What are the other ways to secure your videos?**
&nbsp;
Domain Referrer 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](http://api.video) offers multiple solutions to secure your online videos:

1. [Private videos](https://docs.api.video/docs/private-videos) 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/docs/video-access-management-getting-started-with-private-videos).
2. The [custom domain](https://dashboard.api.video/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](http://api.video) offers a [video watermark functionality](https://docs.api.video/reference/watermarks). 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/reference/player-themes). Among the options, you can [add your own brand logo](https://docs.api.video/reference/post_players-playerid-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!

Introducing Playback Restrictions with Domain Referrer Validation

large_Playback restrictions with domain referrer api.video.png

medium_Playback restrictions with domain referrer api.video.png

small_Playback restrictions with domain referrer api.video.png

thumbnail_Playback restrictions with domain referrer api.video.png

Playback restrictions with domain referrer api.video.png

Introducing playback restrictions with Domain Referrer validation

Normal

small_t02cw29ka-u04jtt0jcg3-549047173ac2-512.jpeg

thumbnail_t02cw29ka-u04jtt0jcg3-549047173ac2-512.jpeg

t02cw29ka-u04jtt0jcg3-549047173ac2-512.jpeg

Artem Matinian

Tutorials

React Native

NodeJS

Next.js

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

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

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

We’ll leverage [api.video](http://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.notion.so/5c096d5c490d48ba989db87d3ffb1ed0))

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](http://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/docs/react-native-livestream-component), or stream directly from the [api.video](http://api.video) dashboard

With [api.video](http://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](http://api.video) React Player module

We are using [api.video](http://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](http://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](http://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

large_boost-live-stream-engagement.png

medium_boost-live-stream-engagement.png

small_boost-live-stream-engagement.png

thumbnail_boost-live-stream-engagement.png

boost-live-stream-engagement.png

Boost your live streams with user engagement 

Video trends

Have you ever wondered how a color can be represented in a video and how it can be reproduced on a wide variety of screens with almost the same rendering? Part of the answer lies in the concept of color space.

This first article will discuss the color theory and define the key elements necessary to build a color space for digital videos. A second part will follow and will focus on the most commonly known color spaces in the video/TV domain and how to analyze them using `ffmpeg`. So, let’s jump into the theory and talk about our eye capacities!

## A bit of biology

We cannot talk about colors without talking about our eyes. As you will see, it is important to understand its capacities and weaknesses to efficiently represent colors in digital videos.

First, it is important to understand that colors do not exist in reality. Our eye can detect a subset of electromagnetic wavelengths from 380 to 700 nanometers; this is called the visible spectrum, and colors are an interpretation of our brain based on the wavelengths received by our eye. It could be of a single wavelength or a combination of them. Some colors do not have any corresponding single light wavelength, like magenta (a mix of purple and red). Some other colors are indistinguishable, while others are composed of different light wavelengths; this phenomenon is called `metamerism`. A simple example is the yellow color, it could be a single wavelength at 580 nanometers, but it can also be a mix of red and green colors.

To understand that behavior, we need to dig more into how our eye works. At its core, it is composed of `rod cells` and `cone cells`. `rod cells` can detect light brightness, they are mainly efficient in dark environments and are almost entirely responsible for our night vision. `cone cells`, on the other hand, can detect colors mainly in medium and high light brightness; they are of three types, `S-cone`, `M-cone`, and `L-cone`. Each `cone cell` has a specific response to light wavelengths, and their peaks of sensitivity are respectively Blue (`S-Cone`), Green (`M-cone`), and Red (`L-cone`). They also have different sensitivity to brightness; concretely, the eye can detect more nuances of greens than it can for red ones or blue ones. To help you visualize how it works, here is a normalized view of the spectral sensitivity of each `cone cell` (keep in mind this is a normalized view, in fact, the peaks for each `cone cell` are not at the same level):

The Stockman and Sharpe (2000) 2° cone fundamentals

large_Cone-fundamentals-with-srgb-spectrum.png

medium_Cone-fundamentals-with-srgb-spectrum.png

small_Cone-fundamentals-with-srgb-spectrum.png

thumbnail_Cone-fundamentals-with-srgb-spectrum.png

Cone fundamentals with SRGB spectrum

From there, we can explain the `metamerism` phenomena. Using different light wavelengths makes it possible to generate the same response on `S-cone`, `M-cone`, and `L-cone`, producing the same color. This is because `cone cell` generate an average response in the face of several wavelengths; therefore, you can get a yellow from a single light wavelength but also by combining green and red, which produces an average response in between, which is the yellow. We can also explain why the magenta has no corresponding single light wavelength. This is because it is a mix of extremely visible colors in the visible spectrum (purple and red), and no in-between single light wavelength can produce the same response.

That is a lot of concepts to digest, I know, but to oversimplify, what you can remember is that:

1. color is a brain interpretation of light wavelengths received by our eye
2. our eye has a high sensitivity to brightness
3. our eye can detect colors with `cone cells` with a peak of sensitivity on Red, Green, and Blue
4. the same color could be produced using different combinations of light wavelengths

Don’t worry; we will dig into the important concepts that are used to represent colors in the following sections.

## How bright is it?

Each visible color is perceived by our eye with a different brightness, which depends not only on the light intensity (photons). Take these blue and green images:

medium_blue-and-green.png

small_blue-and-green.png

thumbnail_blue-and-green.png

blue-and-green.png

You perceive the green one as brighter, don’t you? This is because our eye is more sensitive to the Green color than it is to Blue. Remember what we said about `S-cone`, `M-cone`, and `L-cone`? They don’t have the same sensitivity regarding brightness. That perceived brightness of a color is called `luminance`, and it depends on the light intensity, of course, but also on the color itself, as we have just seen.

The `luminance` is measured in candela per square meter, also called `nits`. To give you an idea of the scale, a typical scene at sunrise is ~25 nits. The sun's disk at noon is ~1.6 billion nits! But don’t look at it! You risk retinal damages at ~100 million nits 😎.

## Are you dazzled?

Our eye can adapt to very wide `luminance` conditions. It can detect objects in very bright environments under sunlight but also in very dark environments during the night. The ratio between the highest `luminance` and lowest one can be as high as 15 000 000:1, but this is only achievable thanks to mechanical and chemical adaptions in our eye.

At a fixed configuration in a scene, our eye can distinguish `luminance` ratio from ~1 000:1 to ~15 000:1 depending on people and light conditions. When the ratio is higher, we start to lose information, and some colors disappear. This ratio between the highest and lowest luminance in a scene is called the `dynamic range`, and this is an important part to look at when trying to reproduce images that “feel“ more natural.

## What can we perceive?

To define a model to represent colors, we need to know how the colors are perceived by our eye.

The *"Commission Internationale de l'éclairage"* (CIE) studied human color vision and worked on a model to represent it. In 1931, they created the `CIE XYZ` color space to represent all visible colors. Hum, it is named a color space but keeps in mind this is not the same concept as the one used for digital videos. The Y component was deliberately designed to represent `luminance in this color space`. But for X and Z… it is a bit abstract. We need to understand how this space was built to understand them.

Before 1931, the CIE conducted several experiments with humans to match different source colors with a single light wavelength using a combination of red, green, and blue lights. The aim was to leverage how `cone cells` work with the metamerism phenomena. But... it didn’t work for all colors. In fact, it was sometimes necessary to add some of the 3 red, green, and blue colors to the source light instead of mixing them to get a match. This resulted in the concept of negative colors 😯. Using these experiments, the CIE was able to define a Red, Green, and Blue color space (`CIE RGB`) where all visible colors were represented but using negative values, which was not very convenient:

large_CIE-1931-RGB-color-matching-functions.png

medium_CIE-1931-RGB-color-matching-functions.png

small_CIE-1931-RGB-color-matching-functions.png

thumbnail_CIE-1931-RGB-color-matching-functions.png

CIE 1931 RGB color matching functions

To overcome this problem, the CIE worked on a mathematical transformation to get only a color space using positive values and luminance. We won’t enter the mathematical details here, which created the CIE XYZ color space.  This is an abstract coordinate system but with the advantage of expressing any visible color with only positive values:

The CIE 1931 XYZ color matching functions

large_2560px-CIE_1931_XYZ_Color_Matching_Functions.png

medium_2560px-CIE_1931_XYZ_Color_Matching_Functions.png

small_2560px-CIE_1931_XYZ_Color_Matching_Functions.png

thumbnail_2560px-CIE_1931_XYZ_Color_Matching_Functions.png

2560px-CIE_1931_XYZ_Color_Matching_Functions.png

Well, you are lost? This is not over yet; another used system to represent visible colors is the CIE xyY. This is an equivalent color space to the CIE XYZ where (x, y) are normalized values independent from the luminance Y. There are called the chrominance. This color space is particularly useful as it allows to build a flat representation of colors at a given luminance which is called a chromaticity diagram:

large_CIE1931xy blank.png

medium_CIE1931xy blank.png

small_CIE1931xy blank.png

thumbnail_CIE1931xy blank.png

CIE1931xy blank.png

Well, that diagram does not really represent all possible visible colors. First, you watch it through your screen, which cannot reproduce colors. But more importantly, it is a flat view that could be built for each `luminance` value. A complete representation would require a 3 dimensions graph, but this one is more convenient for talking about color spaces, and we will use it in the second part to talk about video color spaces.

Ok, just stop for a moment; there were a lot of things discussed, but what you should remember is:

1. the red, green, and blue lights cannot be used to reproduce all visible colors, even if I was initially convinced otherwise!
2. the CIE built an abstract system to represent any visible color called `CIE XYZ`, where `Y` represents the `luminance`
3. the `CIE xyY` is an equivalent system to the `CIE XYZ` where (x, y) coordinates are **independent** of the `luminance` (`Y`) and are called `chrominance`
4. we have a convenient way to represent visible colors using the `chromaticity diagram`, even if it is not exhaustive

## How does this map to a video color space?

Now that we have the theory behind color, let’s deep dive into how to represent it for digital videos.

## First, what colors do we target?

It is not practical in digital video to treat colors using all possible light wavelengths. In the field, capturing devices rely on red, green, and blue cells to acquire color, and in the same way, screens re-produce them by combining red, green, and blue lights. Therefore a digital color is really tight to the RGB model, like in the CIE experiments. So, the first thing to define in a video color space is the reference red, green and blue colors to use in the `CIE XYZ` color space. These are called `primary colors`. All reachable colors in the color space are contained within the triangle they formed in the `chromaticity diagram`. This also means that colors outside this triangle are not reproducible like we learned before! Here is the representation of the color space built by the CIE based on Red, Green, and Blue colors, e.g., `CIE RGB`. It is a really wide space, but as you can see, it does not cover all visible colors.

large_CIE1931xy CIERGB.png

medium_CIE1931xy CIERGB.png

small_CIE1931xy CIERGB.png

thumbnail_CIE1931xy CIERGB.png

CIE1931xy CIERGB

A color space also defines what is called the `white point`. Wait, what? Does that mean that we can choose what is white? Yes and no; when we talk about the `white point` we talk about a white object (in the common sense of white) observed using an ambient light. Depending on the ambient light, the object’s perceived color can vary. In digital video, the `white point` is often defined as a color temperature of 6500K. We won’t enter into the theory around why it is expressed using a temperature in Kelvin, but just remember that this value is, in fact, a white observed through the sun's daylight ☀️.

## Do we really need them all?

Human eye sensitivity to contrast (`luminance` difference) is not linear. It is more sensitive to darker tones than it is to brighter ones. In digital videos, colors are represented using discrete values; consequently, it is impossible to represent them all. It would be a waste of data to encode things our eye is not good at distinguishing. To solve that, a color space defines a mathematical function to distribute colors more efficiently, knowing our eye capacities. This formula is called the `transfer function`. The `luminance` corrected by this transfer function is called the `luma`.

A pretty common transfer function you probably heard of if you played with your camera or TV settings is the `gamma` correction. This is a power-law expression for which the exponent (the power) is named `gamma` hence its name. A `gamma` of 1/2.2, represented here, emulates more or less the response of our eye to contrast:

As you see in the produced grayscale, thanks to the transfer function, we use more dark colors than bright ones with `luma` compared to the linear `luminance` distribution just below; this is exactly the purpose when using a `transfer function`.

Another part defined by a `transfer function` in video color space is the `luminance` range in `nits` at which it operates and, so indirectly, the reachable `dynamic range`. Remember what we said about the sun disk at noon? When you watch it in a video, hopefully, it does not burn your eye. This is precisely because of the chosen range; there is no need to be able to encode such a high `luminance` unless we want to injure people. And in any case, the screen you are using cannot reproduce it!

So all of this is great, but now, if we step back, the fundamental role achieved by a `transfer function` for digital video is compression! Indeed, if we have a really good way to choose colors that matter to our eye, it means we can use less of them without losing much visual quality.

### Let’s focus on luminance

We discussed `luminance` and `luma`, but why does it matter? Can’t we use red, green, and blue instead? Well, we could, but it turns out this is not the most efficient way to represent colors in digital videos. Compression is really valuable in digital video; we already talked about the `transfer function`, but what if we can go deeper?

Again, we need to talk about our eye for that; if you remember, it is very good at distinguishing `luminance` but slightly less at distinguishing colors. To convince you about that, here is a simple optical illusion:

**TODO add an illustration**

Here triangles have the same color; can’t you see them? If you want to be convinced, click on the image.

As disturbing as it is, we can use this to our advantage. For that, we need to represent a color by decomposing its pure `luminance` from its color contribution (`chrominance`). We already talked about such a thing in a previous section, and it is the `CIE xyY`. Indeed, a variation named `Y'CbCr` is used because it is more convenient for computers. Here `Y'` stands for the `luma` (`luminance` corrected by the `transfer function`), `Cb` for the blue contribution, and `Cr` for the red contribution. To help you visualize how it works, here is a plane distribution of colors at a fixed `luma` (`Y’`):

 CbCr plane of the YCbCr color space, with a Y value of 0.5, Cb on the horizontal x axis going from -1 to 1, Cr on the y axis going from -1 to 1 as well.

large_1280px-YCbCr-CbCr_Scaled_Y50.png

medium_1280px-YCbCr-CbCr_Scaled_Y50.png

small_1280px-YCbCr-CbCr_Scaled_Y50.png

thumbnail_1280px-YCbCr-CbCr_Scaled_Y50.png

Simon A. Eugster, Public domain, via Wikimedia Commons

If you look closely, this linear representation is, in fact, a stretched view of the primary colors triangle in the chromaticity diagram.

Now, with this system to represent a color, we can compress the color information even further. As we said, our eye is not good a distinguishing the chrominance compared to the luminance, so we can keep the luminance data for all pixels and use fewer chrominance values; why not take 1 out of 2 pixels? This is exactly what is done in digital video, known as chroma sub-sampling. Honestly, it is a bit more complex than just taking 1 pixel out of 2 for chrominance. A common compression is 4:2:0, meaning you take 4 pixels of luminance and 2 pixels of each chrominance on the first line, then 4 pixels of luminance and 0 pixels of each chrominance in the second line, resulting in an overall compression of 50%! It exists other compression schemes like 4:2:2, 4:1:1, 3:1:1… you get the idea it tells you how many chrominance pixels you take compared to luminance ones, and based on the scheme, you get a more or less compression ratio:

Most widely used chroma subsampling formats.

small_Common_chroma_subsampling_ratios.svg.png

thumbnail_Common_chroma_subsampling_ratios.svg.png

Common_chroma_subsampling_ratios.svg.png

Here is an image with and without chroma sub-sampling, as you can see the difference is small:

This image shows the difference between four subsampling schemes.

small_Colorcomp.jpeg

thumbnail_Colorcomp.jpeg

Colorcomp.jpeg

Something is still missing here; how do we convert an `R'G'B'` color to `Y'CbCr`? There is no absolute formula to do this transformation, and that’s something a color space must define.

Here is an example of the `luma` and `chrominance` calculation given its Red, Green, and Blue parts:

We can immediately see from this formula that the Green part contributes more to the `luma` than the Red and, finally, the Blue. Of course, this is because of our eyes, if you remember what we said about our `cone cells`. All these coefficients (also for `Cb` and `Cr`) need to be defined by a color space to ensure the conversion of a `Y'CbCr` color into its `R'G'B'` equivalent.

Now, a bit of history, you will often see `YUV` used interchangeably with `YCbCr`. In fact, `YUV` terms come from analog TVs, and `YCbCr` is its digital equivalent. As we have seen, the `Y` part is the `luminance`, but it is no more, no less than the black and white part of the color. It was used at first on black and white screens to convey images. When color TVs arrived, there was a choice to make whether to switch on a new color system like `RGB` or keep the black and white signal `Y` and add to it the color contribution or chrominance `U` and `V`. Of course; the second option was chosen to avoid a big breaking change between color and black and white TVs. This also explains why this color system is so widely used in video.

### How many colors can we use?

Because colors are represented in a numeric format, we need to decide the number of bits that will be used to store them. Whether you use `RGB` or `YCbCr` you will need to encode three channels to encode a single color. The number of bits used to encode a single channel is called `color depth`. This number is directly linked to the range of colors it can represent. In the video domain, common values are:

- 8 bits: ~16 million colors
- 10 bits: ~1 billion colors
- 12 bits: ~69 billion colors

Remember that even if it seems huge, our eye can see much more colors than that.

So, you may wonder why don’t we use a bigger `color depth`. This is because your video size would dramatically increase. Taking a single image in a 4K video requires encoding ~8 million colors, one for each pixel, representing ~285Mb using 12 bits `color depth`. And we only talk about a single image. Of course, they are ways to compress that, but this is just to give you an idea of how big it can be, even for a computer.

In that case, why don’t we use a smaller one? Like every time with computers, this is a trade-off. If we use a smaller `color depth` we may not be able to produce enough color shades. When looking at a gradient image, the transition between colors may not be smooth, and you will start to see some bands appearing. This effect is known as `color banding`, and of course, we want to avoid that. Here is an example with color banding visible in the sky:

small_The_Foston_by_pass_on_the_A1_North_-_geograph.org.uk_-_1068397.jpg

thumbnail_The_Foston_by_pass_on_the_A1_North_-_geograph.org.uk_-_1068397.jpg

The_Foston_by_pass_on_the_A1_North_-_geograph.org.uk_-_1068397.jpg

### Don’t forget analog TVs

We cannot talk about digital videos without talking about analog ones. Due to technical constraints, the analog video signal was not only conveying information about colors; there was also non-visual data to sync new lines on the screen, for example. Also, due to its analog transport, colors were not always accurate. Because of that, when digital videos arrived, it was decided to reserve some values about the color data to encode non-visual information or conversion problems. This is conducted by creating the color `limited range` or `tv` range.

Concretely, not all possible values were used to encode the color information. At that moment, colors were encoded using values from 0 to 255 (in 8 bits). It was decided to use values from 16 to 235 for `luma` and 16 to 240 for `chrominance`. For the `luma` value, 16 means full black, and 235 means full white. That concretely means that we have fewer possible values to express colors. This is always used in digital videos for higher `color depth` for retro-compatibility, even if reserved values are unused. This is a specificity used in videos and TV monitors; computers, on the other hand, use what is called a `full range` or `pc` range to express colors. It means all values from 0 to 255 are used to encode the color information. 

The `color range` information, either `limited` or `full` is therefore critical in a color space to be able to reproduce colors accurately.

## Conclusion

Great, you stayed focused until here! Here is a quick recap of what we have learned so far. To build a color space for digital videos, we need to define:

1. Where are the `primary colors` and the `white point` to define what visible colors will be represented
2. What is the `transfer function` and its range in `nits` to use colors that matter to our eye in the best efficient way
3. What coefficients are used to convert `YCbCr` color into classic `RGB` and vice-versa?
4. What is the `color depth` used to know how many colors can be represented
5. Whether we use `limited range` (`tv`) or `full range` (`pc`) to encode color information

Is it all? Well, it would be too easy; a video color space also defines frame per second, resolution… and many other details. Here we only focus on generic concepts that define colors by abstracting video technical constraints.

If you want to learn more, stay tuned; in the next article, we will discuss standard color spaces in digital videos and how to identify them using `ffmpeg`.

Color space in Video (part 1)

people_icon.svg

Alix, Lou-Anne & Louise

Company

As a full-remote start-up evolving in an ever-changing and highly-innovative market, we rely on our core values to shape our culture and guide our ways of working to stay ahead of the market. These values are not just words on a page but the principles we want to live and breathe daily.

This article will explore our core values and how they help us create a positive and productive remote work environment.

large_about_us_desktop.png

medium_about_us_desktop.png

small_about_us_desktop.png

thumbnail_about_us_desktop.png

about_us_desktop.png

## Act fast

Acting fast is essential in a tech start-up environment. Priorities are constantly changing, and the speed of actions is crucial to stay ahead of the competition.

When we act fast, it creates a sense of urgency and momentum. Therefore, we encourage our team to make rapid decisions and take actions to move projects forward. While we take the time to pause, observe, share, analyze, and think, it doesn’t slow us down. We do it in productive and agile ways, allowing us to be more responsive to our market.
&nbsp;

&nbsp;


**"In the Customer Care team, acting fast is the key to ensuring that we provide timely and actionable responses to our users. In certain situations, such as during a live stream, quick and effective solutions are critical to avoid unpleasant experiences for the customer.**

**When we receive a customer request, we shift our priorities and focus on finding an appropriate answer to reduce response time and ensure satisfaction. To do so, we use our internal communication channels to identify relevant stakeholders and collaborate with them to address client issues, sometimes involving several teams to solve a single issue."**
>Joséphine, Account Manager (Bordeaux, FR)

&nbsp;
&nbsp;
## Grow through humility

By approaching our work with a humble attitude, we create a culture of learning and growth, where everyone has room to share their ideas and can be sure their voices are heard. 

We encourage feedback, seek out learning and development opportunities, and always look for ways to improve. We consider there are no silly questions, and everyone is valued for their curiosity or contribution.  

By growing through humility, we are able to stay agile and adaptable in a constantly changing market.
&nbsp;

&nbsp;

**"I can feel humility among team members when I have new ideas and approaches, which makes me feel respected and encouraged to collaborate. At the end of a meeting or call, our team can come up with innovative solutions that will contribute to our growth."**
>Diego, technical Support Engineer (Lyon, FR) 

large_Team_presentation.jpg

medium_Team_presentation.jpg

small_Team_presentation.jpg

thumbnail_Team_presentation.jpg

Team_presentation.jpg

&nbsp;
&nbsp;

## Be reliable

As a remote company, we understand the importance of reliability. Our clients and peers rely on us to deliver high-quality work, meet deadlines, and be responsive and supportive to their needs. 

What matters to us is not the number of hours worked or physical presence but rather the quality of the delivery. While we don't expect everyone to follow a traditional 9-to-5 schedule, we expect everyone to be responsive, dependable and take the necessary time to assist one another when their contribution is needed to solve issues or create value. 

This is how we build trust both internally and externally, which is essential for long-term relationships.
&nbsp;

&nbsp;

**"Joining a tech company with no technical background can be intimidating. You’re wondering if you’ll understand the product well and if you’ll be able to contribute to meetings and have an impact on operations. At api.video, it’s possible thanks to the amazing talents we have. 
&nbsp;
We are surrounded by individuals who take the time to answer any questions you may have and explain concepts you may not grasp. This support further extends in projects where team members from different teams join together to solve issues and trust in the work they each put in."**
>Louise, Head of People (Amsterdam, NL)

&nbsp;
&nbsp;
## Be transparent

As a remote company, it is even more important for us to track and share information. 

We document most of our processes and actions to ensure transparency and availability of information at any moment.

We encourage our team members to communicate their schedules and availability with their colleagues so that everyone can collaborate effectively and efficiently.

We also share our goals, progress, and challenges in and across teams and ask for help when needed. Our feedback culture is important to us: having transparent feedback helps us improve and celebrate our actions. Therefore, openness and honesty between us are key to continuous improvement and a nice place to work.

&nbsp;
&nbsp;

**"Being transparent at api.video means that whenever I ask anyone a question about anything, I receive a clear answer and an explanation of the reasoning behind it. Having more context on a topic helps me get a bigger picture and a more thorough vision.**
**Also, I can say what I really feel and be confident it will be listened to and taken into consideration."**
>Clément, System Engineer (Toulouse, FR)

&nbsp;
&nbsp;
## Be bold

In a start-up environment, it's important to maintain an innovative mindset. That's why we give our coworkers as much space as they need to be as bold as they can. Being bold doesn't mean we take inconsiderate risks, but we encourage our team to be innovative and creative in their work.

We value boldness as it allows us to challenge the status quo and find new and better ways of doing things, which is essential to differentiate from the competition.

&nbsp;
&nbsp;

**"Being bold for me at api.video means that I am not afraid to speak up, take initiatives to make things happen, own my mistakes, and sometimes take calculated risks. I feel like my opinion counts, allowing me to drive a positive change and make an impact."**
>Aya, Front-end engineer (Belgrade, SRB)

&nbsp;
&nbsp;
## Take ownership

Taking ownership means taking responsibility for our work and actions. We encourage our team to nurture accountability and drive their projects strongly. 
We trust our coworkers and encourage them to do their best. The whole team is ready to help you if you need support and coaching. 

Decision-making is supported by continuous communication on progress and outcomes across the company.

&nbsp;
&nbsp;

**"When I first started working here, we began exploring ways to better serve new customers. One of my team members took the initiative to build a new onboarding process from scratch. He went above and beyond to ensure we offer it to new customers who just signed up, in order to deliver value as quickly as possible."**
>Christian, Head of Customer Care (Canary Island, ES)
&nbsp;

&nbsp;


These values - acting fast, growing through humility, being reliable, transparent, bold, and taking ownership - guide the team in creating a positive and productive remote work environment. 

It is important to note that these values alone don’t drive the company’s culture, but it is the team members who embody these values in their daily behaviors and actions. By living out these values, api.video team fosters an environment where everyone has the opportunity to learn, grow, and make a positive impact.

If you want to know more about api.video, feel free to visit [our website](https://api.video/), and if you are interested to join us, please check out [our career page](https://jobs.api.video/)!

large_apivideo_core_principles.png

medium_apivideo_core_principles.png

small_apivideo_core_principles.png

thumbnail_apivideo_core_principles.png

apivideo_core_principles.png

Empowering through values: api.video's core principles

It’s natural that one will think about integrating videos into their project. There are so many use cases for a video that we cannot even start to count. From user-generated content like Youtube, TikTok, Instagram, and the likes, through e-learning apps, personal trainers, e-shopping, and the list goes on and on, there’s no limit to what you can do with moving images that zoom across the fiber optics as digital signals from one place to another. 

Is there are catch, though? How easy is it to implement videos into your project, app, or website? in this article, we will look at the options, challenges, and solutions for getting video infrastructure up and running.

## The Casual Cloud Vendor ☁️

Probably, the first thought of every developer (with a mainstream line of thinking) is AWS. It comes naturally, as most of the existing infrastructure is probably set up on AWS, Azure, or the like. Who can blame you? it’s convenient, easily scalable, and…. can get quite expensive. Not only that, it might be difficult to implement as well; think about:

- Having DevOps that specialize not only in AWS but also in the video area
- If you don’t have such a team, then you’ll need to hire people for that.
- Time-consuming setup
- High price

small_So you wanted to use AWS to save costs.png

thumbnail_So you wanted to use AWS to save costs.png

So-you-wanted-to-use-AWS-to-save-costs.png

Here’s the implementation list of all the different services to deploy and setup to have video-on-demand with AWS:

large_AWS requirements.png

medium_AWS requirements.png

small_AWS requirements.png

thumbnail_AWS requirements.png

AWS-requirements.png

That’s not all; you’ll also have to build the client that uploads the videos yourself and plus all of the front-end. You can already understand the costs and time involved with this project. 

“Alright”, you say, now what? isn’t it better to just build the whole architecture myself? what’s the point of using AWS if it’s costly, complex, and resource intensive?

## The DIY solution 🛠️

Let’s go with this simple idea. You want to create an upload button where users upload their videos to your app or website. You already have quite a few users and you know that the feature will be adopted quite quickly, right?

The minimum requirements are:

- Rent a server for $120/month (i.e Cloudflare, DigitalOcean and the likes) with the following available resources (vCPU: 4, 16GB of memory, 250GB HDD)
- Install a web server like Apache, Nginx
- Create a hosting logic on your server
- Find a third-party video player
- Create your application and add an upload button to allow your users to send their videos created with their last smartphone model.
- Allow the user to play their videos freshly uploaded with the video player
- Deploy your application on the server

It does sound easier than AWS, right? why is the AWS solution so complex? why all of these services?

You launch the service, and it seems to run smoothly for a few hours, and then you start to get some emails from customers, like:

MichaelScott777 says:
```
💡 My playback is really choppy, and it takes forever for the video to load! why are you so slow (that’s what she said 😀)
```
TheShrute909 exclaims:

```
💡  Why is the video is so slow?!?!?!??!!?!? it takes the video 5 hours to show! help!!1
```

Your users are calling out that the playback experience is poor. There is a lot of buffering before the video starts to play.

So you start Googling around, and you discover that you can’t just upload the video; you need to encode it with different qualities, plus if you want to stream the videos, you also need to implement some specific protocols, and you start going down the rabbit hole: HLS, DASH, H.264, HEVC, AV1 and etc. “WHAT THE HELL IS ALL OF THIS?” you ask.

Then you stumble upon something that seems like salvation: [FFmpeg](https://ffmpeg.org/)! a video processing “Swiss knife” you hail in victory and pound yourself on the chest. You’ve made it. After several weeks of sleepless nights and 59.7 coffee cups later, it’s installed, it’s running, and magically does the job (you don’t really understand how completely, but it works).

thumbnail_solution.png

solution.png

Everything seems to run smoothly, but you are afraid to touch anything as you focus on your main product, and if you start messing around with the video monster again, you might sink more time into it. But then your users start to ask for more features around video:

CryptoKing001 is asking for this feature:

```
💡 Heellooo!, how can I know how many people watched my videos? <3 <3 <3
```


You grab your head in fear, and the anxiety builds up. You can’t sink in more resources into that video thing, and that 3rd party video player I’ve used doesn’t provide analytics (!!!!). So, you decide to outsource the whole thing, although you did have a limited budget setup for this project, so you go over budget.

The app seems to be running fine for a few weeks, and many users upload their videos daily. You check your monitors and discover that you are running out of disk space! the product is minutes from being down because of all of this video thing; eventually, it goes down, and you generate some bs message to your users about vertical scalability that they have no idea what you are talking about. Eventually, you rent more servers and add more disk space; the product is up again, but, again, you are way over budget already with that analytics stuff; now you have to pay more for space (argh!). At least you’ve evaded a disaster, but you get a new complaint:

obee1kanobeeeeeeeeeeeee writes:
```
💡 why the videos don’t play after I upload them???? I have to wait for 5 minutes before it plays. MY VIEWERS ARE COMPLAINING!!! FIX IT!!!
```

Your head is already missing half of the hair it used to have before you started the project, and now this?! 

You start investigating and find out that you have 100% CPU utilization on the video server; remember that magical salvation that you installed on the server: FFmpeg? now it gobbles up most of the CPU to encode the videos. So, you write another bs message to your users about encoding and some stuff you don’t even know about (and your users don’t even care), and you start sinking more money into the project. You buy more CPU and start scaling again.

Few months past. You don’t need to buy shampoo anymore (at least that’s a good thing, you can save some money), most of your attention has shifted into scaling these wretched video servers, you are now an expert in video encoding and delivery, but you are losing users as they have no interest in your product, as all of your investment and resources went into this video project black hole.  You’ve hired more engineers that are dedicated to doing the video project, and the budget for the video project already went out of control a long time ago.

small_I know kungfu.png

thumbnail_I know kungfu.png

I-know-kungfu.png

You look back and think, how did I end up here? what could I have done better? would it be better to go with AWS? or maybe there are other solutions I could have considered?

## The Perfect Solution

Like with any other service, reinventing the wheel would probably lead to huge financial implications, but as we’ve seen AWS is not perfect as well. However, there are APIs that can solve this problem by providing you with a scalable and easy-to-use service, like api.video.

- With api.video creating an upload scenario and even more is a matter of minutes.
- Much lower cost than AWS (check the cost calculator [here](https://api.video/pricing/aws/)) or DIY
- Scalable and reliable

Check out the [get started guide](https://docs.api.video/docs/get-started-in-5-minutes) to get started in 5 minutes with api.video

large_should I build my video infrastructure from scratch.png

medium_should I build my video infrastructure from scratch.png

small_should I build my video infrastructure from scratch.png

thumbnail_should I build my video infrastructure from scratch.png

should-I-build-my-video-infrastructure-from-scratch.png

Should I build my video infrastructure from scratch? Challenge accepted

Introducing Custom Domains — a feature that lets you stream videos or live streams from your own domain (such as `videos.yourdomain.com/` or `livestreams.yourdomain.com/`).

&nbsp;

Why use Custom Domains? Because it lets you brand your video URL, comply with network security, and increase your SEO ranking. Let’s look at its benefits in detail, pricing, and explain how you can start using your own domains.

&nbsp;

## Benefits of Custom Domain

&nbsp;
### 1. Branded Experience

With Custom Domains, you can create a fully branded URL for your viewers. This means that when your audience watches or shares videos or live streams, they will only see URLs with your domain. They will never know you are relying on api.video to actually serve these videos.

&nbsp;
### 2. Compliance with Network Security Requirements

Using a custom domain can help you comply with network security requirements. 

If you have a firewall in your organization, Custom Domains helps meet the firewall requirements. This ensures that your videos are viewed without any issues, and you can maintain the security of your network. 

For example, if you are working in a university or public institution, there are probably network restrictions that could prevent [api.video](http://api.video) content to be played, and that is when you will need a custom domain.

&nbsp;
### 3. SEO Boost

Improving search engine traffic and viewer confidence with brand-relevant URLs is another key benefit of using Custom Domains. By using your own domain name, you can create a more memorable and recognizable URL that is relevant to your brand. This can help improve your search engine ranking and attract more viewers to your videos.

&nbsp;

## How it works

&nbsp;
Without custom domains, your users will see URLs such as 

`https://live.api.video/{livestreamid}` or `https://vod.api.video/{videoid}`

&nbsp;
With a custom domain set, your users will see your own URL. Depending on how you set it up, it could look like anything! Here are 2 examples for your inspiration:

`https://videos.yourdomain.com/{videoid}` or `https://livestreams.yourdomain.com/{livestreamid}`

&nbsp;
## How to enable Custom Domains for your account 
### 1. Reaching out to api.video

The starting price of Custom Domains is $60/month. 

Here are different ways you can request access to Custom Domains on your account:

- From the [dashboard](https://dashboard.api.video)
- From the docs: [Custom Domains page](https://docs.api.video/docs/using-custom-domains)
- Alternatively, you can simply [contact](https://www.notion.so/Introducing-Custom-Domains-bf6fdcfdb4e24d4d9827b9d7fac17385) our support team via email (hello@api.video) or by reaching out on api.video’s chat.

&nbsp;

### 2. Setting up your custom domain (Optional read 😀)

As explained in step 1. above, setting up you own domains is a manual process. It requires an exchange of information between you and our customer care team. 
Still, if you are curious to know how this works, we will explain it below.

&nbsp;



large_api.video custom domains flow.png

medium_api.video custom domains flow.png

small_api.video custom domains flow.png

thumbnail_api.video custom domains flow.png

api.video custom domains flow.png

**2.1 Updating DNS records**

You need to update your custom domain’s DNS records. Simply add a `CNAME` for every custom domain that you want to use. Each custom URL should point to api.video’s corresponding CDN.

- `video.mycustomdomain.com CNAME` → `vod.api.video`
- `live.mycustomdomain.com CNAME` → `live.api.video`
- `embed.mycustomdomain.com CNAME` → `embed.api.video`
- `collector.mycustomdomain.com CNAME` → `collector.api.video`

&nbsp;
> The steps to update your custom domain’s DNS records are determined by the domain host that you use. Contact your domain host if you are unsure about the specific steps of updating the DNS records.
> 

Depending on your use case, you might need separate domains for `video`, `live`,  `collector`, and `embed` services. This should be done for **every custom domain** that you want to use.

| Your use case | Custom domains needed |
| --- | --- |
| Live streaming | video.mycustomdomain.com, live.mycustomdomain.com, embed.mycustomdomain.com, collector.mycustomdomain.com |
| VOD and Live streaming | video.mycustomdomain.com, live.mycustomdomain.com, embed.mycustomdomain.com,collector.mycustomdomain.com |
| VOD only | video.mycustomdomain.com , embed.mycustomdomain.com,collector.mycustomdomain.com |
| VOD using your own custom player | video.mycustomdomain.com |

&nbsp;
**2.2 Providing TLS certificates**

api.video requires a valid TLS certificate for every custom domain that you want to use.

Simply upload the certificates for every custom domain through the dedicated support channel.

&nbsp;
**2.3 Start using your new video or live domain**

After you have configured your DNS records and provided the corresponding TLS certificates, api.video enables traffic for each custom domain that you want to use.

This process usually takes a few hours. If you have any questions, reach out to us!

&nbsp;

## Conclusion

In this article, we have described how custom domains can be helpful to your business (branding, SEO, avoiding network restrictions) and how you can easily set your own custom domains with api.video. We hope the content was clear. Now, try setting up your own 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!

&nbsp;

&nbsp;
### FAQs

&nbsp;

**On which domains can I apply custom domains?**

Depending on your use case, your customers will see these URLs when you deliver videos or live streams to them.

`video.mycustomdomain.com`,`vod.mycustomdomain.com`,`embed.mycustomdomain.com`,`collector.mycustomdomain.com`

&nbsp;

**What is the exact cost of custom domains?**

It depends on your use case. 

- If you use [api.video](http://api.video) only for video or live streaming, the price will be $60/month.
- If you use api.video for both video and live streaming, the price is $100/month.

&nbsp;

**How often do I need to update my TLS certificates?**

Each TLS certificate has an expiry date. Since you manage these certificates, [api.video](http://api.video) will not be able to alert you when they expire. To ensure uninterrupted service, make sure that you always renew your TLS certificates and provide them to api.video before they expire.

Blog

Introducing playback restrictions with Domain Referrer validation

Boost your live streams with user engagement

Color space in Video (part 1)

Empowering through values: api.video's core principles

Should I build my video infrastructure from scratch? Challenge accepted

Introducing Custom Domains for api.video

Switch to api.video in minutes: Latest updates on our import tool

Build your Flutter live streaming application with api.video

Switch to api.video Swift player

The comeback of specialized hardware