Player SDK

Player

Player update

Normal

thumbnail_thibault_rond.png

thibault_rond.png

Thibault Beyou

large_api-video-blog-no-code.png

medium_api-video-blog-no-code.png

small_api-video-blog-no-code.png

thumbnail_api-video-blog-no-code.png

api-video-blog-no-code.png

No-code

Dart

Building a mobile application with video functions? Let’s dive into why api.video is the right choice for this task.

&nbsp;

api.video encodes your videos, hosts them securely, and enables you to stream on any device or platform for you. You only need to build your mobile application, with your own branding.

&nbsp;

We value developer experience and the time spent on developing your mobile application, so we provide you with the tools we’d also choose to integrate video in a mobile application. We’ve developed several SDKs for you to use in order to take control of the video player in your mobile app.

&nbsp;

Check out these plaftorms:

- [Flutter](https://github.com/apivideo/api.video-flutter-player) player for Android, iOS, and Web
- [ReactNative](https://github.com/apivideo/api.video-reactnative-player) player Android and iOS
- [Android and Jetpack Compose](https://github.com/apivideo/api.video-android-player)
- [Swift](https://github.com/apivideo/api.video-swift-player) player for iOS

&nbsp;

With these player SDKs, you can integrate videos that you host on api.video into your mobile application in just a few minutes.

&nbsp;

The api.video mobile player SDKs support both VOD and live streaming, private videos, and player notifications. They also handle the dirty work for you:
- take the [video ID](https://docs.api.video/vod/video-object#video-id) as input
- generate analytics events for [api.video analytics](https://api.video/product/video-analytics/)
- play back HLS using the best quality that fits actual network conditions
- fall back to MP4 when there is an issue with HLS

&nbsp;

Every api.video player SDK comes with a sample application. Check out the [documentation](https://docs.api.video/sdks/player#mobile) and look for the `example` directory in each SDK’s repository.

&nbsp;

The [api.video players](https://api.video/product/player/) are open source. Feel free to fork and modify them as you want! We are happy to review your pull requests!

## Usage

To use api.video players, you need the [video ID](https://docs.api.video/vod/video-object#video-id) of video you want to serve. You can retrieve a video ID via the [API](https://docs.api.video/reference/api/Videos) or from the [dashboard](https://dashboard.api.video). 

&nbsp;

In a typical use case, you should follow this workflow:
1. Add the player package to your project
2. Create a `VideoOptions` instance with the video ID of the video you want to serve 
3. Create a player controller and pass it the `VideoOptions` instance
4. Create the player view and pass the player controller to the player view.

&nbsp;

Check out this example for **Flutter**:

&nbsp;

Run this in your command line:

Check out the [Flutter player SDK documentation](https://docs.api.video/sdks/player/apivideo-flutter-player) for a detailed explanation.

## Quickstarts

To get you started, we created quickstart articles that can help you integrate the api.video player SDK in just a couple of minutes:

- **Flutter**: [api.video player for Flutter: playback videos on your apps](https://api.video/blog/tutorials/api-video-player-for-flutter-playback-videos-on-your-apps/)

- **Android**: [How to add an api.video player to your Android application](https://api.video/blog/tutorials/how-to-add-an-api-video-player-to-your-android-application/)

- **Swift (iOS)**: [How to add an api.video Swift player to your iOS application](https://api.video/blog/tutorials/how-to-add-an-api-video-swift-player-to-your-ios-application/)

## Customization

Customizing the look & feel of the player is important to maintain your own branding in your application. The api.video player SDKs enable you to customize the UI of the player. You have the possibility to configure the color of the progress bar, the color of the play button, and many more items.

&nbsp;

If you think a customization option is missing, let us know in the `Issues` section of the player SDK’s GitHub repository.

## Using custom players

Even though we recommend using the api.video player SDKs when working with api.video’s solutions, you can use other players in your application.

&nbsp;

To support your decision even if you go with another player solution, we provide extensions for your mobile player to read and serve videos hosted with api.video through the [video ID](https://docs.api.video/vod/video-object#video-id)s.

- **Android**: [Switch your existing Android player to api.video](https://api.video/blog/tutorials/switch-your-existing-android-player-to-api-video/)

- **iOS**: [Switch your existing Swift player to api.video](https://api.video/blog/tutorials/switch-your-existing-swift-player-to-api-video/)

&nbsp;

To enable you to collect usage data even from the custom player of your choice, we created analytics libraries for Android and iOS that you can integrate into your application.

- **Android**: https://github.com/apivideo/api.video-android-player-analytics
- **iOS:** https://github.com/apivideo/api.video-swift-player-analytics

&nbsp;

We can recommend these players in case you decide not to use the api.video player SDKs:
- Flutter: `chewie` and `video_player`
- Android: `ExoPlayer`
- iOS: `AVPlayer`

&nbsp;

_Need help, or have questions? Join the [api.video community](https://community.api.video/) and start a discussion. Or simply create a sandbox account on [api.video](https://dashboard.api.video/register) and check out the features for yourself._

Enhance viewer experience in your mobile apps with api.video's player SDKs

large_Blog_MobilePlayer.png

medium_Blog_MobilePlayer.png

small_Blog_MobilePlayer.png

thumbnail_Blog_MobilePlayer.png

Blog_MobilePlayer.png

api-video-blog-product-updates.png

Product updates

api.video makes the delivery of streaming video easy. Just use our API to upload a video, and we handle all of the transcoding, storage and video delivery for you.  All you need to do is add the url (or iframe) to your site or app, and we handle the rest - ensuring fast, easy video delivery to all of your users.

The url (or iframe) from api.video that you add to your site contains a customisable video player full of great features. Today, we are announcing the release of our new video player with more incredible features to wow your customers.

&nbsp;


**<iframe src="https://embed.api.video/vod/viTLpKB231ATWOWjkHgi9bf" width = "800" height ="600" allowfullscreen></iframe>**

&nbsp;


A video describing the new api.video player, inside the new [api.video player](https://api.video/product/player/)!

Our new player is completely rewritten from the ground up, built on top of the video.js architecture. So, what that does this mean for you? For existing api.video users - all your videos have been automatically upgraded to the new player, and all future videos will automatically use the player as well!
New Features
In addition to the new sleek look of the player, there are a lot of new features that we would like to share with you.

## Captions and chapters  

[Captions](https://docs.api.video/reference/api/Captions) and [Chapters](https://docs.api.video/reference/api/Chapters) were supported in the last player, and continue to be supported by the api.video player.

## Chromecast

If there is a Chromecast on the same network as the device playing the video, a “cast” button will appear, so you can send to the larger screen.

## Picture in picture
Pop the video out of your browser, and keep watching, even when you visit different pages - or even different screens!  The video follows along so you can keep tabs of what is going on!

## Responsiveness

One unique feature in Video.js is that the player automatically delivers the appropriate stream based on both the network bandwidth available AND based on the size of the video viewport.  If you are watching a video on a small screen, or small window in the page, api.video only sends the largest appropriate size video to the screen - ensuring the highest quality,  without sending extra data to your customers (that they cannot consume).

## Video playback speed
For longer videos, some viewers may wish to watch at a slightly faster rate. The speed button in the bottom right allows you to watch as much as 2x faster than the original recording.

## Video rewind and fast forward
Surrounding the video speed option are rewind and fast forward buttons.  The rewind backs up the video 10 seconds, and the fast forward moves the video ahead 20 seconds.  This is great when you miss a scene or critical bit of content, and want to quickly seek around in the video.

But, that is not the coolest part of the rewind and fast forward.  

## Live DVR
Yes! The rewind works on a live stream!  If you are watching a live stream on api.video and miss a word, or want to review a slide - you can rewind and pause the video.  Then press play, and increase the playback speed to zip back to the “live” coverage!

We are really excited to share these great new features with you, and can’t wait to see what cool videos and ways you might implement these features to better display your content.  Please let us know what you think about the new video player in our **developer forum**: [community.api.video](https://community.api.video)  

&nbsp;

_To start using api.video for your videos, [sign-up](https://dashboard.api.video/register) for a free sandbox account now._

Announcing our new video player

large_1595521905-player.png

medium_1595521905-player.png

small_1595521905-player.png

thumbnail_1595521905-player.png

intro-api-video-player.png

api-video-blog-tutorials.png

Tutorials

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:

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

Flutter has a strength that only a handful of frameworks have: the power to build a multi-platform application with a single codebase. 

What if you need to display some videos in your new or future worldwide famous app? At the time I write this article, it’s fair to say that there aren’t many video players available for Flutter out there. Here comes our solution at [api.video](https://api.video)!

api-video-player-screenshot.png

## A single video player for all platforms

If you’re new to Flutter or cross-platform development, welcome to this wonderful, fast, and simple world! No more separate logics or codebase to create an application that works across multiple platforms. Better yet, no need to have multiple developers working to create different applications for various operating systems. Create an application once, and use it everywhere!

The api.video player for [Flutter](https://pub.dev/packages/apivideo_player) is built natively for Android, iOS, and web and can be implemented on these three platforms easily. All you need is a computer and an [api.video](https://dashboard.api.video/register) account.

Continue reading this article for a full tutorial 👀

## Upload a video to display it

In order to display a video, you need to first upload it! To upload a video, [login](https://dashboard.api.video/login) to your api.video account or if you are not registered already, you can easily [create an account](https://dashboard.api.video/register) for free.

Once you reach the dashboard, check if you have previously uploaded any videos, and if not, no worries! You can easily upload a video by clicking the “Create Video Object” button on the overview and follow the steps on the dashboard. 

💡 You can also upload videos to your workspace with one of our [SDKs](https://docs.api.video/reference/api/Videos#upload-a-video)

upload-video-api-video.png

## Add the api.video player to your application on Flutter

If you’re new to Flutter, or if you don’t already have a Flutter app running, [please follow the official guide](https://docs.flutter.dev/get-started/install).

Once your application is running, add the api.video player package to you Flutter.

### Option 1

Run the following command at the root of your project:

### Option 2

Modify your project’s `pubspec.yaml` file:

## For iOS usage

This package only works on iOS 13 and above. Please update your `ios/Podfile` platform property as follows, or update the iOS version in xCode.

## Display your first video

You can display your first video by following the easy steps below 👇

### 1. Import the package

Add the following line at the top of the file where you want to use the api.video player:

### 2. Create a new video player controller

You need to first instantiate a `ApiVideoPlayerController` to be able to use the video player widget.

To instantiate the `ApiVideoPlayerController`, you will need an api.video video id. Find the video id in the api.video dashboard by clicking on one of your videos found under the section called [videos](https://dashboard.api.video/videos).

Create a new widget or modify an existing one like this:

Run your application on the device of your choice and a simple line of text should appear on your application.

## 3. Create a new video player

Now that you have a functional `ApiVideoPlayerController`, you can create a new `ApiVideoPlayer` and associate your controller to the player.

Modify your widget by replacing the `Text` widget with an `ApiVideoPlayer` one:

`ApiVideoPlayer` comes with a parameter `fit` or type `BoxFit` to set how it will behave in its parent widget.

### 4. Make it yours!

You can customize your brand new video player the way you want by changing its colors and adding some event listeners.

## Add some event listeners

There are two ways to add an event listener to your video player controller:

1. When you instantiate the player controller

2. After the player controller has been initialized.

The following sample code shows you how to add an `onPlay` event listener on `ApiVideoPlayerController` instantiation and an `onPause` event listener after the controller has been initialized in the `initState` method.

Modify your code like this to test these two event listeners:

## Customize the theme of your player

You can change your video player’s style by attributing a `PlayerStyle` class to the `style` parameter of your `ApiVideoPlayer` widget:

## Go further

You can access and control the video player features such as the play button, reverse, or forward features from outside of the player. 

Let’s see how we can retrieve the video’s information and control our video player from elsewhere.

### Retrieve the video’s information

The `ApiVideoPlayerController` gives you access to a lot of information about the current video: duration, current time, volume, and many more.

Let’s add a simple button to retrieve the current video duration.

Modify your widget as follows:

## Control the video from outside of the player

You can control the video player from outside of the player thanks to the controller methods.

For instance, we can add an icon button to mute and unmute the video on press.

Modify your widget as follows:

## Full documentation and example

Find the [full documentation](https://github.com/apivideo/api.video-flutter-player) and a [full sample app](https://github.com/apivideo/api.video-flutter-player/tree/main/example) in our GitHub repository. 

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

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

large_05dec22-copie-4.png

medium_05dec22-copie-4.png

small_05dec22-copie-4.png

thumbnail_05dec22-copie-4.png

api-video-player-for-flutter.png

small_olivier.png

thumbnail_olivier.png

olivier.png

Olivier Lando

no code

We've just released a brand new [api.video plugin](https://bubble.io/plugin/apivideo-1632390165248x133502315345739780) on the Bubble.io marketplace. This plugin allows you to use the main features of api.video in your web application (video upload / video player / API calls) without having to write a single line of code.

For those who do not know Bubble.io yet, it is a no-code tool that allows you to build SaaS platforms, marketplaces and CRMs without code.

In this tutorial, we will show you the main features of the api.video plugin, taking as an example the creation of a video sharing site (similar to YouTube, but much... much more rudimentary). This will allow us to discover some of the features offered by our Bubble.io plugin, namely:

* the video uploader element
* the video player element
* the API calls

The result can be seen here: [Bubble demo application](https://api-video-tube.bubbleapps.io/version-test/).

The purpose of this article isn't to describe the api.video plugin in detail, but you can find the full documentation here: [Bubble.io plugin documentation](https://docs.api.video/sdks/nocode/bubbleio-plugin).

## The demo application

Our application is composed of the following pages:

* a home page (public) - the home page contains a thumbnail of each video that has been uploaded on the website
* a video page (public) - it contains a player to watch a specific video (when a user clicks on a video title on the home page, he will arrive here)
* a login / sign up page (public)
* an upload page (logged in users only) - logged in users are able to upload a new video from this page
* an account page (logged in users only) - logged in users are able to manage their videos here

## Database schema

Our Bubble database is composed of only 2 data types: `User` & `Video`. Each video is associated with a `User` entry (the person who uploaded the video).

Here are the schemas of the 2 data types:

### User



large_userschema.png

medium_userschema.png

small_userschema.png

thumbnail_userschema.png

userschema.png

large_videoschema.png

medium_videoschema.png

small_videoschema.png

thumbnail_videoschema.png

videoschema.png

**Here is what it looks like in the Bubble interface:**

large_database.png

medium_database.png

small_database.png

thumbnail_database.png

database.png

## Installation of the api.video plugin

To begin with, we need to add the api.video plugin in the Bubble.io application. You can find the details in our documentation: [api.video Bubble.io plugin](https://docs.api.video/sdks/nocode/bubbleio-plugin). 

## Pages

### Login / sign up page

The login / sign up page consists of two forms: one to register and a second one to log in. By default the login form is hidden. It shows up when the "login" button is clicked. 

#### Sign up form

The sign up form is a standard form with a "Sign up" button and 3 input fields: Email, Password & Password confirmation. When the "Sign up" button is clicked, the user is registered using the standard "sign up" Bubble workflow action. 

At this time, we generate a [delegated upload token](https://api.video/blog/tutorials/delegated-uploads/) from [api.video](https://api.video). This token will be used later, every time the user wants to upload a new video. 

In order to generate the token, we use the `+ Change another field` button in the Bubble action pop-up. As a source for the value, we use `Data from an external API` and select `authenticate - generate upload token`. 

medium_workflow-sign-up-upload-token.png

small_workflow-sign-up-upload-token.png

thumbnail_workflow-sign-up-upload-token.png

workflow-sign-up-upload-token.png

#### Login form

The login form consists of a "Login" button and 2 input fields: Email & Password. When the "Login" button is clicked, the user will be logged in using the *had oc* Bubble action:


small_workflow-login.png

thumbnail_workflow-login.png

workflow-login.png

### Upload page

The upload page will contain
*  two text inputs: "Title" and "Description" 
*  a "Select a video file" button that opens a pop-up to select the video file to upload 
*  a progress bar 
*  a submit button

#### The api.video uploader element

The "Select a video file" button is not a standard button but an api.video uploader element. For more details about this element you can read the documentation here: [Bubble.io uploader element
](https://docs.api.video/sdks/nocode/bubbleio-uploader). The purpose of the uploader element is to offer users of your web application the ability to easily upload videos to api.video.

The element needs one setting: the delegated upload token to use. It will use the one that has been associated with the user when they signed up. To do so, in the "upload token" parameter of the element, we've entered `Current user's upload token`. We've also applied some style to the element to make it fit with the design of our site. 

#### Progress bar

To display the upload progress bar a SimpleProgressBar element is used. Its "Percentage" value is associated with the "percent" value of the video uploader element. 

#### Workflow actions

There are five workflows defined for this page:

large_workflows-upload-page.png

medium_workflows-upload-page.png

small_workflows-upload-page.png

thumbnail_workflows-upload-page.png

workflows-upload-page.png

*  When the user arrives on the page, if they are not logged in, they are redirected to the login page 
*  When the "Title" input becomes not empty and if the video uploader element's `file_selected` value is true (meaning that the user has already selected a video file), then the "Upload" button is shown.
*  Reciprocally, when the `file_selected` becomes true and if the "Title" input field isn't empty, then the "Upload" button is shown.
*  When the "Upload" button is clicked, the "upload" action of the video uploader element is triggered. Also, the form inputs are hidden and the progress bar is shown. 
*  When the "end" event of the video uploader element is triggered, a new Video element is created in the Database. The following attributes are set:
*    videoId: the value of the videoId attribute of the uploader element (this is the id of the new video that has been returned by api.video)
*    user: the current user
*    title: the value of the "Title" input field
*    description: the value of the "Description" input field

### Home page

The home page is pretty basic. It will display a preview of all the videos that have been uploaded by any user of the application. It will look like this:


large_homepage.png

medium_homepage.png

small_homepage.png

thumbnail_homepage.png

homepage.png

#### The repeating group

A [Repeating group](https://manual.bubble.io/core-resources/elements/containers#repeating-group) is used to iterate over all the Video entries stored in the database. 

The datasource query of the repeating group is simple: `Search for videos`. A "Sort by" constraint has been added on the `Created date`field with "Descending" = `false` in order to have the latest videos displayed at the top of the page. 


large_homepage-repeating-group.png

medium_homepage-repeating-group.png

small_homepage-repeating-group.png

thumbnail_homepage-repeating-group.png

homepage-repeating-group.png

#### Repeating group elements: the api.video player element

In each entry of the repeating group, an api.video videoplayer element is used to display a preview of the video. To make the player look like a preview, the following settings are applied:


large_homepage-player-settings.png

medium_homepage-player-settings.png

small_homepage-player-settings.png

thumbnail_homepage-player-settings.png

homepage-player-settings.png

*  `autoplay` is false: we don't want all the players to automatically start when the home page appears
*  `hideControls` and `hideTitle` are true: the players are very small here, we only want to see the video 

Two workflows are also used to handle the video previews. They are respectively triggered when the video player element sends mouseenter and mouseleave events. When the mouse enters the player area, the video playback is launched thanks to the play action of the player element. On the contrary, when the mouse leaves the player area, the pause action is used to stop the playback.

Under the player element, the following details of the video are displayed:

* the title
* the views
* the author's email

The title is a link that redirects the user to the video page of that video.

 

### Video page

Users land on this page after a click on a video preview from the home page. The page layout consists of a large video player, plus some details about the video:

large_video-page.png

medium_video-page.png

small_video-page.png

thumbnail_video-page.png

video-page.png

The same video player element as on the home page is used. The only difference is that when the player element triggers a first play event, a workflow action increments the `views` value of the video in the database. 


### Account page

The Account page has almost the same layout as the home page. It consists of a repeating groups iterating on videos. The main difference here is that the videos are filtered in order to only display the ones that have been uploaded by the current user. The other difference is that a "Delete" button is present next to each video. When clicked, the `delete` endpoint of the api.video API is called, and the video entry is deleted from the database:





large_delete-video.png

medium_delete-video.png

small_delete-video.png

thumbnail_delete-video.png

delete-video.png

## Conclusion 

In this step by step tutorial we have covered the process of building a video sharing application. In particular, we have looked at the following features of the api.video Bubble plugin: 

* the video uploader element
* the video player element
* the API calls

As always, we encourage you to join our [Community Forum](https://community.api.video/) and sign up to our newsletter (you will find the link below this post). 

Bubble.io + api.video: build YouTube-like site with no code

large_bubble_plugin.png

medium_bubble_plugin.png

small_bubble_plugin.png

thumbnail_bubble_plugin.png

bubble_plugin.png

Bubble.io + api.video: build a YouTube-like site with no code

thumbnail_anne-sophie.jpg

anne-sophie.jpg

twitter-brands.svg

Twitter (Anne-Sophie)

Anne-Sophie Poupard

With video files becoming larger and larger, WeTransfer a simple way to transfer them via the internet. 

The service evolved and now it requires extra steps to get started (accept terms, select a video, fill the form, create an account, validate the account, and finally send your video).

We've developed a dead simple tool to upload your videos directly into your local folder! As easy as drag and drop!

small_apivideouploader.png

thumbnail_apivideouploader.png

apivideouploader.png

## How does it work?

1. [Download the app](https://github.com/apivideo/api.video-desktop-synchronizer/releases/latest/) (from GitHub). 
2. When you launch the app for the first time, the Settings window appears. Here, you'll have to enter your api.video API key, and the folder you want to watch:

small_apivideo-local-uploader.png

thumbnail_apivideo-local-uploader.png

apivideo-local-uploader.png

3. Drag and drop videos to the folder
4. And that's it! You'll get sharing links to your transcoded videos

The tool is available for Windows and MacOS clients!


## How is it built?

The application has been developed using the TypeScript language and the Electron framework.
Electron makes the creation of cross-operating system applications possible with only a few lines of code.
All the interaction of the app with the api.video API are made through our [nodejs api client](https://github.com/apivideo/nodejs-api-client). The client handles all the parts that could have been boring to deal with by hand, like the authentication or the upload of big files by chunks.


You can use it to automatically to send your Zoom recordings into your local file too!
Feel free to test it and give us your feedback on [our community forum](https://community.api.video/)!

A handy desktop app for uploading and sharing your videos

A handy desktop app for syncing local folders with api.video

large_sync-app.jpg

medium_sync-app.jpg

small_sync-app.jpg

thumbnail_sync-app.jpg

sync-app.jpg

A handy desktop app for uploading and sharing your videos in a few clicks

doug.jpg

Doug Twitter

Doug Sillars

Zapier is a no-code platform that makes it easy to connect services together - without writing a single line of code.  

&nbsp;  

We recently upgraded our [Zapier integration](https://api.video/catalog/zapier/) to make use of our [API webhooks](https://docs.api.video/reference/api/Webhooks#create-webhook), so that Zapier can instantly report when an event occurs at api.video.

## Our webhooks

We currently have 4 alerts from our webhooks:

* video.encoding.quality.completed: This alert fires when a video quality is ready to playback.
* live-stream.broadcast.started: Alerts you to when a live stream has begun.
* live-stream.broadcast.ended: The opposite alert - the live stream has ended.
* video.source.recorded: Similar to the first, but specifically for when a livestream recording quality is ready.


## Now available in Zapier

When the webhook alert from api.video occurs, Zapier is alerted immediately.  That's why Zapier calls these triggers "Instant triggers"- there is no polling delay to know when the Zap must begin:

large_screenshot-2021-10-21-at-20-46-46.png

medium_screenshot-2021-10-21-at-20-46-46.png

small_screenshot-2021-10-21-at-20-46-46.png

thumbnail_screenshot-2021-10-21-at-20-46-46.png

api-video-instant-zaps.png

As shown in the above screenshot, there are currently 4 instant Zap triggers offered by api.video.

* **Live stream started**  This alert will fire whenever a livestream has started.  You can filter on the liveStreamId to create a custom integration for a specific live stream ("when stream liXXX goes live - send an alert to a Discord channel), or have it fire for all of our live streams (livestream "liYYY" is now live.  Watch it here <link>") 
* **Live stream started** this is the opposite of the first alert - so the Discord channel knows the stream has ended "sorry you missed us, tune in tomorrow".
* **Video encoded completed**  This webhook fires for each version of the video created.  Currently, api.video encodes video at 240p, 360p, 480p, 720p, 1080p and 2160p.  When you create the Zap, you choose which size you wish to be alerted on.  For example, if you only want to show a video once the quality has reached 480p, you define the Zap to trigger when the 480p version of the video is ready, and then you'll receive that alert.
* **All live events**: This webhook incorporates all 3 live stream webhook events: started, ended and video.source.recorded (at a specific resolution). This allows you to create more elaborate Zaps with various paths based on the results - while just using one webhook.  

&nbsp;  

Each Zap you create with the instant triggers will create a webhook at api.video (and when you disable the Zap, the webhook will be removed).  

&nbsp;  

> Note: There is a limit of 10 webhooks per account at api.video, so there should be some consideration on how the number of "instant Zaps" will affect your webhook limits.  

&nbsp;  


In the below example, we use Zapier paths and the *All Live Events* trigger to do 3 different things - depending on the event type that is reported. (Note: Zapier paths require a "professional" level Zapier account.)  

&nbsp;  


We're very excited to see how instant Zaps can help our no-code developers build apps that react instantly to changes in their api.video account.

large_screenshot-2021-10-22-at-10-55-09.png

medium_screenshot-2021-10-22-at-10-55-09.png

small_screenshot-2021-10-22-at-10-55-09.png

thumbnail_screenshot-2021-10-22-at-10-55-09.png

zapier-trigger.png

These Triggers are all live at [Zapier](https://zapier.com/apps/apivideo/integrations), and our [docs](https://docs.api.video/sdks/nocode/zapier) are updated with more details on how to integrate each trigger and action.

Our Zapier integration now features instant triggers

medium_Ecosys_Zapier.png

small_Ecosys_Zapier.png

thumbnail_Ecosys_Zapier.png

Ecosystem_Zapier.png

This tutorial shows you how to configure Zapier so that whenever you add a new video to api.video, an email is sent notifying people. This is a no-code solution, you just follow the configuration steps to combine the applications using Zapier. If you've created an api.video zap before, you can skip ahead to the section 'Configure Gmail as Your Action Event.' 

## Prerequisites 
You'll need these things to successfully complete this project:

* api.video account - if you don't have an accunt, you can create one [here](https://dashboard.api.video/register).
* Gmail account
* Zapier account
* This tutorial assumes familiarity with Zapier

You can check out the webhook used for this project in the api.video API reference documentation: [Webhooks](https://docs.api.video/reference/api/Webhooks#list-all-webhooks)

api.video, gmail, zapier, email notifications when video is uploaded

chooseintegration.png

## Configure api.video as the Trigger Event
To get started, you need to configure api.video as the trigger event for sending an email. In Zapier, the trigger event is something that occurs with the chosen product that results in you wanting to take action. In this case, whenever a new video is created in api.video, we want something to happen. 

1. Make sure you've added a sample video to your account for testing. You should add it right before trying this tutorial. If you haven't, add something to test with now. We're using production here, so you'll want to add a video to your production environment before starting.
2. You're prompted to choose your account. If you're already connected because you tried out a different zap with api.video, you'll see your account as a choice. Otherwise, you'll see **Sign in to api.video**. Click this option.
3. You're asked if Zapier can have access to your api.video account. Enter your API key to get started. If you choose your production API key, you'll receive an alert whenever you add a new video to production on your account. If you choose your sandbox API key, you'll receive an alert whenever you add a new video to your sandbox. NOTE: You can get the key you want from [api.video dashboard](https://dashboard.api.video/register).
4. After you enter your API key, click **Yes, Continue**.
5. You'll see your account listed with the start of your authorization token if all goes well. Click **Continue**.
6. Now it's time to set up your trigger. From the **Trigger Event** drop-down, select **New Video**. 
7. Click **Continue**.
8. Leave the Title and Tags fields empty. 
9. Click **Continue**.
10. You can now test your trigger. Click **Test trigger**. If all goes well, you get a response saying 'We found a video!' If not, the recommendation is to add a video to your account. Make sure you've added the video to right part of your account! You can add a video and try again. You can also clear your browser cache and try again. If it continues not working, contact us in our [community forum](https://community.api.video/)).

## Configure Gmail as Your Action Event
Gmail is going to provide our action event. In Zapier, an action event is a response to a trigger event. When api.video sends notification that a new video is created, Gmail responds with an action event - which is sending an email to a list of selected recipients stating that the video is now available.

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

No-code

Managing videos with No-Code platforms