Artificial intelligence

Announcements

small_cedric.webp

thumbnail_cedric.webp

cedric.webp

Cédric Montet

large_api-video-blog-product-updates.png

medium_api-video-blog-product-updates.png

small_api-video-blog-product-updates.png

thumbnail_api-video-blog-product-updates.png

api-video-blog-product-updates.png

Product updates

Building on our recent launch of [AI transcription](https://api.video/blog/product-updates/AI-transcription/) in our [Video Model Hub](https://api.video/blog/company/video-model-hub-ai/), we're excited to introduce the next big thing — video summarization!  

&nbsp;  

Now, create summaries and key takeaways automatically from any video in just seconds—no more wasting time scrubbing through hours of footage. Powered by Whisper AI, AI summarization combines speed with accuracy—a game-changing addition to your video strategy. 

&nbsp;  

_See it in action in the video below._

## Save hours and focus on what matters to your business

With [AI summarization](https://api.video/product/ai-features/summarization/) built into our API, you save time that can be invested in more valuable tasks.

&nbsp;
 
- Eliminate the need to juggle multiple APIs or external services. With a single API call, you get instant video summaries for the videos you upload.
- No more waiting for weeks on end. AI-powered video summaries are generated just seconds after your video upload.
- No extra development work required. Summarization is built directly into the api.video player or available as VTT files for seamless use on other platforms.

## Choose an API that keeps your content safe

We leverage only open-source AI models to ensure maximum transparency and reliability. Also, your video data is *never* used to train models, sold, or shared with third parties. Your information remains exclusively yours.

&nbsp;

There are no external partners involved in the processing of your data and everything takes place within our own infrastructure. 

## Summarize your videos with accuracy

AI summarization can save you lengthy hours of human work. What do you get? 

•	**Accurate Summaries** adjusted for the video’s length, highlighting the essentials.

•	**Key Takeaways** timestamped to show the top three moments, depending on the video’s duration.

&nbsp;

>The best part? You’re free to choose exactly what you need for your videos and only pay for that—whether it’s summaries, key takeaways, or both.

## Upload a video and get the very first summary

Video summarization is available both from the API and the dashboard:

&nbsp;
 
- To enable it via the API, follow the documentation [here](https://docs.api.video/vod/create-summaries).
- From the dashboard, simply press the toggle saying ‘Video summarization’ when you upload a video

&nbsp;


The good news? This works for not only new videos but also all your existing, already uploaded content. So you can go back to your videos, turn the toggle on, and summarize your entire video library!

&nbsp;

Pricing is straightforward — just $0.10 to generate an abstract per minute of video summarized and $0.05 to generate takeaways. 

## It has just begun!

This is just the start of something game-changing. The Video Model Hub is set to revolutionize the way you manage and utilize video content. Whether it's product demos, training sessions, or marketing assets, you'll transform your entire workflow—gaining unmatched efficiency while staying in full control of your video library. The future of video content is here, and it’s about to elevate your strategy like never before.  

&nbsp;  

Ready to get started? [Try it today](https://dashboard.api.video/overview)!

Introducing AI video summarization: Derive key moments from hours of content 

small_Introducing AI video summarization_ turn hours to key moments in seconds (1).png

thumbnail_Introducing AI video summarization_ turn hours to key moments in seconds (1).png

Introducing-AI-video-summarization.png

Normal

In early July, we announced the [Video Model Hub](https://api.video/blog/company/video-model-hub-ai/) to help you benefit from the AI revolution without needing to set up servers or models, juggle prompts, or implement third-party services yourself.


&nbsp;

The adoption of the beta in the sandbox has been incredible. Over 11,000 videos were augmented by AI in the first 30 days, and we received countless requests asking when these features would be available in production.

&nbsp;
&nbsp;

**Today, we’re excited to launch the first one powered by the Video Model Hub: AI transcription.**

&nbsp;
&nbsp;

See it in action ⬇️

## Transcribe your videos in seconds, no hassle

- Say goodbye to waiting weeks for your transcription agency: transcripts are available a few seconds after your video is uploaded
- No more reviewing or back-and-forth adjustments over timestamps, each spoken word is aligned with the transcript for accuracy and efficiency
- Stop juggling multiple APIs or external services. One API call away from instant transcription
- Best of all, no additional development work is needed. Transcription is built into the api.video player or easily accessible as VTT files if you're using another platform

&nbsp;

The [AI video transcription](https://api.video/product/ai-features/transcription/) feature can recognize and transcribe videos in 33 languages!

## Full control over your video data

- **Open source models** we only use open source models to ensure transparency and maximize reliability. Transcriptions are generated by the most powerful model to date: Whisper.
- **Your data is yours, and yours alone** We do not use your data to train models, nor do we sell or share any data generated from your videos with third parties.
- **Secure, in-house processing** AI models are hosted and run within our own infrastructure. This means your data remains securely within the api.video environment, with no information being sent to external partners, third-party SaaS providers like OpenAI, or any other outside entities.

## Get your first transcripts in minutes

Video transcription is available both from the API and the dashboard:
- To enable it via the API, follow the documentation [here](https://docs.api.video/vod/generate-transcripts).
- To enable it via the [dashboard](https://dashboard.api.video/register), simply press the toggle saying 'AI transcription' when you upload a video.

&nbsp;
&nbsp;

And the best part? This works for not only new videos but also all your existing, already uploaded content. You can instantly transcribe your entire video library!

&nbsp;
&nbsp;

The pricing is based on your video length: a one-time fee of $0.10 only per minute of video transcribed.


&nbsp;
&nbsp;

**Transcription is the first AI feature from the Video Model Hub.**
&nbsp;

**Stay tuned, many more features are coming in the next few weeks!**


The wait is over: AI video transcription officially launches today

Let your videos speak volumes with AI-powered transcription

small_Let your videos speak volumes with AI-powered transcription (1).png

thumbnail_Let your videos speak volumes with AI-powered transcription (1).png

videos-speak-volumes-AI-powered-transcription.png

Company News

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

&nbsp;

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

&nbsp;

This is why we are thrilled to unveil how we are bringing [AI into video](https://api.video/product/ai-features/), where we are heading and how you can get more value from it!

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

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

&nbsp;

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

&nbsp;

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

&nbsp;

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


&nbsp;

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

&nbsp;

Helping you to benefit from the [AI revolution](https://api.video/use-cases/generative-ai/) by abstracting all the underlying complexity became obvious and a natural next step in our evolution.

&nbsp;

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

&nbsp;

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

&nbsp;

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

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

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

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

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

&nbsp;

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

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

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

&nbsp;

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

### 1. Summarization of long-form videos

Upload a video in English, Spanish, French, Portuguese or Chinese and [get a text summary](https://api.video/product/ai-features/summarization/) of 120 characters with the 3 key takeaways discussed in the video (within seconds!). Ideal to index or preview long form recorded meetings or courses!

&nbsp;

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


### 2. Transcription of your video in seconds

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


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

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

&nbsp;

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


>_Try it for yourself now by uploading a video in your [sandbox account](https://dashboard.api.video/overview). To use the features, simply turn on the toggle for 'AI transcription' above your video._ 

## What’s next

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

&nbsp;

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

&nbsp;

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


AI  >< Video: The Video Model Hub unveiled

AI-thought-leadership.png

Lights, Camera, AI Action! Discover our AI features

Lights, Camera, AI Action! 

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

How to build AI facial expression detection into your videos with React

AI >< Video: The Video Model Hub unveiled

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

&nbsp;

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

&nbsp;

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



## What are the AI video features?

### 1. AI video transcription & captions

With [AI transcription](https://api.video/product/ai-features/transcription/), you can convert spoken words in your videos into written text, providing an accurate, searchable record of your content. This means you can easily create subtitles, enhancing accessibility for the hearing impaired or getting a written record of your meetings or events. 






### 2. AI video translation

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

&nbsp;

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


### 3. AI video summarization

Using [AI summarization](https://api.video/product/ai-features/summarization/), you can distill lengthy content into concise, digestible summaries, allowing viewers to quickly grasp the key points without watching the entire video with AI video summarization. This can prove invaluable for educational lectures, business presentations, and lengthy seminars where time is of the essence.

## Do you really need this?

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

&nbsp;

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

## More than just encoding, hosting, and delivery

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

&nbsp;

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

## Your videos stay private to you

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

&nbsp;

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

## Give it a try!

See a glimpse how these AI features look like with a free sandbox account! [Upload a video now in your dashboard](https://dashboard.api.video/overview) and witness AI make a difference to your videos. Simply turn on the toggle for AI transcription present above your video and use the AI features in sandbox. 

Create a sandbox account now 

Introducing AI features to compliment your videos

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

Video trends

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

## **1. CapCut**

At number 1, we have Capcut. 

&nbsp;

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

&nbsp;

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

&nbsp;

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

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

&nbsp;

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

## **2. Runway**

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

&nbsp;

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

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

## **3. Invideo AI**

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

&nbsp;

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

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

&nbsp;

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

## **4. Wondershare Filmora**

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

&nbsp;

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

&nbsp;

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

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


&nbsp;

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

## **5. Canva Magic Studio**

Easy to use. Neat interface. Quick results. 

&nbsp;

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

&nbsp;

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

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

&nbsp;

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

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

## Sora – Open AI’s video generator

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

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

&nbsp;

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

## AI is great – but it cannot replace you

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

&nbsp;

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

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

5 ways the human eye impacts how we do video compression

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

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

api-video-blog-company.png

small_AI thought leadership.png

thumbnail_AI thought leadership.png

Tutorials

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

&nbsp;

Let's start.

&nbsp;

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

## 1. Create a minimal React app

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

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

## 2. Add a video player

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

&nbsp;

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

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

## 3. Record your facial expressions

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

&nbsp;

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

&nbsp;

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

## 4. Load the machine-learning model

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

&nbsp;

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

## 5. Start detecting the webcam stream

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

&nbsp;

Create a new `useEffect`

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

&nbsp;

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

## 6. Use the facial expression detection results

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

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

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

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

## 7. Display the results

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

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

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

## 8. Code samples

Check the full `App.tsx` code below.

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

 &nbsp;

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

AI face recognition (React) - Version 2.png

Create a Next.js 13 & React 18 video app

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

React Native Livestream Module: building the sample app

How to upload a video with React and NodeJS

AI-transcription-feature.png

AI-translation-option-player.png

AI-summary.png

small_Introducing AI features to compliment your videos.png

thumbnail_Introducing AI features to compliment your videos.png

api-video-blog-video-trends.png

capcut-screenshot.png

Runway-Screenshot.png

Invideo-AI-Screenshot.png

Wondershare-Filmora-Screenshot.png

canva-screenshot.png

Sora-Open-AI-Screenshot.png

small_7 AI Tools for Quick Video Creation.jpg

thumbnail_7 AI Tools for Quick Video Creation.jpg

You don't need to know much about the human eye to use [video compression standards](https://api.video/what-is/video-encoding/). However, if you want to understand why they are designed the way they are, or tune your compression, knowing a little bit about the human eye goes a long way. Here are 5 facts about the human eye that directly influence our compression standards. 

## 1. When it comes to colors, the human eye sees green best, red second best, and a little bit of blue. 

**Impact**: *Algorithms and video gear that focus on capturing green more than other colors*. Humans process brightness and color differently. Because we are most sensitive to green, the way we see brightness is determined by how much green we see in something. As a result, cameras capture more green than other colors. Part of why we use green screens is because they appear so bright for people, they don't require as much lighting compared to other choices. We also use green screens because the green channel has more information, allowing for a cleaner key around a subject. The way we process color not only impacts what the camera captures, but how we set up color encoding. We tend to create algorithms that preserve green more than the other colors, because that's what we're most sensitive to!   

## 2. The highest resolution the human eye is capable of seeing is 576 megapixels. 

**Impact**: *Researchers and developers are working to create 8K TV and a codec to compress it*. While your first thought might be that the 576 megapixels is a lot, it's not the resolution we see with most of the time. That's what you see with a very small area in the center of your eye called the fovea. The fovea only covers about 1% of the retina and you can only see about 1/60th of a degree with it. In the real world, this would be like looking at a dot about .07 inches wide from a distance of 20 feet. Most of the time the resolution you see at is between 5 and 15 megapixels. Because of this, it's believed by many that 8K TV will be the end of the line in terms of quality. If you can't see past this level why create it when it's harder to capture, compress and deliver?

## 3. Your brain fills in missing information for the blind spot caused by your optic nerve. 

**Impact**: *Video compression algorithms use their own version of 'filling in' with predictive coding.* Many video compression algorithms use keyframes. A keyframe contains complete information for that frame. Frames that come after (and sometimes before) are stored based on the difference between them and the key frame. When motion occurs, many compression algorithms work to predict what that motion will be and store information based on predictions. This is similar to how your brain fills in and predicts data. 

## 4.  The human eye is more sensitive to luminance (brightness) than chrominance (color).

**Impact**: *The YUV color encoding system is built based on how human sight works.* The system takes into account that humans are less sensitive to color, allowing reduced bandwidth for color components. If there are transmission errors or compression artifacts they are less obvious than they would be with the RGB color system. What to keep and what to throw away in video compression that uses YUV is based on what the human eye is most and least sensitive to.

## 5.  The human eye can see about 30-60 frames per second (FPS). 

**Impact**: *Most content is [streamed](https://api.video/product/live-stream/) at 24, 30 or 60 fps.* 
There is an ongoing debate about how many frames per second the human eye can see. Gamers in particular will claim people are able to see more. Many people confuse fps with Hz. Hz is short for Hertz and is a unit of frequency. When applied to a monitor or projector, it represents the refresh rate for your screen or display, not the number of frames displayed per second. In any case, while there may be a debate regarding fps, the limitation of the human eye, or beliefs regarding its limitation result in most content streaming at 60 fps or under. Video games may stream faster, but it's still debatable as to whether people can see past 60 fps or beyond 90 Hz. 

## Resources 

1. Blue Screen Vs. Green Screen: Which One Do You Need? - [https://www.premiumbeat.com/blog/blue-screen-vs-green-screen/](https://www.premiumbeat.com/blog/blue-screen-vs-green-screen/)
2. Can the Human Eye See in 8K? - [https://www.lasikmd.com/blog/can-the-human-eye-see-in-8k](https://www.lasikmd.com/blog/can-the-human-eye-see-in-8k)
3. The Brain Adapts in a Blink to Compensate for Missing Information - [https://www.scientificamerican.com/article/brain-adapts-in-a-blink/](https://www.scientificamerican.com/article/brain-adapts-in-a-blink/)
4. YUV - [https://en.wikipedia.org/wiki/YUV](https://en.wikipedia.org/wiki/YUV)
5. How Many Frames Per Second Can the Human Eye See? - [https://www.healthline.com/health/human-eye-fps#:~:text=In%20the%20past%2C%20experts%20maintained,see%20topped%20out%20around%2060.](https://www.healthline.com/health/human-eye-fps#:~:text=In%20the%20past%2C%20experts%20maintained,see%20topped%20out%20around%2060.)

nathan-defiesta-rdakt5rtuk8-unsplash.jpg

What if I told you there was a magic potion to skyrocket your e-commerce success, a secret that could transform browsing into buying with just a click of the play button?

&nbsp;

Yes, I am talking about product videos. In the world of online shopping, where clicks dictate success, these dynamic visual creatures have an unmatched influence. Today, we will unveil seven compelling statistics that shed light on the impact of product videos in shaping the fortunes of e-commerce businesses. 

&nbsp;

Let’s dive in. 

## **1. Video is the # 1 content type used by marketers to sell products and services.**

As per Hubspot’s [State of Marketing Report](https://www.hubspot.com/state-of-marketing/content-marketing), marketers unveiled that video is the top content type being produced, surpassing blogs for the first time ever. What are some video formats in which e-commerce businesses enable a flawless shopping experience?

&nbsp;

- **Product Demonstrations:** Marketers use video to showcase the features and benefits of their products through interactive demonstrations, allowing potential customers to see the product in action and understand how it can solve their needs.
- **Customer Testimonials:** Marketers leverage video testimonials from satisfied customers to build credibility and trust, providing social proof of the product's effectiveness and generating confidence in potential buyers.
- **How-to Guides and Tutorials:** Marketers create instructional videos that guide viewers through the process of using their products or services, empowering customers with valuable information and reducing barriers to purchase.
- **Storytelling:** Marketers use video to tell compelling stories that resonate with their target audience, tapping into emotions and creating a connection that goes beyond product features, thus increasing engagement and brand loyalty.
- **Behind-the-Scenes Content:** Marketers offer behind-the-scenes glimpses into their company culture, manufacturing processes, or product development journey, humanizing the brand and fostering a sense of transparency and authenticity among customers.

## **2. Companies witness 49% faster year-on-year revenue growth when they use videos**

As per a report by [Aberdeen Group](http://awesome.vidyard.com/rs/273-EQL-130/images/Vidyard_Aberdeen_Impact_of_Video_Marketing.pdf), companies which use videos in their marketing strategy show 49% faster year-on-year revenue growth than companies who don’t. This proves that videos have a significant impact on conversion rates. Whether it's a product demo, customer testimonial, or explainer video, compelling video content effectively communicates the value proposition of a product or service, helping to persuade potential customers to make a purchase. As conversion rates improve, companies can experience faster revenue growth year over year.

## **3. More than half of marketers invest in some sort of product-related video.**

As stated in a [Hubspot report](https://www.hubspot.com/state-of-marketing), close to 25% of marketers invest in product promotion videos and nearly 20% of them invest in product demos. 

&nbsp;

This statistic highlights the widespread adoption of product videos among marketing professionals. From a marketer’s perspective, they feel that, ‘By investing in high-quality product videos, they are able to differentiate themselves from competitors and leave a lasting impression on consumers.’

## **4. 73% of people who view a product video will make a purchase**.

As per a report by [Animoto](https://animoto.com/blog/business/small-business-video-infographic), the tendency of a consumer to become a customer is 73% after they watch a product video. Well, the impact of product videos on purchase behavior is obvious. Now why do videos have such a massive impact on the decision of a consumer?

&nbsp;

- **Increased product understanding:** Product videos provide viewers with a comprehensive understanding of the product's features, benefits, and use cases, allowing them to make more informed purchasing decisions.
- **Enhanced trust and confidence:** Watching a product video builds trust and confidence in the product, as viewers can see it in action and gauge its performance before making a purchase, reducing the perceived risk associated with buying online.
- **Emotional connection:** Product videos have the power to evoke emotions and create a connection with viewers, making them more likely to develop a positive association with the product and feel compelled to buy.
- **Reduced returns:** By providing a clear depiction of the product through video, businesses can help customers accurately assess whether it meets their needs, thereby reducing the likelihood of returns and exchanges, which ultimately benefits both the consumer and the retailer.

## **5. Websites with video see 41% more traffic from search engines.**

Their visitors also stay on average 81% longer, says a report by [Netimperative](http://www.netimperative.com/2017/03/top-tips-unlocking-value-video-e-commerce/). This surge in traffic on a website can be attributed to several factors. 

&nbsp;

- Firstly, search engines like Google prioritize websites with diverse and engaging content, including videos, in their search algorithms.
- Additionally, videos are highly shareable across social media platforms, leading to greater exposure and referral traffic back to the website.
- And lastly, video content enhances user experience by providing dynamic and immersive content that captures and retains viewer attention, leading to longer session durations and lower bounce rates.

Hence as a result, websites with video content not only attract more organic traffic from search engines but also enjoy higher engagement levels, ultimately driving overall website success.

## **6. 71% of consumers prefer video over other marketing content.**

As per a [report](http://multichannelmerchant.com/infographics/are-you-meeting-the-shoppers-product-video-expectations-14082013/) shared on shopper experience, consumers make decisions faster when they view a video related to a product or service. 

&nbsp;

Imagine, you're on Amazon.com to purchase a Macbook Air. You search for it on the website and a variety of options show up. You’re confused. Which one should you go for? Do you just decide based on product reviews? How do you make a decision? You wouldn’t invest $1000 on a product you aren’t confident about, would you? 

This is where video comes into play. It clarifies what the product is, helping you make a decision and invest in the right place. 

## **7. 85% of Gen Z prefer branded videos and user-generated content (UGC) over other formats.**

As digital natives who have grown up in the age of social media and smartphones, [Gen Z consumers](https://www.danacommunications.com/generation-z-vs-millennials/) value authenticity, creativity, and peer recommendations when they decide to purchase a product. They are ready to put in the time to watch hour-long videos to be completely aware before making a decision. 

As per the report, a large percentage of the Gen Z population looks up to YouTube stars—who are typically “regular” people who happen to have a large following—as their tastemakers and prefer viewing content made by them.

&nbsp;

In conclusion, the statistics speak for themselves – product videos are a powerful tool for driving e-commerce success. By investing in compelling and informative video content, businesses can engage their audience, drive conversions, and stay ahead of the curve. 

&nbsp;

*If you are an e-commerce business that would like to add video functionality to your website or your business, [api.video](https://api.video) can be just the right solution. It is easy, does not break your bank and makes for a video partner. [Sign-up](https://dashboard.api.video/register) now and see it for yourself!*

7 Compelling Facts about Videos in Ecommerce

Ecommerce-7-Compelling-Facts.png

Give your marketplace business a boost with api.video

How to optimize your marketplace business with api.video

These 5 Powerful Video APIs can help you Boost your Business

Boost your business with these 5 powerful video APIs

Switch to api.video with our fast & easy video import tool

How often have you dropped the idea of buying a product because the images were not enough to make a decision? Or when you buy clothing items online, do you not scroll through the images and videos to see a clothing item from every angle? Do you not scout the internet for reviews and real videos of an expensive product before hitting ‘buy now’?

&nbsp;

You most probably do.

&nbsp;

That’s where e-commerce product videos come into play. 

## Statistics prove the value of product videos for e-commerce

According to [Statista](https://www.statista.com/statistics/1380282/daily-time-spent-online-global/), an individual spends an average of at least 6 hours on the internet everyday. They  are either watching videos, replying to emails, texting or most probably filling their shopping cart on e-commerce websites. Another report says that [70% of the US population](https://www.tidio.com/blog/online-shopping-statistics/) shops online and by 2024 and online sales globally are estimated to reach $7 trillion!

&nbsp;

Product videos on online shopping websites are becoming a key element today. Creatively shot product videos attract customers and spark curiosity in them to know more about the product. Studies have confirmed that [85% of consumers](https://blog.hubspot.com/marketing/importance-of-product-videos-for-ecommerce) have purchased a product after watching the product videos.

&nbsp;

Let’s say, you are booking a rental home for your vacation on rental home websites like Airbnb. Would one image and a poorly written description suffice for you to make a decision? Would you not prefer to be given images of the property, the rooms, kitchen, interiors, and the neighboring space and a video tour to make an informed decision?

&nbsp;

As per a survey by [Think By Google](https://www.thinkwithgoogle.com/marketing-strategies/video/in-store-video-shopping-behavior/), more than 55% consumers find videos helpful to make purchase decisions. Another survey done by [Wyzowl](https://www.wyzowl.com/video-marketing-statistics/) shows that 91% of people have watched a video to learn about the product or the service and 82% of the people became convinced to purchase the product or the service.



So if such a large percentage of people are spending time watching product videos, how do you utilize them smartly for your e-commerce business?

## How to use product videos for your e-commerce business

Placement of cool product videos that show exactly what you do, can be the difference between providing your customers an average or an excellent experience. Let’s see the various ways in which you can put product videos to use.

### 1. Videos on store pages

Many retail websites like Amazon have designated store pages to display your business’s products. The landing page can be populated by videos of your star product or a newly launched service so that it becomes the first thing the consumer sees when visiting your page. You can also choose to share the brand ethos with the consumer or the brand’s journey through these e-commerce videos.

### 2. Videos as advertisements

Short product videos can serve as advertisements before long form video content on platforms like Youtube. They are short enough to catch the viewer’s attention while also introducing the basic aspects of the product.

&nbsp;

IKEA, the Swedish multinational furniture conglomerate provides a 360 degree spin video for most of its products. It allows the buyer on their website to view the product from all angles and get a better sense of the item along with dimensions. IKEA also provides the option to view the furniture in your homes through Augmented Reality (AR).

&nbsp;

The business giant is ensuring that the consumers who visit their website are given accurate and detailed information about the product. In 2022, the company saw a [net sales revenue](https://www.statista.com/forecasts/1218317/ikea-revenue-development-ecommercedb) of 10.4 billion USD through its e-commerce platforms.

### 3. Demonstration videos

Demonstration videos are a step ahead of the product videos, which are usually short. Demonstration videos clearly show the various tasks that the product can perform with step-by-step instructions. According to [Wyzowl](https://www.wyzowl.com/video-marketing-statistics/), 91% of the people have watched an explainer video to learn more about the product or the service.

&nbsp;

Dyson, a multinational technology company manufacturing household appliances is a brilliant example. They have product tutorials and demonstration videos on their website and also on [Youtube](https://www.youtube.com/watch?v=5Auip2NyP8A&list=PLGDt1rpYvtbm79aEE5a_ClQ4BFyqD_iKp). Product videos on their website introduce the technology they are using while also showing its potential uses to the consumer. 

### 4. Customer feedback videos

Customer feedback can be effectively represented in an engaging way through experiences and testimonials on social media platforms. User-generated content (UGC), in particular, plays a crucial role in showcasing authentic and relatable feedback from customers, providing valuable insights for brands and influencing purchasing decisions.

&nbsp;

For example, Starbucks utilizes social media platforms like Instagram and Twitter to encourage customers to share their experiences through photos and videos, creating a vibrant community of brand advocates and driving engagement with user-generated content.

&nbsp;

Another example of a brand using videos to showcase customer feedback is Paypal. In this [example](https://www.youtube.com/watch?v=YaQ9CI0gylE), a customer of Paypal talks about a way of using Paypal – pooling money for a collective purchase.

### 5. Review videos

Reviews online are very powerful and when coupled with videos, they create a deeper impression on the prospective buyer who wants to know the experience that other buyers have had. Over 99.9% consumers read online reviews when purchasing online, according to a 2021 report by [PowerReviews](https://www.powerreviews.com/power-of-reviews-survey-2021/).

&nbsp;

A good example of a brand using review videos is Amazon. By allowing customers to share their experiences through different formats (including videos), Amazon encourages trust and transparency, empowering shoppers to make informed decisions.

## Wrapping up

Videos are undeniably the future for any online business. And by investing in video production and incorporating product videos into your marketing strategies, you can create connect with customers on a deeper level. In an era where visual content reigns supreme, videos are not just a luxury but a necessity for staying competitive in the evolving world of e-commerce.

&nbsp;

_If you are an e-commerce business that would like to add video functionality to your website or your business, api.video can be just the right solution. It is easy, does not break your bank and makes for a video partner. [Sign-up](https://dashboard.api.video/register) now and see it for yourself!_

product videos to boost your e-commerce sales

Product-Videos-Ecommerce.png

7 ways to take your corporate training a notch-higher with videos

How can video marketing help sell your products and services

How video marketing can help you sell your products and services

thumbnail_Arushi_.webp

Arushi_.webp

Arushi Gupta

large_api-video-blog-video-trends.png

medium_api-video-blog-video-trends.png

small_api-video-blog-video-trends.png

thumbnail_api-video-blog-video-trends.png

Have you ever wondered how much time and effort goes into creating a YouTube video that you enjoy so comfortably on your screen? 

&nbsp;

Producing a good-quality video, however short it maybe, involves three key stages.

**Pre-production**, that involves scripting, planning and scheduling the shoot.
**Production**, that involves shooting content.
**Post-production**, where everything comes together and is edited to form a finished video.

&nbsp;

With all these three stages requiring substantial effort, video production overall becomes resource-intensive and comes with its set of challenges. So much so, that you might find yourself wishing to delegate some of your tasks to ‘someone’ who can help lighten your workload.

&nbsp;

AI is that dependable, affordable ‘someone’ for you. 

&nbsp;

With the rise of OpenAI’s ChatGPT and DALL-E, [artificial intelligence (AI)](https://api.video/use-cases/generative-ai/) has become a powerful tool for assisting humans in various tasks. AI can help with everything from writing simple essays to performing complex scientific calculations and aiding in medical science. It analyzes data, recognizes patterns, and gives results based on the information it processes. 
How can it help you create and distribute your videos? Let's find out.

## Pre-production
Pre-production is a time-consuming process that requires working on aspects like ideating, scripting and planning the production schedule. AI tools are at our disposal to push our boundaries of creativity and help us when we feel stuck. Let’s see how some AI tools can help you in the pre-production stage.

### 1. Creating a script

You know about that maddening moment when your brain decides to play hide and seek with ideas, leaving you staring at a blank page for hours – the writer’s block.

&nbsp;

AI tools can be very useful in overcoming the writer’s block by offering a basic structure for plotlines and dialogues through an AI script. They can also assist in refining your existing work and suggesting improvements. Virtual assistants and chatbots like [ChatGPT](https://openai.com/blog/chatgpt/), AI video script generators and other AI programs like [Copy.ai](https://www.copy.ai/) are great examples of AI tools that help you move past the writer’s block and save some of your precious time!

### 2. Creating avatars and creative assets
Ever considered using AI avatars to connect with your audience in a unique way? Creating avatars can be time-consuming, but their visual appeal elevates your videos to a whole new level. AI avatar creation is becoming increasingly popular nowadays because of the convenience it offers to people who are not ready to face the camera. These avatar creation tools generate realistic or stylized digital representations of people. The appearance, clothing, and background of these avatars are left at the users' discretion to modify as per his/her choice. 

&nbsp;

Canva, a graphic design platform, has recently launched [AI avatars](https://www.canva.com/create/avatars/) to create avatars from your prompts. HeyGen, another AI video generator, is a great tool that creates unbelievably realistic video avatars for you as soon as you feed a prompt into it. 


### 3. Creating background music and voice overs
Producing and sourcing suitable music for your videos is a lengthy process. With AI background music tools, you can create background music without the need of expensive studios and artists. These advanced tools can compose music tailored to specific moods, themes, or scenes, saving time and ensuring a perfect match for the content. With intuitive interfaces and customization options, these tools empower you to create professional-quality music without needing extensive musical knowledge.

&nbsp;

A few good AI music creation tools are [Mubert](https://mubert.com/), [Musicfy.lol](https://musicfy.lol/) and [Soundraw](https://soundraw.io/).

## Post-production
The phase of post production generally includes putting together the raw footage, selecting the most appropriate scenes, editing them, adding subtitles and making the final video ready for distribution. What happens post production is also a creative process.

&nbsp;

On an average, it takes [around 30 minutes](https://www.tastyedits.com/how-long-does-it-take-to-edit-a-video/#:~:text=The%20Bottom%20Line,finished%20minute%20of%20video%20content) to an hour of editing time to arrive at one minute of the finished video! 

&nbsp;

With the help of AI tools however, you can outsource some aspects to AI video editor tools.

### 1. Scene detection
At the edit table, there is a lot of raw footage that might be several hours long and it is a cumbersome process to sift through it, not to forget the time it takes. By using machine learning, scene detection AI tools can recognize patterns and detect scenes within seconds, making your job far easier. These tools can differentiate between different types of scenes, such as dialogue-heavy sections, action sequences, or location changes, providing a detailed breakdown of the video's structure. They can also help in creating dynamic highlights, summaries, or trailers by identifying the most impactful or representative scenes.

&nbsp;

The simplest example of AI detection is your smartphone using AI to sort your photographs in the gallery on the basis of nature, buildings, seas, and also recognising faces of your family members and friends. 

&nbsp;

_Learn how to [add AI face detection](https://api.video/blog/tutorials/AI-facial-expression-detection-react/) to your videos using React._

### 2. Video editing
AI can also help you by enhancing your creativity and suggesting edits to create a more engaging video. These AI video editing tools learn, adapt and make editing long-form videos easier and less time-consuming. They are able to choose the best shots and angles, stabilize the videos and eliminate any awkward pauses. AI-powered video editing tools are best put to use to create time sensitive content for social media.  

&nbsp;

Some of the [popular AI video editing](https://api.video/blog/video-trends/ai-tools-video-production/) tools are Runway, Wondershare Filmora, Veed.io and Canva. 

### 3. Transcription & translation
Have you noticed that some Instagram reels now come with auto-generated subtitles as you scroll through them? Even Netflix has most of its shows available in languages other than its primary language. Artificial Intelligence is making it possible for video content to be consumed globally, pushing the barriers of language differences and accents. Today, AI translators do a remarkable job at transcribing spoken language into written text and making it available in different languages.

&nbsp;

_Upload a video and see transcription and translation in action in this [demo](https://api.video/demos/ai/video-to-text/). If you are ready to integrate it to your video workflow, check our [AI transcription feature](https://api.video/product/ai-features/transcription/)._

### 4. Summarization
AI summarization tools are reshaping how we digest information! By efficiently condensing lengths of video into concise, coherent summaries, these AI tools help you understand the crux of a detailed video. These tools are especially useful for podcasts and seminars, where the content can be lengthy and the audience may prefer not to watch the entire video.

&nbsp;

Tools like [NoteGPT](https://notegpt.io/youtube-video-summarizer) and [Notta.ai](http://Notta.ai) do a good job of summarizing video content accurately.

&nbsp;

_api.video is also a great choice if you want to integrate [AI summarization](https://api.video/product/ai-features/summarization/) to your videos. If you use api.video to host your videos, a summary of 100 words highlighting key takeaways is generated_. 

### 4. Distribution
Video content that goes live on social media has to be tailored according to the needs of social media. It has to be crisp and attractive to hold the attention of the viewers. AI tools can help by putting together the best clips for social media. For example, the AI tool [Vizard](https://vizard.ai/) creates compelling clips in various formats from a longer video. Alternatively, you can generate short clips using text prompts via tools like Krea and Genmo. 

## Last thoughts

The ways AI can be put to use are endless. It is definitely time-saving to use [AI features](https://api.video/product/ai-features/) to reduce our workload. But towards the end of it all, AI is not capable of replacing the human mind. Unlike the human mind, which can conceive entirely new ideas, innovate spontaneously, and understand context in nuanced ways, AI is confined to what it has learned from prior information.

&nbsp;

Remember that AI can always remain complementary to, rather than a substitute for, the unique and dynamic qualities of human cognition. Use it well, use it smartly! 

Register for free!

8 things AI can do for your videos 

small_8 things AI can do for your videos.png

thumbnail_8 things AI can do for your videos.png

7-things-AI-can-do-for-your-videos.png

large_api-video-blog-company.png

medium_api-video-blog-company.png

small_api-video-blog-company.png

thumbnail_api-video-blog-company.png

api-video-blog-tutorials.png

small_AI face recognition (React) - Version 2.png

thumbnail_AI face recognition (React) - Version 2.png

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

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

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

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

## Create a Next.js 13 application 🚀

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

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

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

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

Everything is working fine? Good job! 🎉

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

## Our video application structure 🏗️

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

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

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

## Get your API key 🔑

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

## A minimal layout first 💅🏽

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

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

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

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

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

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

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

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

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

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

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

Few things to notice here:

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

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

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

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

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

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

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

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

Congratulations! You displayed all your videos in seconds 🏎️

## Playback a video with Next.js 13 📺

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

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

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

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

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

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

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

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

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

Nextjs&React.png

Live streaming is becoming more and more popular as a way to immediately share what a person is experiencing. Perhaps you've thought that live streaming might be a great feature in your mobile app that your customers would love, but you worried about the lifting involved to add this feature.  Today, you can use our [React Native module](https://api.video/catalog/react-native-live-stream/) to quickly add live streaming to your app.

## Building the sample app

In this post, I'll walk through installing and using the sample application to livestream right from your Android phone. 

### Getting started

Since I had not worked with React Native in the past, I had to get all my dependencies straightened out on my Mac.  Make sure that you have

* Ruby & cocoapods installed. (and set as defaults.  I had a lot of issues with multiple versions that were not speaking to each other correctly)

* Android Studio (with SDK version 29) installed.

* clone the repository from github: [https://github.com/apivideo/react-native-livestream](https://github.com/apivideo/react-native-livestream)

Next, we'll build the application.  Enter the repository directory from the terminal, and build the app with yarn:

```

cd react-native-livestream
yarn

```

If you run into an error here, you probably have a dependency issue.  I spent some time in this area getting my development environment up and running properly.

Now we are ready to build the android app, and install it on your phone.  In my case, I chose to use a phone, so I made sure to enable the [developer options](https://developer.android.com/studio/debug/dev-options) and USB debugging, and connected to my laptop.  You know this is working as expected when you get a response from the ```adb devices``` command on the terminal:

```
 % adb devices
* daemon not running; starting now at tcp:5037
* daemon started successfully
List of devices attached
SOVOT8LR65EUCM7H	device
```

### Installing the app

Enter the example directory and run ```yarn android```

```
cd example 
yarn android
```

The app will build and install on your phone, but you'll see a red error message about the Metro server not running:



This is fixed by starting the server on your desktop:

```
npm start
```

Once the server starts, press 'r' to reload the application. The screen will be blank after the reload, as there are no app permissions enabled.  You'll have to go into Settings-> apps (find the ReactNativeLivestream Example app) and enable Camera and Microphone settings.


When you relaunch the application, now we are in business:

Now we are ready to stream.  The 5 coloured buttons change the settings of the application:

Purple: Changes orientation from landscape to portrait
Green: Camera selection from front to back
Yellow: Streaming resolution: 360p or 720p
Blue: Audio: true/false

White: Starts the stream. When you start the stream, you begin broadcasting the video (and the button turns red).  When you're done streaming, press the red button to stop (and it will turn white).

This streams into a test account and the player URL is not published.  To see the livestream in action, go to [App.tsx](https://github.com/apivideo/react-native-livestream/blob/main/example/src/App.tsx#L66) file on line 68, and use a streamKey from your api.video account.  Repeat the steps above, and the application will livestream into your account, and viewers can watch the video at the player URL for your live stream.



download-1.png

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:

## 2. Get the required packages

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

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

From your application root, run this command:

## 3. Create a .env.development file

Create a `.env.development` file at the root of your application and store two environment variables in it:

- The **Next.js public API host:** to access the implemented Node.js API from Next
- Your **API key value:** to instantiate the Node.js client from api.video

You can find your API key on the right hand column of your dashboard 'Overview' page. 

⚠️ You need to **restart your application** each time you’ve made changes in your .env.development. Otherwise, you cannot access new environment values.

## 4. Create your API endpoint

In this part, we want to create **one API endpoint** that allows us to make **two actions**:

- **Retrieve** our upload tokens list
- **Create** one if needed

To do this, we will differentiate the calls to this endpoint by HTTP methods:

- **GET** to retrieve our upload tokens list
- **POST** to create one upload token

Create a new file under the `/pages/api` directory in your application and name it `uploadTokens.ts`

### Retrieve your upload tokens list

In your brand new `uploadTokens.ts` file, create your endpoint and the method to retrieve your upload tokens list. Copy and paste the code below:

*[Find the official documentation for the upload tokens list method here.](https://github.com/apivideo/api.video-nodejs-client/blob/main/doc/api/UploadTokensApi.md#list---list-all-active-upload-tokens)*

### Create a new upload token

We may need to generate a new upload token if we don’t have any available.
Add the creation method in your `uploadTokens.ts` file:

*[Find the official documentation for the upload token createToken method here.](https://github.com/apivideo/api.video-nodejs-client/blob/main/doc/api/UploadTokensApi.md#createtoken---generate-an-upload-token)*

## 5. Call your API

Now we can **retrieve our upload tokens list** and **generate a new one** on demand. We’ll see how to make it happens from the **front end.**

Let’s clean our Home component 🧹
Go to your `pages/index.tsx` file and modify it:

Now our app is nice and clean, let’s implement our logic in 2 steps:

- We want to check if we have any available upload tokens from our upload tokens list.
- If we do not have any upload token, we want to create one.

### Set your upload token

Create a new method that calls your API endpoint `uploadTokens` to retrieve your list, and create one if the list is empty. You should call it in a useEffect inside your Home component:

Call the method in a useEffect inside your Home component:

## 6. Click. It’s magic! 🧚

Already? 😱

Everything should work well now. Click on the displayed button in your application and choose a file to upload to your [api.video](https://api.video) workspace.

## 7. Customize your upload button 💅

You can customize multiple things to make your upload button unique:

- CSS: make it looks the way you want
- Progress event: trigger a callback on upload progress
- Success event: trigger a callback on upload success
- Error event: trigger a callback on upload error

**[Check our complete list of examples for inspiration](https://codesandbox.io/s/great-shtern-0ck5eo?file=/src/App.tsx)** 🧘

Video on demand

Live streaming

Analytics

Video infrastructure

Video player

AI features

See all features

Online learning & Corporate training

Social & Entertainment

Marketplace & E-commerce

Communication & UGC

Generative AI

Quickstart guides

Documentation

Ecosystem catalog

Clients & SDKs

Community

Blog

Demos

Customer success stories

Help center

Artificial intelligence