Player

Normal

small_api-video-romain-petit.png

thumbnail_api-video-romain-petit.png

api-video-romain-petit.png

Romain Petit

Tutorials

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/docs/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).

large_28mar23-copie.png

medium_28mar23-copie.png

small_28mar23-copie.png

thumbnail_28mar23-copie.png

28mar23-copie.png

Switch to api.video Swift player

thumbnail_thibault_rond.png

thibault_rond.png

Thibault Beyou

If you've developed an existing Android application with a video player, you may be looking for ways to enhance the video playback experience for your users. One solution to consider is using [api.video](http://api.video) player: customizable design, advanced playback features, and easy integration.

This tutorial will demonstrate how to easily use your player to play video from api.video. Let’s go! ▶️

## Before getting started

To help you migrate your video content to api.video, we’ve built a tool that allows you to quickly and easily import your videos from another provider (e.g. Dropbox or Vimeo) to your api.video dashboard. All you need is an API key and the provider’s access token. You can [get started with a few clicks](https://import.api.video/).

## Extensions

In this tutorial, we will often talk about extensions. If you are not familiar with the concept of extensions, let me explain: it is a way to extend a class or an interface with new functionality. And… it is a kind of magic 🪄 

Here is a quick example:

Then, you can use it as a regular property:

## Installation

In your module `build.gradle`, add

where `X.X.X` is the latest version of [api.video Android player](https://github.com/apivideo/api.video-android-player).

## Video Options

On api.video, each video is identified by a unique identifier called video Id. You can find the video Id in the dashboard or in the video list. In this tutorial, replace `YOUR_VIDEO_ID` with the video Id of your video.

To set an api.video video Id, you have to pass it through a `VideoOptions` instance:

If you are using private videos you will also have to pass the private token.

A private token is a unique token that can be used only once to access a specific private video.

Then, to simplify migration, we have made some specific extensions for 3 main Android players:

- ExoPlayer
- VideoView
- MediaPlayer

## Extensions for ExoPlayer

`ExoPlayer` provides 2 main ways to play a video on your `ExoPlayer` instance:

- `addMediaSource` or `addMediaItem`: adds the video to the playlist
- `setMediaSource` or `setMediaItem`: clears the playlist and adds the video

With the api.video Android player Exoplayer extensions, you can directly use these methods with a `VideoOptions` method.

## Extensions for VideoView

The api.video Android player provides extensions to play a new video with a VideoView:

## Extensions for MediaPlayer

The api.video Android player provides extensions to play a new video with a MediaPlayer:

## Private video

The extension will send a request for the private videos to get the token session. If this request fails, the error will be returned in the `onError` callback of the previous methods.

If you want to check that no error has happened, write:

## Conclusion

Let’s go. Let’s play video from [api.video](http://api.video) from your own Android video player now 🎉🎉🎉🎉

large_switch_player.png

medium_switch_player.png

small_switch_player.png

thumbnail_switch_player.png

switch_player.png

Switch your existing Android player to api.video

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/docs/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/docs).
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/list-videos)*
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/docs)** and **[sign up for a free account](https://dashboard.api.video/register).**

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

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

video api

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

Dart

Flutter

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](http://api.video)!

medium_screenshot-2022-12-05-at-10-56-04.png

small_screenshot-2022-12-05-at-10-56-04.png

thumbnail_screenshot-2022-12-05-at-10-56-04.png

screenshot-2022-12-05-at-10-56-04.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/post_videos-videoid-source)

large_screenshot-2022-11-28-at-15-20-26.png

medium_screenshot-2022-11-28-at-15-20-26.png

small_screenshot-2022-11-28-at-15-20-26.png

thumbnail_screenshot-2022-11-28-at-15-20-26.png

screenshot-2022-11-28-at-15-20-26.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 web usage

If your application is or will be used as a web app, you need to add the api.video PlayerSdk script to the `web/index.html` file of your project.

## 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:

### 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 colors by attributing a `PlayerTheme` class to the `theme` 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/docs)** and **[sign up for a free account](https://dashboard.api.video/register)**.

large_05dec22-copie-4.png

medium_05dec22-copie-4.png

small_05dec22-copie-4.png

thumbnail_05dec22-copie-4.png

05dec22-copie-4.png

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

Android

Mobile

Private Videos

Player update

Kotlin

We have now released an [api.video](https://api.video/) player for Android. The api.video player helps you to include your videos in your Android applications very easily and quickly. In this tutorial, we are going to show how to add an api.video player to your Android application. It will only take 5 minutes. Let’s do this! 👊

Before starting this tutorial, you can upload a video to your api.video. If you haven’t yet, you can check [Upload your first video guide](https://docs.api.video/docs/upload-your-first-video), which will walk you through your first video upload. The video that you have uploaded to your api.video account will have an assigned `videoId`. In the following steps, we will call for your videoId using the `YOUR_VIDEO_ID` parameter.

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

## The api.video player for Android

The api.video Android player is available on GitHub and comes with an example application, and the artifact is hosted on Maven Central.

The minimum Android API version supported by the api.video Android player is 24. Make sure that you don’t have a `minSdk` version under 24.

The API is divided into 2 main components:

- **The player view:** This component displays the video and its controls: `ApiVideoExoPlayerView` class.
- **The player controller:** This component controls the video and its events: `ApiVideoPlayerController` class.

## Add api.video Android player to your project

If you don’t have an Android application yet, you need to create one before you go further. The [Build Your First Android App in Java](https://developer.android.com/codelabs/build-your-first-android-app#0) is a simple guide that will help you create your Android application. 

### Dependency

The first thing is to add the [api.video](https://api.video/) Android player to your project dependencies. In your application `build.gradle`, add your `dependencies` tag as shown below:

It’s always good to check out if a [new version](https://github.com/apivideo/api.video-android-player/releases) is available.

To have access to the view, I am going to use `ViewBinding` in this tutorial because it is elegant to use as it will be more user-friendly. Now we add the `android` tag:

### XML Layout

In your `Activity` layout, add a player view:

You might have some constraints to add depending on the parent layout.

With `ViewBinding`, we can access our `ApiVideoExoPlayerView` by using the following field:

### Implementation

The main part of the implementation is to create a player controller, but it depends on several other components.

To manipulate video from api.video, the `videoId` is wrapped in an object called `VideoOptions`:

Create a player controller in your `Activity`. For example, in the `onResume`:

Launch the application. You have successfully integrated the [api.video](http://api.video) Android player in your application! 🥳🥳🥳

### Video privacy setting

For more information on changing video privacy settings, see this [article](https://api.video/blog/product-updates/video-access-management-how-to-create-deliver-and-manage-private-videos-and-what/).

If your application requires the use of private videos, then pass your private token to the `VideoOptions`:

### Fullscreen

For the fullscreen button, you will have to develop the fullscreen behavior. The base principles are: 

* When full screen is activated, hide all surrounding views, menu,…, and lock the application in landscape mode.
* When the full screen is deactivated, display surrounding views and unlock the application orientation.

These behaviors must be implemented on the `onFullScreenModeChanged` of `ApiVideoExoPlayerView.Listener`:

In this quick tutorial, you learned about how to simply add an [api.video](http://api.video) player for your Android application. Now you know how to add the api.video player as a dependency, configure the XML layout, and implement the player controller. Moreover, you learned how to change your video privacy and how to set up a fullscreen behavior. 

You can successfully integrate the api.video Android player in your own application by following the steps in this tutorial. For an example of api.video Android player, see the [example](https://github.com/apivideo/api.video-android-player/tree/main/example) provided in the player repository.

If you miss any features, face any bugs, or come across any other issues, we will be happy to help you on our [GitHub issues](https://github.com/apivideo/api.video-android-player/issues) page.🤝

large_23nov22-1.png

medium_23nov22-1.png

small_23nov22-1.png

thumbnail_23nov22-1.png

23nov22-1.png

How to add an api.video player to your Android application

Player SDK

video create

Video list

Video upload

thumbnail_mathieu_round-1.png

mathieu_round-1.png

Github Mathieu Thiry

linkedin_logo_initials.png

LinkedIn Mathieu Thiry

Mathieu Thiry

React

Typescript

Next.js

This tutorial will show how quick and straightforward it is to build a TikTok clone as a progressive web app (PWA) with [api.video](https://api.video) and Next.js. A PWA is a website that looks and behaves like a mobile app. It can have all the capabilities of a native mobile app, like design and functionality, and you can even install it on your phone!

TikTok’s core functionality is to create and share short-form content. So today, we will focus on these crucial features:
- **Get** videos with [@api.video-node.js-client](https://github.com/apivideo/api.video-nodejs-client) package
- **Display** videos with [@api.video/react-player](https://github.com/apivideo/api.video-react-player) package
- **Upload** videos with [@api.video-typescript-uploader](https://github.com/apivideo/api.video-typescript-uploader) package
    
Thanks to these 3 easy-to-use api.video tools, you will have everything you need to build a **smooth scrolling** TikTok feed. Let's start 🎬
    

*NB: You can see the demo [here](https://api-video-tiktok-demo.vercel.app) and the complete code [here](https://github.com/apivideo/tiktok_clone). We invite you to clone the project, insert your free-to-use API key from our Sandbox environment and start testing it with your videos!*

Screenshot TikTok demo on desktop screen size

large_cover_image_tiktok_clone.png

medium_cover_image_tiktok_clone.png

small_cover_image_tiktok_clone.png

thumbnail_cover_image_tiktok_clone.png

cover_image_tiktok_clone.png

## Quick Setup

As in this tutorial, we will focus on the core features. We provide two links on how to start the project easily: 

We created a dedicated [tutorial](https://github.com/apivideo/Next.js_Starters-) on building a **new Next.js application** using Create Next App and Typescript. Please follow these [instructions](https://github.com/apivideo/Next.js_Starters-) to get an up-to-date Next.js app.

1. Transform the Next.js app into a PWA with [next-pwa](https://www.npmjs.com/package/next-pwa). Complete all steps with this article [here](https://blog.avneesh.tech/how-to-create-a-pwa-with-nextjs).
2. Once inside our project, install api.video’s [Node.js client](https://github.com/apivideo/api.video-nodejs-client), [typescript video uploader](https://www.npmjs.com/package/@api.video/video-uploader), [react’s player SDK](https://www.npmjs.com/package/@api.video/react-player), and [swr](https://www.npmjs.com/package/swr) for data fetching.

## Get videos

## Back-end: **Create API routes with api.video/nodejs-client**

You can declare the API under the `pages/api` directory. When you declare a file or folder inside `pages/api`, it will generate an URL endpoint that matches `/api/<folder>/<file>`. We set our API key in an environment variable in the `.env.local` file for security.

Now create a `pages/api/videos/index.ts` file. Inside this file, add the following code:

We can get videos in just a few lines of code by applying the method `list`. Check more methods you can use with our *nodejs* client [here](https://github.com/apivideo/api.video-nodejs-client/blob/main/doc/api/VideosApi.md#list).

### Front-end: Client-side data fetching

**Initialize swr**

[useSWR](https://swr.vercel.app/docs/getting-started) is a React Hook library made by Vercel. It fetches data from an API or other external source, then saves that data in a cache and renders the data. We configure swr in `_app.tsx`.

The useSWR hook takes two parameters and returns data. It accepts the following:

- A `Key`: API URL we are calling.
- A `fetcher`: a function that returns the fetched data.

We call `useSWR` hook. Once we get the result, we store data in the state `videos`. Then, we  `map` videos around  `VideoComponent`, whose role is to display videos.

### How to create smooth scrolling

thumbnail_screenshot_mobile.png

screenshot_mobile.png

The app has a `height: 100vh`. It has 2 sections. The first one, the div `app__video`, is scrollable with a `height: calc(100%-50px)`, and the second one, the upload section, has a fixed `height: 50px`.

**CSS scroll snap**

As written above, the class `app__videos` has the property `scroll-snap-type: y mandatory;` and  `overflow-y: scroll;` making the scroll vertical. This property allows for the creation of well-controlled scroll experiences by declaring a scroll snapping position, in our case, at the `start` of the video. To obtain this perfect result, we just need to add the property `scroll-snap-align: start` to the child component, here the `ApiVideoPlayer` *(see code in the section below.)*

## Display videos

We are going to use [api.video react player component](https://github.com/apivideo/api.video-react-player), which allows us to display our videos in just a few lines of code. The only requirement is to pass the `videoId`. Create a `ref` to manipulate methods like `pause` or `play` easily. We set the `object-fit` CSS property in `cover` to ensure that even a landscape video will take the full size.

## Upload a video

[api.video](http://api.video) provides a [typescript library](https://www.npmjs.com/package/@api.video/video-uploader) to upload videos to api.video using delegated upload token. The easiest way to create an upload token is to open your api.video’s dashboard, go to the upload tokens section from the sidebar, then click on the “*Create upload token*” button. Find the full guide [here](https://docs.api.video/docs/create-and-manage-tokens-for-delegated-uploads).

**Upload using delegated upload token**

We create a hidden input with a type `file` that we activate programmatically. Create a new object `VideoUploader`, and add two options, the `upload token` set as an environment variable for security purposes and the current `file` to upload.

That’s it. You are done 🎉. Now you can safely and efficiently upload videos.

## Conclusion

We recreated TikTok thanks to api.video’s features in just a few steps. We did not cover every topic, but the entire code is available [here](https://github.com/apivideo/tiktok_clone).

And we're done! To start building right now, check out our **[docs](https://docs.api.video/docs)** and **[sign up for a free account](https://dashboard.api.video/register)**.

***BONUS***

In this part, I will explain how **to send** 💟’s

Each video object has a `metadata` property containing an array of key-value objects. So we can add a ‘*likes*’ metadata with a numeric value and increase this value when the user has pressed on the 🤍 icon!

To record the new data, we need to update the video by making an API call 

Note: Find a full description of the upload method [here](https://github.com/apivideo/api.video-nodejs-client/blob/main/doc/api/VideosApi.md#update). 

large_cover-tiktok-s-clone.png

medium_cover-tiktok-s-clone.png

small_cover-tiktok-s-clone.png

thumbnail_cover-tiktok-s-clone.png

cover-tiktok-s-clone.png

Build your own TikTok with PWA and api.video

live - create

medium_screen-shot-2021-01-26-at-11-48-47-am.jpg

small_screen-shot-2021-01-26-at-11-48-47-am.jpg

thumbnail_screen-shot-2021-01-26-at-11-48-47-am.jpg

screen-shot-2021-01-26-at-11-48-47-am.jpg

Erikka Innes

No-code

Python

Today we'll use OBS (Open Broadcaster Software), the api.video API, and Python to set up a live stream! A common interest people have right away is being able to live stream straight from the browser. If this is something you need, you'll want to check out this demo - [livestream.a.video](https://livestream.a.video/) - instead of this tutorial. There are various reasons that live streaming from the browser isn't common, but explaining why is beyond the scope of this tutorial. So if you're ready, onwards! Let's set up our own live stream! 

<center><iframe src="https://giphy.com/embed/RJUfP3Kx2J3s8yRRgV" width="480" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/cbc-schitts-creek-RJUfP3Kx2J3s8yRRgV"></a></p><br></center>

A quick note before we get started - you can create and view your live stream without doing any coding. However, at the very end, if you want to add your live stream to your own custom web page, you do use a tiny bit of code. It's an extra step you can take if you want. Otherwise stick with the other sections for a no-code experience! 

If you are interested in the coding aspects, you can check out our [live stream API reference documentation](https://docs.api.video/reference/get_live-streams).

## Prerequisites
For this project you'll need:
* OBS - we will install as part of the walk through, so don't worry if you don't have it yet
* api.video [account](https://dashboard.api.video/register) and API key (for this tutorial, we're using the production key, which requires a paid account - but everything will work with your sandbox key if you prefer)
* Mac - you can also use a PC, but this tutorial is geared towards a Mac so you'll need to make adjustments as needed
* Video camera - if you have a Mac, we'll use the built-in camera. If you don't have something built in, you'll need to have something else available and it will probably require a bit more set up than what's described here. Ask our [community forum](https://community.api.video/) for help.

If you've got your prerequisites in order, let's get started!

## Create a player and a live stream
We'll want a player for our live stream, and you'll also want to associate your player with your live stream when we create the live stream. You don't have to use an api.video player if you don't want to, but for the purposes of the walk through, we will.

1. [Log in](https://dashboard.api.video/register) to your api.video account.
2. At the top of the dashboard, click **My videos**. You're taken to go.api.video.
3. At the top of the screen, click **Players**. You're taken to the Players screen.
4. Click the **+Add Player** button. You're taken to the Add a player screen.
5. You can choose how you want to configure your player here, from choosing colors for the different parts of the player, to details about whether the player is accessible via API and more. For our walk through, leave the settings to their default arrangement. Click **Save player**. 
6. Make a note of the player ID or leave this screen open while we work on other parts of the project. 
7. Go back to the dashboard, which is the screen you first see when you log into your api.video account. 
8. At the top of the dashboard, click **My videos**. A screen offering tabs for Videos, Live and Players opens. 
9. Click **Live**.
10. Click **Create a live stream**. The Edit a live stream screen opens. 
11. In the **Name** field, put a name for your live stream. I'm going to call mine 'Bob.' 
12. Leave **Player id** blank.
13. Click **Save livestream**. What we've done, is set up our live stream. We can't use it just yet, but we're almost there.
14. Click on the live stream you just created. You'll be able to see all kinds of details about the live stream. We're going to need a few pieces of information from this screen, so leave it open. Of particular importance is the **Stream key** and the **RTMP Server Url**. Leave this page open, and let's get OBS ready. 

## Install and configure Open Broadcast Studio
Now we need to set up OBS so we can get our live stream. 

1. Navigate to [obsproject.com](https://obsproject.com).
2. Choose the product appropriate for your operating system. This tutorial will focus on the mac version. Click **macOS 10.13+**. 
3. Install the dmg file, drag the icon over to applications, and open OBS. 
4. When you open OBS for the first time after installation, it offers a configuration wizard. This wizard doesn't reappear on its own again, but it can be accessed by clicking **Tools** at the top of the screen and choosing **Auto-Configuration Wizard**. (We are going to use the wizard, because it does some configuration for you that's useful if it's your first time using OBS.) 


large_obs.png

medium_obs.png

small_obs.png

thumbnail_obs.png

obs.png

5. Whether you opened automatically on the wizard, or you clicked **Tools** and chose the wizard, the next step is to choose how you want your OBS set-up optimized. Because we're going to do live streaming, choose **Optimize for streaming, recording is secondary**.
6. Click **Next**.
7. The wizard shows you some settings it's selected for you. Leave them as-is and click **Next**.
8. Now it's time to add your stream information. We left the api.video dashboard open on the page where you set up your live stream. Go back and grab the server information **rtmp://broadcast.api.video/s**. Enter that in the **Server** field in the OBS wizard.
9. Retrieve the stream key from the api.video dashboard and enter that in the **Stream Key** field in the OBS wizard. Leave the dashboard open, we'll be coming back again.
10. Click **Next**. You'll be notified that a bandwidth test is about to start. Running the test is a good way to optimize your configuration, and make sure you can contact the api.video rtmp server. 
11. Click **Yes**. A screen that looks like static will appear behind the wizard. You'll see information presented as OBS completes different test results. The final output will tell you the settings you should use for your system. For this walk through, accept the suggested settings. You can manually set them later if you want something different.
12. Click **Apply Settings**.
13. Before we move on, you may have had the experience where you couldn't connect to the api.video server. If this happens, often the problem is that OBS is being blocked by a firewall, or similar issue. Some things to check are your VPN settings, any firewall settings that are directly on your computer or network, and any firewall settings that might be on your router. We can't specifically list steps to take to solve this because all set ups are different. If your issue happens to be on your router, you need to log in and figure out how to change security to allow OBS through.

## Create a Source
Now we need to configure what we'll be streaming from. For simplicity's sake, we're going to use the built-in camera that comes with your Mac. If you have a PC or another reason that you want to use a different camera, you'll have to connect it and tweak these steps as needed to continue. 

1. Under Sources, click the **+** button. 
2. Choose **Video Capture Device**. You'll get a pop up asking if you want to create a new device.
3. Choose **Create new** and name your device. 
4. Click **OK**. 
5. Choose your device from the Device drop-down. For this walk through, it will be **FaceTime HD Camera (Built-in)**. If it's working, you should immediately see what the device sees. If you are using a different camera, make sure it's on, and you are able to see what it sees through OBS. 

## Start Streaming
It's time to start streaming! 

<center><iframe src="https://giphy.com/embed/k1X9ENMVk25uo" width="343" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/headlikeanorange-river-stream-headlikeanorange-k1X9ENMVk25uo"></a></p><br></center>

1. Click **Start Streaming**. If it's working, it'll switch to saying 'Stop Streaming.' You'll see streaming health at the bottom of the screen - how many kb per second, and a square that's either green, yellow, or red. Green is healthy and means things are going well. Yellow means things have slowed a bit, and Red means things have slowed a lot. 
2. To check out your live stream, go to the api.video dashboard and press the **Play** icon on your live stream. If all goes well it should start up! 
3. If you like, you can now add the embed link or iframe to a web page and watch your stream that way. You can also open the stream as a link in the browser and watch it there! 

## Stream in Your Own Web Page with a Player
If you want to generate your own web page to stream in, we'll use a tiny bit of Python code and HTML. 

Here's the code sample:

To run this, we've used a sample web page from [here](https://http://anh.cs.luc.edu/python/hands-on/3.1/handsonHtml/webtemplates.html).

What the code is doing, is building a web page from a string. You pass a string that consists of the HTML code you need for a simple web page to the function browseLocal. In browseLocal, you write the string to a new html file, import what you'll need to present a web page, then open the web page by opening your new html file. The strToFile function is used to write the string to the html file you open. Cool huh? 

This is it for live streaming today. If you want to do more with your live stream (for example if you want to delete it), you'll need to work with the API. We'll live stream using python in a [future post](https://api.video/blog/tutorials/live-stream-to-the-browser-with-ffmpeg-cli-and-python)! 

If you have any questions or suggestions, please join our [community forum](https://community.api.video/).

## You May Also Like...

* [Live Stream to the Browser with FFMPEG CLI and Python](https://api.video/blog/tutorials/live-stream-to-the-browser-with-ffmpeg-cli-and-python) - Quickly create sample code that lets you start a livestream and display it in your browser. 
* [Live Stream From Your Android Phone](https://api.video/blog/tutorials/livestream-from-your-android-phone) - Use a free app from Google Play to live stream from your Android phone. 
* [Secure Live Streams with a Unique Overlay](https://api.video/blog/tutorials/secure-live-streams-with-unique-overlay) - Learn how to secure your live streams with a watermark that's unique to each viewer.

large_nathan-anderson-yqesar7snli-unsplash.jpg

medium_nathan-anderson-yqesar7snli-unsplash.jpg

small_nathan-anderson-yqesar7snli-unsplash.jpg

thumbnail_nathan-anderson-yqesar7snli-unsplash.jpg

nathan-anderson-yqesar7snli-unsplash.jpg

Live stream with OBS and api.video

doug.jpg

twitter-brands.svg

Doug Twitter

Doug Sillars

Your company’s brand is unique.  Shouldn’t the video player that you use your 
branding & your colour scheme… not the YouTube/Google corporate colour scheme?

## api.video player

api.video, in addition to fast video [encoding](https://api.video/encoding), [streaming](https://api.video/streaming) and storage, has a fully customisable player that allows you to have greater control over how your video is presented. By default, here’s what it looks like:

This is a video of Bucky Badger (the mascot for the University of Wisconsin-Madison) dancing at a basketball game. (On Wisconsin!)

Sports teams are **highly** identifiable by their colors - fans wear scarves, shirts in “their” teams colours to show their support. 

The colors for the Wisconsin Badgers are Badger (Cardinal Red) and White. A close look at the screenshot above shows that the api.video logo (while awesome) is closer to the colours of the University of Minnesota (and we just can't Gopher that!). The play button is blue, and while unlikely to be mistaken for the dark blue of Penn State or (shudder) the University of Michigan, it certainly does not match the Badger color scheme.  Let’s dive in and learn how to build a custom player with api.video that uses the [University of Wisconsin color scheme](https://brand.wisc.edu/web/colors/).

## Create a New Player

The first step in creating your new player is, well, to create a new player.  You’ll need your api key from the [api.video dashboard](https://my.api.video/).  Use this to [authenticate your account](https://api.video/blog/tutorials/authentication-tutorial), and receive an access token that will be good for an hour. 



To create a player, we’ll use the [create player](https://docs.api.video/reference/post_players) endpoint. A quick scan of the API shows that you can pretty much customise the player completely on creation, but we’ll go one step at a time to show the differences each change incurs.

To create the default player, we’ll use the API and use no parameters in the JSON (make sure you replace {accessToken} with the token you received in the last step):


To which we will receive a response that resembles:

Hooray! We’ve created a player (ptSQlESqn5KIn9tGxlA88Q1) that we can now customise. Before we begin customising the player, we must associate it with a video to see it.  Using the [Update Video](https://docs.api.video/reference/patch-video) endpoint, and the videoId (vi3666MejLyqtJOOHFIwGCA9) for the Bucky Badger video, we will change the playerId parameter to our new player:


The response JSON (not shown) for the video shows that the new playerId is now present in the response, indicating that the change was successful. Now we can begin walking through the various customisations that are possible with the player, and see them with this video.  

### Assets

There are 2 API endpoints to edit a player. The [Upload Logo](https://docs.api.video/reference/post_players-playerid-logo) endpoint is specifically for changing the logo on the player.  It requires 2 parameters, an image file (JPG or PNG, 100x200 pixels max) and a url.  When the icon in the player is clicked, a new tab will open the url. For example: the default api.video player features the api.video logo, that, when clicked, takes the user to the [api.video](https://api.video) homepage.
