Android

Normal

thumbnail_thibault_rond.png

thibault_rond.png

Thibault Beyou

Tutorials

Dart

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

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

## **Few words about Flutter**

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

## **Getting started**

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

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

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

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

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

### **Launch the application**

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

run your application with the control toolbar

medium_untitled-1.png

small_untitled-1.png

thumbnail_untitled-1.png

untitled-1.png

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

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

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

medium_1680077433-untitled-3-copy.png

small_1680077433-untitled-3-copy.png

thumbnail_1680077433-untitled-3-copy.png

1680077433-untitled-3-copy.png

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

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

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

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

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

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

Now let's install the Flutter live streaming client!

### **Installation**

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

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

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

### **Permissions**

⚠️ Both iOS and Android need permission to broadcast from your device's camera and record audio.

You will also need to ask for internet permission for Android.

#### Android

From your project folder, open the `AndroidManifest.xml` file. It’s located in the `live_stream_app/android/app/src/main` directory.
Add the following content just under the opening `<manifest>` tag to enable internet, audio recording, and the camera for your application:

#### iOS

From your project folder, open the `Info.plist` file. It's located in the `live_stream_app/ios/Runner` directory.
Add the following content just under the opening `<dict>` tag to enable the camera and microphone:

Don't forget to add the app description, as shown above, if you want to deploy your application in app stores.

### **Usage**

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

#### Create a controller and the camera preview

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

Launch your application. You now have the camera preview.

#### Manage application lifecycle

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

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

Register the lifecycle observer, add in initState:

#### Add a control panel

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

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

Import the following package:

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

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

Replace `createLiveStreamController` by:

medium_screenshot_20220411-112808.png

small_screenshot_20220411-112808.png

thumbnail_screenshot_20220411-112808.png

screenshot_20220411-112808.png

#### Launch your first live stream

⚠️⚠️⚠️ If you want to run your live stream, you will need to change `YOUR_STREAM_KEY` to a real one. 

You can find yours in the [api.video dashboard](https://dashboard.api.video/). If you don't have an account yet, create one, it's free. Then, create a livestream from the overview or the “Live streams” page.

Find this action card and click on "Start live stream"

large_screenshot-2022-03-22-at-08-24-00.png

medium_screenshot-2022-03-22-at-08-24-00.png

small_screenshot-2022-03-22-at-08-24-00.png

thumbnail_screenshot-2022-03-22-at-08-24-00.png

screenshot-2022-03-22-at-08-24-00.png

A modal will appear with several pieces of information in it, including the shareable link and stream key. Save the shareable link to access your live stream later.

This modal should appear once you click on "Start live stream"

large_screenshot-2022-03-25-at-17-1-1.png

medium_screenshot-2022-03-25-at-17-1-1.png

small_screenshot-2022-03-25-at-17-1-1.png

thumbnail_screenshot-2022-03-25-at-17-1-1.png

screenshot-2022-03-25-at-17-1-1.png

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

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

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

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

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

## And now what?

[api.video](http://api.video) provides two development environments. The sandbox allows you to live stream directly from your computer or mobile, but a watermark will be applied to your video, and there is a 30-minute limit for live streams. 

To avoid these limitations, [subscribes](https://api.video/pricing) to api.video and go into production mode 🚀.

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

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

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

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

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

Build your Flutter live streaming application with api.video

Build your Flutter live streaming application

large_28mar23.png

medium_28mar23.png

small_28mar23.png

thumbnail_28mar23.png

28mar23.png

Player

small_api-video-romain-petit.png

thumbnail_api-video-romain-petit.png

api-video-romain-petit.png

Romain Petit

Swift

Have you already developed your own player, but find it challenging to switch to the api.video player?

We have a solution. In this tutorial, we will demonstrate how to play a video from api.video on your player.

## Before starting

Before you start, make sure that you have already uploaded at least one video to api.video. If you haven't done so yet, you can follow this [guide](https://docs.api.video/vod/upload-a-video-regular-upload) for assistance.

## Extensions

In this tutorial, we will discuss extensions. If you are not familiar with extensions, I will explain them briefly, but if you are, feel free to skip ahead.

Extensions enable you to add custom functionality to a code without altering the original implementation.

For example, let's say you have a struct named "Person" with "firstname" and "lastname" as properties. You can create an extension to retrieve their full name.

 ## Adding the api.video Swift player library

In this section, we will cover the two main steps involved in adding the api.video Swift player to your project:

1. Get the latest version by accessing it [here](https://github.com/apivideo/api.video-swift-player/releases).
2. Add the `ApiVideoPlayer` package to your app using one of the following methods:

    a. SPM:
	* In the Project Navigator, select your project.
	* Click on the "Package Dependencies" tab in the Project section.
	* Click the "+" button at the bottom.
	* Paste the URL below into the search bar in the top right.
	* Finally, click the "Add package" button.


  b. Cocoapods:
* Add the following to your Podfile.

## VideoOptions

Every video on api.video is assigned a unique identifier called the `videoId`, which can be found on the Dashboard or in the video list.

As you follow this tutorial, make sure to replace `YOUR_VIDEO_ID` with the actual `videoId` of your video.

If you are using private videos, it will be necessary to provide the private token as well.

A private token is an exclusive token that guarantees access to a specific private video, but it can be used only once.

## AVPlayer Extension

The api.video Swift Player provides an extension for playing new videos with AVPlayer:

If, for any reason, you encounter an error with the HLS stream, you can try again with an MP4 video.

To do this, you need to add an observer to your player and retry when the status fails:

Congrats, you did it; you can now play your video from [api.video](http://api.video) 🥳🥳🥳🥳

(!) To get info on failed mp4, feel free to add an else statement after the if 

## Explore more

With the Swift Player client, you are not limited to just replacing the `currentItem`.

It offers the flexibility to construct a player by using either UIKit or SwiftUI.

To explore this feature further, I suggest checking out this [article](https://api.video/blog/tutorials/how-to-add-an-api-video-swift-player-to-your-ios-application/) or the project on [GitHub](https://github.com/apivideo/api.video-swift-player).

Switch your existing Swift player to api.video

large_28mar23-copie.png

medium_28mar23-copie.png

small_28mar23-copie.png

thumbnail_28mar23-copie.png

28mar23-copie.png

swift

We have now released the Swift player! The Swift player helps you to playback your videos easily in your iOS and iPadOS applications.

In this tutorial we will see how to add the Swift player to your code.

The [Swift player package](https://github.com/apivideo/api.video-swift-player) allows you to use UIKit and SwiftUI to handle multi-platform projects.
The Swift player package is available on both Cocoapods and Swift Package Manager (SPM).

Before starting with this tutorial, make sure that you set your minimum target to iOS 13 and above.

To just give you a quick preview, we are going to create a Swift application with an api.video player that looks like this:

small_capture-d-ecran-2023-03-16-a-16-15-48.png

thumbnail_capture-d-ecran-2023-03-16-a-16-15-48.png

capture-d-ecran-2023-03-16-a-16-15-48.png

## Upload video

Before starting to add the api.video Swift player to your application, you need to upload at least one video to your api.video account. If you haven't yet, see [how to upload a video](https://docs.api.video/vod/upload-a-video-regular-upload).

You'll need a video Id to use this component and play a video from api.video. To get yours, follow these steps:

1. [Log into your account](https://dashboard.api.video/login) or create one [here](https://dashboard.api.video/register).
2. Copy your API key (sandbox or production if you are subscribed to one of our [plans](https://api.video/pricing)).
3. Go to the official [api.video documentation](https://docs.api.video/).
4. Log into your account in the top right corner. If it's already done, make sure that it's the account you want to use.
5. Go to *API Reference* -> *Videos* -> *[List all videos](https://docs.api.video/reference/api/Videos#list-all-video-objects)*
6. On the right, be sure the *Authentication* section contains the API key you want to use.
7. Generate your upload token by clicking the *Try It!* button in the right section
8. Copy the *videoId* value of one of elements of the response in the right section.

Alternatively, you can find your video Id in the video details of your [dashboard](https://dashboard.api.video/).

## Add the api.video Swift player

In this section, we will go through the three main steps of adding the [api.video](http://api.video/) Swift player to your iOS application.

1. Get the latest version
    
    You can find it in the [release page](https://github.com/apivideo/api.video-swift-player/releases)
    
2. Add the `ApiVideoPlayer` package to your app with:
    1. SPM
        
        Add the following to your package.swift

2. Cocoapods
    
    add the following to your Podfile

Replace X.X.X with the latest version.

3. UIKit
    
    a. Import the package

(!) Replace “YOUR_VIDEO_ID” by your own videoId to display video

(!) Replace “YOUR_PRIVATE_TOKEN” by the private token of the video to display it.

c. To get all player events (optional)

d. Implement the player view in your view controller and add constraints.

4. SwiftUI
    
    a. Import the `ApiVideoPlayer` package

b. In your view you have to instantiate the player and the player events in the init method

(!) Replace “YOUR_VIDEO_ID” by your own videoId to display video

If you want to play private videos:

c. In the body you have to add the player with the specification you want

You will be able to use all the methods available externally, by calling player.methodName, for example :

If you're looking for an easy way to integrate video into your application, check out our **[docs](https://docs.api.video/)** and **[sign up for a free account](https://dashboard.api.video/register).**

How to add an api.video Swift player to your iOS application

large_api-video-swift-player.png

medium_api-video-swift-player.png

small_api-video-swift-player.png

thumbnail_api-video-swift-player.png

api-video-swift-player.png

live - create

API client

large_img_8063-min-1.jpg

medium_img_8063-min-1.jpg

small_img_8063-min-1.jpg

thumbnail_img_8063-min-1.jpg

img_8063-min-1.jpg

github-brands.svg

GitHub Yohann

5a22d420c9a5a7-416105621512231968826.png

LinkedIn Yohann

Yohann Martzolff

JavaScript

React Native

In this tutorial, you will learn how to build our own live streaming broadcast application with React Native and api.video.
We're also going to use TypeScript, but you can choose either TypeScript or JavaScript. Both work well with api.video's clients. For further details, check out our [official repository](https://github.com/apivideo/api.video-reactnative-live-stream).

Congratulations! The live streaming app is done!

ezgif-com-gif-maker-2.gif

## Getting started

First, follow the development setup steps from [React Native's official documentation](https://reactnative.dev/docs/environment-setup).

If you're new to React Native, you may also need to [learn the basics](https://reactnative.dev/docs/tutorial).

Make sure that you have the latest Node stable version installed.

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

The official React Native documentation states, "you can follow the **Expo CLI Quickstart** to learn how to build your iOS app using Expo instead."


## Create a new React Native app

Open a new terminal. Go to the folder of your choice and run the following command to create a new React Native application with TypeScript:

### Launch the application

Inside your new project start Metro to bundle your application:

Once Metro is connected and ready, open another terminal. Go to your project folder, and launch your application.

This command line can take several minutes to finish, stay calm and grab a coffee ☕

If everything is set up correctly, you should see your new app running in your iOS / Android emulator like this

thumbnail_screenshot-2022-03-21-at-11-56-07-2.png

screenshot-2022-03-21-at-11-56-07-2.png

## Add the live stream client to your app

Congratulations! 🎉 You've just created a React Native application!
Now, it's time to install the [api.video RTMP live stream client](https://github.com/apivideo/api.video-reactnative-live-stream) into it to live stream directly from your mobile device for free.


### Installation

At this time, the `npx react-native init` command creates a React Native application with `yarn`.

Yarn is a package manager, like NPM. Don't worry if you've not worked with it before; it's easy to use and similar to NPM.


To install the api.video RTMP live stream client, open a terminal. Go to your project folder and run this command:

For iOS usage, you will need to complete two more steps:
1. Install the native dependencies with [Cocoapods](https://cocoapods.org/):

2. This project contains Swift code. If it's your first dependency with swift code, you’ll need to create an empty Swift file in your project (with the bridging header) from Xcode. [You can find instructions here](https://github.com/apivideo/api.video-reactnative-live-stream/#ios).


### Permissions

⚠️ Both iOS and Android need permission to broadcast from your device's camera and record audio.

You will also need to ask for internet permission for Android.

#### Android

From your project folder, open the `AndroidManifest.xml` file. It’s located in the `LiveStreamApp/android/app/src/main` directory.
Add the following content just under the opening `<manifest>` tag to enable internet, audio recording, and the camera for your application:

#### iOS

From your project folder, open the `Info.plist` file. It’s located in the `LiveStreamApp/ios/LiveStreamApp` directory.
Add the following content just under the opening `<dict>` tag to enable the camera and microphone:

Don't forget to add the app description, as shown above, if you want to deploy your application in stores.

#### Sign your iOS application (optional)

You may need to [sign your iOS application](https://github.com/apivideo/api.video-reactnative-live-stream#ios). I recommend doing it now to avoid issues later. 

### Usage

#### Component

Change your `App.tsx` file with the following code:

⚠️ You may need to relaunch your Metro after this.

A black screen with a round button at the bottom should appear in your emulator: it's your live stream view.

thumbnail_screenshot-2022-03-30-at-15-06-54-2.png

screenshot-2022-03-30-at-15-06-54-2.png

#### Launch your first live stream

If you want to test to live stream from an actual device (iOS in our case), open Xcode. Click on “Open a project or file,” select the `LiveStreamApp/ios` folder, and open it.
Connect your device to your iMac/Macbook and run your application.
For Android, you can check the [official documentation](https://developer.android.com/studio/run/device).

You will need to change `YOUR_STREAM_KEY` to a real one. You can find yours in the [api.video dashboard](https://dashboard.api.video/). If you don't have an account yet, create one, it's free.
Then, create a livestream from the overview or the “Live streams” page.

💡 You can also use the [api.video](https://api.video/) API to create a live stream and retrieve your stream key dynamically. [Find how to do this right here](https://docs.api.video/reference/api/Live-Streams#create-live-stream).

Paste your stream key in place of `YOUR_STREAM_KEY`.

Click on the button in your application; it should turn red. Them, go to the shareable link you just saved. There you go! You can see what your mobile is streaming in real-time! If it's not the case, wait a few seconds and check your stream key value.


## Make it dynamic

Our application is working; we can now do an actual live stream directly from our smartphone. 
But api.video RTMP live stream client allows us to customize our live stream the way we want. 
In this section, we will see how to customize our live stream parameters and make our application UI better.

Check the [official README](https://github.com/apivideo/api.video-reactnative-live-stream/tree/v1.0.0) for exhaustive information about the `@api.video/react-native-livestream` package.

Some properties can be updated during the live stream:

- Camera: front or back
- Audio: muted or not

We can leave these properties on the live stream view. This way, we can update them during our live stream.


### Add icons

We will need icons in our application.
Install the corresponding dependency before going further.

1. Stop your application
2. Delete the pods (only for iOS usage.)

3. Add the [react-native-vector-icons](https://www.npmjs.com/package/react-native-vector-icons) NPM package:

4. Go into `/ios` and install your pods (only for iOS usage.)

5. To display an icon, import it and use it as a component

⚠️ An import error could be displayed in Visual Studio Code, but it should work anyway.


### Live stream view

Right now, we only have a single button at the bottom of our live stream view, contained in the `App.tsx` file.

We can customize this component a little bit to make it more obvious.

#### Streaming button

Let's add text if our live stream is not running and an icon when it is.
Replace the above code by this one:

Don't forget to update your style to display the streaming button conditionally:

#### Camera button

To change the camera input (front or back), we need to add a button we can access during our live stream.

To do this, a local state is needed, like the `streaming` one:

1. Add it in your `App` component and replace your static string for the camera props:

2. Handle the change of camera with this handler. Place it in your `App` component:

3. Add this code under your streaming button. It’s our camera icon component:

When you press the camera icon, displayed in the bottom right corner, you should switch from the back camera to the front and vice versa.

#### Muted button

We may want to mute our stream at a specific time. For this, we also need a local state and a button.

1. Add a new local state under the other ones and replace your static boolean for the `isMuted` props:

2. Handle the change of `muted` state with this handler. Place it in your `App` component:

3. Add this code under your camera button. It’s our mute icon component:

When you press the mute icon, displayed in the bottom left corner, you should switch from muted to unmuted.

And voilà! You can now launch a live stream directly from your device, choose which camera you want to use, and allow sound recording or not.

## And now what?

Congratulations! You just created a fully functional live streaming broadcast application. You can go further and implement the logic to modify all other settings provided by [api.video](https://api.video).
You can check the [React Native live streaming sample application](https://github.com/apivideo/api.video-reactnative-live-stream/tree/main/example) to get an idea of the potential of this tool (product?).

api.video provides two development environments. The sandbox allows you to live stream directly from your computer or mobile, but a watermark will be applied to your video and there is a 30 minute limit for live streams. 

To avoid these limitations, try one of the plans found [here](https://api.video/pricing) and go into production mode 🚀

How to build a live streaming app in 3 steps

large_image.png

medium_image.png

small_image.png

thumbnail_image.png

image.png

Product updates

[api.video](https://api.video) removes the complexity from streaming video. Our simple to use APIs allow you to focus on creating your content -- leave the video streaming details to us.

Few months ago, we announced our [Android API client](https://github.com/apivideo/api.video-android-client), we are now happy to announce the release of our [Swift API client](https://github.com/apivideo/api.video-swift-client) for iOS, macOS and tvOS. We are replacing the iOS SDK to simplify api.video usages and deployment of the new version. It also provides support for [api.video progressive upload](https://api.video/progressive-upload). We will focus on the progressive upload part in another blog articles.

The [Swift API client](https://github.com/apivideo/api.video-swift-client) comes with:
* [documentation](https://github.com/apivideo/api.video-swift-client#documentation
* [sample code](https://github.com/apivideo/api.video-swift-client/tree/main/Example).

This article is a walkthrough to upload a file with [Swift API client](https://github.com/apivideo/api.video-swift-client).

## Installation
### Cocoapods

1.  Add the following entry to your `Podfile`:

2. Then run `pod install`

3. Import ApiVideoClient in every file you’d like to use [Swift API client](https://github.com/apivideo/api.video-swift-client).

### Carthage

1.  Add the following entry to your `Cartfile`:

2. Then run `carthage update`

3. Import ApiVideoClient in every file you’d like to use [Swift API client](https://github.com/apivideo/api.video-swift-client).

## Swift API configuration

To use the Swift API client, you first have to import the `ApiVideoClient`.

`ApiVideoClient` class provides static fields and methods to configure the Swift API client. You can set your API key, your environment (sandbox or production), chunk size,...

Set your API key with:


If you want to target the sandbox environment:

## Create a video file

If you haven't create a video on api.video, you have to create a video entry on api.video platform with:

Description of the fields of `VideoCreationPayload` is provided [here](https://github.com/apivideo/api.video-swift-client/blob/main/docs/VideoCreationPayload.md).

## Upload a video file

To upload a file, you will have to get the `URL` of your file. You can get it from the image picker component. Have a look at our a [sample code](https://github.com/apivideo/api.video-swift-client/tree/main/Example).


If you want to draw a progress bar that displays the upload progress, there is a `onProgressReady: ((Progress) -> Void)` parameter to the `upload` method.

## Swift API client capabilities

The [Swift API client](https://github.com/apivideo/api.video-swift-client) provides methods to perform every possible actions on the [api.video](https://api.video) API such as list videos (with filters), delete video, add/remove captions,...
If you are not familiar with [api.video](https://api.video) API, you should have a look on [api.video documentation documentation](https://docs.api.video/reference). You will find the same concepts in the [Swift API client documentation](https://github.com/apivideo/api.video-swift-client#documentation). 

## Swift video uploader

If you want to develop an application that only uploads video files. You should have a look at the [Swift video uploader](https://github.com/apivideo/api.video-swift-uploader).

Don't hesitate to share your feedback on [our community](https://community.api.video/). Happy building!

New Swift API client for iOS, macOS and tvOS

medium_8cd3ef2e-d0ab-4465-86ae-624889fa945d.png

small_8cd3ef2e-d0ab-4465-86ae-624889fa945d.png

thumbnail_8cd3ef2e-d0ab-4465-86ae-624889fa945d.png

8cd3ef2e-d0ab-4465-86ae-624889fa945d.png

codec

video create

small_cedric.jpeg

thumbnail_cedric.jpeg

cedric.jpeg

Cédric Montet

At api.video, our goal is for video to be easy and affordable for anyone to build, be it individuals or organizations. We understand that achieving this goal means reducing costs at some stage of the video streaming process. That’s why, we now offer adaptive bitrate encoding for your videos at zero cost. 

&nbsp;

Yes, you heard me right. 

&nbsp;

**Encoding videos will be absolutely free for all video qualities (1080p or 4K) at [api.video](https://api.video/) - no hidden calculations, footer notes or tricks.**

(Check out this [video](https://www.youtube.com/watch?v=ouosgLbW7Ts) for more details) 


## A step towards making video streaming affordable

Video encoding is crucial as it makes it possible for videos to be shared and played smoothly on the internet. It is why we are easily able to consume various types of video media, whether it’s a YouTube video, our favorite shows on Netflix, or even catching up with friends across the globe on Zoom. Video encoding basically makes the world go around in regards to anything related to video and video content.

&nbsp;

We at api.video recognize that. From [increasing the transcoding and playback speed ](https://api.video/blog/product-updates/2021-in-review/)to building [specialized hardware like ASICs](https://api.video/blog/video-trends/the-comeback-of-specialized-hardware/) cards to increase our transcoding capacities, we've been working to make video streaming easier for you every day. And after dedicating ample time to engaging with our customers and learning about their concerns, free encoding seemed to be the next step in this direction. 

&nbsp;

So, we worked tirelessly behind the scenes to give you what no one else will - free encoding for all video qualities, be it 360p or 4K. 

## How does free video encoding benefit you as a customer

The benefit is straightforward: you save a LOT of money!

&nbsp;

- With free video encoding, you will have one less thing to worry about. As you know, you pay for three things for streaming videos — encoding, hosting, and delivery – out of which encoding is the most expensive, especially if you have a lot of videos. Free video encoding will allow you to focus your attention and resources to what is most important.

&nbsp;

- As the video needs of your app users grow, you might need to scale up your encoding capacity. Free video encoding services will give you the power to scale without any additional costs, meaning your users can handle more videos without increasing your expenses.

&nbsp;

- You can [migrate from your previous provider to api.video](https://api.video/compare/azure-media-services/) without paying an ‘entry tax’ to us. With free video encoding, you no longer need to spend money on encoding videos with a new provider when you have already paid for encoding with an older one.

&nbsp;

Now with all the saved cost, you can allocate your resources and money to a place where it is actually important – building your product and delighting your users. 

## How to get started

To use the free video encoding benefit, getting started is easy. 

&nbsp;

- If you’re a new user, [sign-up](https://dashboard.api.video/register) for a free sandbox account and start uploading your videos
- If you are looking to migrate from another vendor, [import](https://import.api.video/) your videos from your current vendor
- If you have any questions, [talk to us](https://meetings.hubspot.com/diego398/cc-talk-to-us?__hstc=54467703.754940701eda85e3c99a902d8ab0b988.1687266643206.1694417789132.1694427271479.149&__hssc=54467703.3.1694427271479&__hsfp=3654297906) by booking a slot in our calendar

&nbsp;

To know more about our[ features](https://api.video/features/), [pricing](https://api.video/pricing/) or ask any other questions, [talk to our team ](https://meetings.hubspot.com/diego398/cc-talk-to-us?__hstc=54467703.754940701eda85e3c99a902d8ab0b988.1687266643206.1694162373815.1694167498585.144&__hssc=54467703.1.1694167498585&__hsfp=3654297906)and we will help you out. 

&nbsp;

Or, you can straightaway [sign-up](https://dashboard.api.video/register) for a free sandbox account and check our product out for yourself. 


Huge pricing update: Introducing video encoding at no cost

large_Blog_Zero Cost (2).png

medium_Blog_Zero Cost (2).png

small_Blog_Zero Cost (2).png

thumbnail_Blog_Zero Cost (2).png

Blog_Zero Cost (2).png

api.video

Video trends

Modern technology has been helpful for an increasingly fast and simple method of consuming various types of video media, whether it’s a YouTube video, our favorite shows on Netflix, or even catching up with friends across the globe on Zoom. Despite the relative ease of doing anything related to video, a few complex processes take place behind the scenes, away from public view. One such process is video encoding.

Video encoding basically makes the world go around in regards to anything related to video and video content. Thanks to the technologies behind the video encoding process, it has become much easier for people and companies to share video content on the internet. But what exactly is video encoding, and what happens during the process? We’ll take a closer look at this and much more in this handy guide to video encoding.

## What is video encoding?

In a nutshell, video encoding occurs when you take raw video footage, either from a digital camera or an analog film camera, and digitally compress it to make it a more manageable file size. Video encoding happens daily in both professional and personal capacities, and many people don’t realize it.

But, without encoding, services like Netflix and YouTube would not exist – or, at least, not in the same way that it does today. Without it, we couldn’t send videos of our beloved pets to our friends and family as easily as we can today.

## Why is video encoding used?

There are a variety of reasons why video encoding is used, but all factors point to the single function of video encoding – **compression**.

This is done to ensure optimal performance and compatibility with a selected suite of software and hardware, be it for DVD/Blu-ray playback, mobile viewing, online video streaming, or general video editing. A file's video and audio information undergo transformation and compression during the encoding process, all in accordance with the requirements of the selected encoding standard.

On a professional level, the ability to compress raw video into more manageable sizes makes it easier to transmit video content such as training, promotion, presentation, and so on over the internet. 

On a personal level, video encoding makes it much easier to send videos taken from your phone directly to friends and family. Most modern-day personal devices have built-in video encoding capabilities to allow for this to happen without a second thought.

To put things in perspective, uncompressed or unencoded video can have a data rate that’s as low as 3,000 Mbps and as high as 12,000 Mbps, depending on the length and quality of the video recorded. 

**Without encoding, it would take up to days for anyone to not just transmit video, but to be able to consume it, too.**

## Differences between video encoding and video transcoding

You need to be familiar with two more [essential terms related to video encoding](https://api.video/what-is/) – transcoding and codecs.

Transcoding relates to the conversion from one digital encoding format to another. It takes the already encoded video file, decompresses it, and then alters it before re-encoding or compressing it into a different codec. Codecs are what allow encoding to occur in the first place. They are software or hardware that gives us the ability to compress video to make them more easily stored and delivered tightly.

While you may hear “encoding” and “transcoding” used interchangeably, the two terms actually mean different things. Putting it succinctly, encoding is the initial process of compressing a video from a source – such as a camera – into a codec, while transcoding takes an already encoded video file to convert it into a different codec.

## Examples of video codecs

In order to understand video encoding, you must first be familiar with two interrelated terms: [video codecs and video formats](https://api.video/blog/product-updates/every-video-format-codec-and-container-explained/). These also tend to be used interchangeably, but much like the terms encoding and transcoding, they refer to two different things.

Video formats are the type of files in which the compressed video/audio is stored. Also known as a “container”, you can tell what a video format is by looking at the file’s extension — the three to four characters that sit after a period in a file name. Here are some of the most common video formats used today:

* MP4
* FLV
* MOV
* MKV
* LXF
* MXF
* AVI
* WebM
* QT

On the other hand, **the codec is short for “Coder / Decoder” (compression / decompression)** and relates to the video compression algorithms that allow encoding to happen. Over the years, codecs have gone through multiple iterations as it coincides with the increasing sophistication and rise in the quality of filmmaking. 

If you’re a content creator, you might be aware of some of the video codecs that exist today:

- **H.264 – also known as AVC, this is the most widely-used video codec available on every platform and mobile device.**
- H.265 – also known as HEVC, stands for High-Efficiency Video Coding, and it’s slowly overtaking H.264 as the standard. This codec can compress video much more efficiently than its predecessor.
- **VP9 – is an open-source, royalty-free codec developed by Google and is considered the direct competitor of H.265. The video compression codec VP9 was created to reduce file sizes, making streaming videos simpler.**
- **AV1 – is another royalty-free, open-source codec released in 2019 by the non-profit Alliance for Open Media. It was developed to become the successor to Google’s VP9 and contend with HEVC more directly.**

## How do different technologies handle video encoding

As you may have suspected, there are a majority of ways that different technologies handle the video encoding process. Let’s take a look at the most common technologies that use video and how video encoding works on each of them:

### Video editing software

When it comes to video content creation, a majority of people will use one of two video editing software — Adobe Premiere Pro or Apple’s Final Cut Pro. Both of these video editing software handle video encoding in very similar ways: when exporting the finished video.

Depending on which device the video content is recorded on, it will already be encoded and formatted according to the settings of the device. For those using iPhones recording 1080p video at 25 frames per second (FPS), for example, the iPhone will automatically encode the video using H.264 and contain it in a .mov file format. The video editing software will “open up” the container to get to the encoded, compressed video file within so the editing process can begin.

After editing the footage is complete, it will need to be exported, which typically concerns video encoding. The edited raw media taken from a recording device such as a camera will be encoded via the codec of the person’s choosing before being put into a .mp4 container once they’ve hit “export”. As we’ve mentioned before, the most common codec used in video content creation is H.264 for HD videos, with 4K videos using H.265. 

### Websites

Different websites utilize different techniques to handle video encoding – with a majority of the major sites like YouTube, Netflix, and so on using their own technologies to handle the process. A majority of social media websites allow you to upload video files directly onto the site to share, although most of them require the files to be saved in specific containers. 

These websites will take your video file and transcode it before using their own systems and serves to re-encode it to match multiple display resolutions. This process will happen regardless of your video file's original codec and settings. Different websites have different processes, but companies that don’t have the capacity to build their own video encoding systems can use a third-party application programming interface (or API) to handle this process. These APIs act as [dedicated video encoder](https://api.video/encoding/) that allows companies to add on-demand videos to their websites more efficiently.

Using [api.video](http://api.video) as an example, all of the videos submitted to the platform will be transformed into H.264 codec in an MP4 container. This may be done using transmuxing and/or transcoding.

We expect the video bitrate to be lower than 16 Mbps for up to 1080p resolution and 50 Mbps for up to 4K resolution. We accept any bitrates, however, we will scale them down to the limits mentioned because anything above is usually challenging for most viewers’ connection to watch.

### API

The ability to generate, store, and distribute video is made possible via a video API. [api.video](http://api.video)’s solution can be tailored to suit any specific need. 

The backend process of video on demand (VOD) is exceptionally complex, even if you’re a software programmer specializing in video. It is necessary to encode, package, and typically transcode the data before sending it to any of several possible destinations. All of these things, and more, may be done with minimal fuss using api.video.

Our API basically keeps the complexities of streaming media hidden from view, so you can rapidly develop apps with as much control as you need. This saves time and effort so developers can concentrate on making the product.

## Conclusion

As you can see through this video encoding guide, a lot of work goes into making the video you watch and the video you share possible. Without video encoding compressing raw video footage, it could take days to upload and transmit video content over the internet and perhaps even longer to be able to download and enjoy them. 

The best part about encoding at api.video is that is offered at ZERO cost. You will only be charged for delivery and hosting of your videos, and the encoding will be free. Now integrate your videos in minutes with api.video or [contact us](https://api.video/contact) for more information.

A Guide to Video Encoding & Video Codecs

large_poster-3.png

medium_poster-3.png

small_poster-3.png

thumbnail_poster-3.png

poster-3.png

Erikka Innes

Encoding and transcoding are often used interchangeably but they have slightly different definitions. **Encoding is the initial process of converting raw video files into a specific digital format or codec.** It involves compressing and packaging the video data, often to reduce file size while maintaining acceptable quality. Encoding prepares the video for storage, transmission, or playback.

&nbsp;

**Transcoding, on the other hand, involves converting a video from one digital format or codec to another.** This is typically done to optimize the video for different devices or platforms, adapt to varying network conditions, or ensure compatibility with specific playback requirements. Transcoding occurs after encoding and often involves changing resolution, bitrates, or formats without altering the content itself.

## What goes on behind encoding a video?

It's easy to say that encoding is when you go from an _uncompressed source_ to a _compressed source_, but you may ask, what exactly do compressed and uncompressed sources mean?

&nbsp;

Uncompressed sources are video files that contain data that comes directly from a camera sensor vs. encoded video. In the digital space, it's SDI (Serial Digital Interface) or HDMI (High Definition Multimedia Interface). Both of them are popular standards. You'll find HDMI in places like your GoPro camera, or a mini camcorder. These days, you might also find HDMI in professional settings, but SDI is more common due to its reliability. Another example of an uncompressed source would be something analog, for instance, VHS tapes.

&nbsp;

A compressed sources, on the other hand, are video files that have undergone compression during the encoding process. Compression involves reducing the file size by removing unnecessary information or encoding the data in a more efficient format. This process results in a smaller file size, making it more manageable for storage, transmission, and playback.


## What are the types of transcoding methods?

There are three types of transcoding, depending on what you are trying to do to get a video to suit a particular browser, player, or platform:

* **Lossless-to-lossless** - This type of transcoding maintains the quality of your video across formats but allows you to take advantage of better hardware or compression algorithms. 
* **Lossless-to-lossy** - This type of transcoding will decrease your video in quality, but it will benefit you in ways such as – you will get a smaller and/or faster playing file, or a file that is compatible with the requirements of a particular platform, player, or browser.
* **Lossy-to-lossless** - Sometimes people think this means they are regaining quality. This isn't the case in this type of transcoding. If you transcode from a lossy format to a lossless format, all that it means is that you will not lose additional quality in the conversion process. You will not regain data you already lost through compression.

## Codecs for encoding and transcoding

For both encoding and transcoding, you will need to make use of codecs. A codec's job is to compress and decompress video files. It's right there in the name -  **co**mpress **dec**ompress or encode decode. So basically, codec is an algorithm that takes the video and shrinks it or changes it into a format that makes it compatible with the requirements of wherever you want the video to play. There are many codecs because there are many ways to compress a video or livestream for playback.



## What is transmuxing?

Now that you know the difference between encoding and transcoding, let's throw one more term in there - transmuxing. Transmuxing is when you change the container for a video instead of the format. It's a way of repackaging a video to make it compatible somewhere without changing what's in the file. 

&nbsp;

This process is faster than encoding or transcoding and takes less computing power because you only change the container, not the file. It's great when you need to quickly make something available, but the downside is that it doesn't handle things like making multiple video resolutions available. If you choose a container type that's incompatible with your video file, you may also cause compatibility issues, resulting in not being able to play the video.

## In closing

* **Encoding** - Encoding happens when you compress a raw data file from a video camera sensor or an analog source like a VHS tape. 
* **Transcoding** - Transcoding happens when you take an already compressed video file and change it to another format.
* **Transmuxing** - Transmuxing happens when you change the container of a video file but leave the video file untouched. 

We hope that explains the difference between encoding and transcoding clearly. 

_If you are looking for an affordable video API solution that does not burn a hole in your pocket for transcoding and encoding videos, check out our offerings on our [homepage](https://api.video/) or [sign-up for a free account here](https://dashboard.api.video/register)!_

Video on demand

Live streaming

Analytics

Video infrastructure

See all features

Online learning

Short-form videos

Marketplace & E-commerce

Video messaging and recording

Quickstart guides

Documentation

Ecosystem catalog

Clients & SDKs

Community

Blog

Demos

Help center

Blog

Huge pricing update! Introducing video encoding at zero cost