Normal

doug.jpg

twitter-brands.svg

Doug Twitter

Doug Sillars

Tutorials

NodeJS

We've launched a number of demos at [a.video](https://a.video) to demonstrate the power of [api.video's APIs](https://api.video) and our video in the cloud service.  We have apps featuring video uploading, video streaming and also mashup collaborations that include auto-captioning, video moderation, live video chat and others with some select partners.

You might want to launch one of these demos for your own application or process - using your api.video account.  In this post, we'll walk through the steps we use to launch new demos for a.video, and if you follow along, you can launch your own versions in your Heroku account.

## Heroku

Heroku is a service that makes it easy to spin up a server, add your code, and launch a service on the internet.  We use Heroku for all the a.video demos, so will walk through the steps we perform in order to launch our demo applications.

## record.a.video

The [record.a.video](https://record.a.video) demo has been very popular. It allows you to record your screen and camera right from the browser.  You can choose to send that feed to api.video as a live stream, or record the video, and send it to our video hosting platform for later on demand viewing.

In this post, we'll take the record.a.video code from Github, and launch our own personal version of the application on Heroku.  At that point, you can update the page to match your expected user experience, and have a working app with just a little bit of work.

First off, we'll want to grab the code from Github.  Head to the [recordavideo](https://github.com/apivideo/recordavideo) repository, and fork it into your account:




medium_screenshot-2021-10-20-at-12-38-16.png

small_screenshot-2021-10-20-at-12-38-16.png

thumbnail_screenshot-2021-10-20-at-12-38-16.png

screenshot-2021-10-20-at-12-38-16.png

You should now have the repository in your account, with the format ```https://github.com/<your accountname>/recordavideo```.  

Before we can go live, the app uses a few api.video configurations that are set to the team's account, and you'll want to switch to yours.

There are a couple of ways to do this - you can clone the repository to your machine to make the edits (and then push the fixes back to Github). If you 've used Github a lot, this will feel like second nature.  For those who have not used git regularly, you can manually change 3 lines of code using the web interface.

We need to change the first 3 lines of ```/public/index.js```.  


```
RTMP_url = 'rtmp://broadcast.api.video/s/30087931-229e-42cf-b5f9-e91bcc1f7332';
live_url = 'https://embed.api.video/live/li400mYKSgQ6xs7taUeSaEKr';
delegated_token = 'tompBU8ZJcUCEsKGxxoBydh';
```

Record a video allows you to livestream, or upload a recorded video.  The RTMP_url and live_url are used for live streaming.  The video from the browser is sent to the RTMP_url, and then the broadcast is visible from the live_url.

* To set these up, you must [create a livestream](https://docs.api.video/reference/api/Live-Streams#create-live-stream) using our API.  We have a [tutorial using cURL](https://api.video/blog/tutorials/live-stream-tutorial/) to help you create a live stream. This will give you the RTMP and live URLs to update lines 1 and 2.
* Next, we'll create a delegated token, for the video on demand upload option. For this, we'll use the [generate upload token](https://docs.api.video/reference/api/Upload-Tokens#generate-an-upload-token) API endpoint - (and the corresponding [curl tutorial](https://api.video/blog/tutorials/delegated-uploads/).

Once you've updated the ```public/index.js``` with your values, we're ready to launch on Heroku.

Create a free account (or login) to [Heroku](https://dashboard.heroku.com/apps).  You'll land at your dashboard, and in the upper right corner is a button "New."  Choose "Create new app" from the menu.

The name "recordavideo" is taken, so pick another descriptive name for your application:


large_screenshot-2021-10-20-at-16-04-25.png

medium_screenshot-2021-10-20-at-16-04-25.png

small_screenshot-2021-10-20-at-16-04-25.png

thumbnail_screenshot-2021-10-20-at-16-04-25.png

screenshot-2021-10-20-at-16-04-25.png

Once you create the application, you'll land at the Heroku dashboard for the app, in the "Deploy" section.  We want to deploy via Github, so in the center, click the Github logo.  Then, choose the Github account and search for the repository you wish to deploy.  In the screenshot below, I have selected repordavideo in the dougsillars github account:

large_heroku-deploy.png

medium_heroku-deploy.png

small_heroku-deploy.png

thumbnail_heroku-deploy.png

heroku-deploy.png

Once you connect your repository, you can set it up to automatically redeploy when changes are made in Github.  Enable this, so when you do update the UI/UX, it will automatically appear in the launched app.  You can also manually deploy the repository from here.

### Settings

Move to the Settings tab in the dashboard to further configure your server.  The record.a.video application uses ffmpeg on the Node server - it [transmuxes](https://api.video/what-is/transmuxing) the video from the canvas on the screen into RTMP for api.video.  We need to tell Heroku to install FFmpeg.  There is a buildpack already created ```https://github.com/jonathanong/heroku-buildpack-ffmpeg-latest.git``` so we'll add it. Then we will add the NodeJS buildpack.



large_buildpacks.png

medium_buildpacks.png

small_buildpacks.png

thumbnail_buildpacks.png

buildpacks.png

> Note: the buildpack for the language must be the last one on the list. If the order is reversed, your app will not build.

In the table above, you can add any environmental variables (there are none in this app, but many NodeJS apps use process.env.<variablename> to reference API keys and other values that should not be published into github, or left referenced in code.
	
For example:

```
const apiVideoKey = process.env.apiProductionKey;

```
	
You would have apiProductionKey in these variables - referenciung your api video production API key.
	

large_env.png

medium_env.png

small_env.png

thumbnail_env.png

env.png

With all these settings made, you can now go back to the "deploy" tab and manually deploy your application. Once that is completed, you can visit the URL listed in the settings page to run your own copy of record.a.video (or whichever app you copied).

### Bonus steps

If you have a domain you;d like to use, the Settings tab allows you to set a domain that will point to this app's instance. You'll need to do CNAME DNS work to make this all happen, but this is how we get our apps to point to our ```a.video``` subdomains.


## Conclusion

That's all there is to it - simply pick your app, fork it, and update to your API keys/ settings, and follow the steps to deploy on Heroku.



Build an api.video demo with Heroku

medium_screenshot-2021-10-21-at-10-59-29.jpg

small_screenshot-2021-10-21-at-10-59-29.jpg

thumbnail_screenshot-2021-10-21-at-10-59-29.jpg

screenshot-2021-10-21-at-10-59-29.jpg

video create

Video upload

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

The first step to displaying your video online is getting it uploaded. Today we'll go over how to upload a video using Laravel 8 with api.video's PHP Client. Before we dive in, let's go over what we'll be doing when we upload a video. 

Uploading a video is a two step process. First, we create a container for the video and retrieve the video ID. Then, we upload a video into the container by referencing the ID. You can only upload a video to a container once, but you can modify details about the video at any time after that. Our uploader will let you add a title, description and list whether you want to have the video be public or private and whether you want to offer an MP4 link of the video for download. 

## What you'll need 
To get started, make sure you have these things:

* Account with api.video - you can sign up [here](https://dashboard.api.video/register)
* Laravel 8 - you can use other versions, but some things work differently
* NPM and node.js - you install these when you set up Laravel 
* Composer - you'll need this installed 
* [api.video PHP client](https://github.com/apivideo/php-api-client)
* Project repository - [https://github.com/apivideo/php-api-client/tree/main/examples/laravel/video_upload](https://github.com/apivideo/php-api-client/tree/main/examples/laravel/video_upload)

You can also review the API reference documentation for the endpoints used in this project: 
* [Create a video](https://docs.api.video/reference/api/Videos#create-a-video-object)
* [Upload a video](https://docs.api.video/reference/api/Videos#upload-a-video)

## Create your project
The first thing you'll need is a Laravel 8 project to work with. Here's what I did:

1. In a terminal make a new project by typing: **laravel new fileuploader** or similar project name.
2. Open your project folder, you'll need to install a few things.  
3. You'll need to add the api.video PHP client, so at the terminal type: **composer require api-video/php-api-client** 
4. You'll also need the symfony http client, at the terminal type: 
**composer require symfony/http-client**
5. And the last thing to add is nyholm/psr7:
**composer require nyholm/psr7**

You can type **composer update** to make sure everything is pulled in to your project and configured.
 
## Create a controller
We will need a controller for our video uploader, so let's go ahead and do that now. In the terminal in your project folder type: 

**php artisan make:controller UploadController** 

This will automatically create what we need to start building the controller. 

## Set up the home page with an upload form
For this walkthrough, we're using the home page to create an upload form. So in your views folder, go into **home.blade.php** and create the form. I selected to allow the user to add basic details about their project. I'm also using bootstrap, so the basic form looks like this: 

Image of upload form showing available fields

large_viduploadphp.png

medium_viduploadphp.png

small_viduploadphp.png

thumbnail_viduploadphp.png

viduploadphp.png

And here is the code that creates this form: 

We pull in the bootstrap details up top under the Scripts and Styles sections. Then for our form, we have all the form data sent in a POST request to the '/upload' route. (We'll need to create that route in a moment.) 

The form is straightforward - we list the type of data as text for the name of the file and the description of the file. For choosing whether the file will be public or offer an MP4 for download, we use a radio button, so the type is radio. For the video, we choose type file and then we set up our submit button. Bootstrap styles everything for us, so we're all set here. Now we need to handle the route. 

## Set up the /upload route
Open your **web.php** file and add a new route: 

**Route::post('/upload', 'UploadController@upload');** 

This route indicates that when submit is clicked in the form, it should go to /upload and carry out the upload instructions listed for the UploadController. 

We don't have that set up yet, so let's do that next. Also, the other routes are added into the project, you can see everything if you download the repository.

## Set up your UploadController
Our controller takes the details provided by the form, then uploads the content to api.video. Behind the scenes, we're going to need our api.video API key, so let's make sure we handle it securely. 

1. Go to your .env file. In the top section, you'll see items to do with your app. At the bottom of the list of items beginning **APP_** you'll see **APP_APIVIDEO=yourapikey**. Replace **yourapikey** with your key (retrieve it from your api.video dashboard). Don't add quotes. 
2. Open **RouteServiceProvider.php**.
3. In the file, take the commenting **\\** off of the line **protected $namespace = 'App\\Http\\Controllers';**. This returns the use of the automatic namespace, which is handy.
4. Open **UploadController.php**. 
5. Add this code: 


In our code, we set up the api.video client and collect the information from the request object that comes in from the form. We check if the data for the radio buttons is set and if it is, we add it to our payload for upload. Then we send the data and redirect the user to a page that says 'Success!' 

## Conclusion
These are the basics for uploading a video to api.video. You can try using different styles or set ups if you want to allow users to add more metadata on upload. If you have any questions or suggestions, please share them on our [community forum](https://community.api.video/). Thanks for reading! 



Upload a video with Laravel

webhooks

JavaScript

Video bumpers are small video intro and exit scenes added to a video to help the viewer understand what they are about to watch.  The intro 'bumper' often has a title or description of the video that is to follow, and the outro 'bumper' provides a call to action on what the viewer can do next - now that they have watched the video.

At api.video, we add bumpers to many of our videos to provide context and a subject for each video, and the end bumper provides a 'call to action' after the video has been watched.

Adding bumpers to your video makes your video appear more polished, as an editing step was taken to add these to the raw video you recorded with your camera (or screen sharing tool).  It is often a manual task in your video editing software.

In this post, we'll automate the task of adding bumpers to a video recording.  We'll use the [Shotstack API](https://shotstack.io/) to add the bumper image and text titles to the front and end of a recorded video.  The completed video will then be uploaded to api.video, and be ready to play in seconds - removing several manual steps from the creation of your training videos!

You can also check out the API reference documentation for the endpoints used for this project: 
* [Webhooks](https://docs.api.video/reference/api/Webhooks#create-webhook)
* [Video status](https://docs.api.video/reference/api/Videos#retrieve-video-status-and-details)

## The "old way" of adding bumpers:

1. Create slides in Google Slides for the intro & outro
2. Take screenshots of the slides
3. Import the screenshots into iMovie
4. Add them to the video timeline
5. Encode the video
6. Upload the video to api.video


The downsides to this: 
Steps 1-4 are all manual, and are repeated for each video that I create.
In steps 5&6 there is a lot of waiting.  

## The "new way": bumper.a.video

Add images, text and video to a web form. Click "upload." The video will upload and have the bumpers added automatically - with no manual work, and (what seems like) a lot less waiting.



Let's see how it is built!


## Ingredients for the demo

* [api.video account](https://dashboard.api.video/register)
* Background image: a 16:9 image suitable for the background

large_bumperbackground.png

medium_bumperbackground.png

small_bumperbackground.png

thumbnail_bumperbackground.png

bumperbackground.png

* Watermark image.  In this demo, we'll use the api.video logo. It is sized to 100x100 pixels to fit properly on the video. The image is also transparent to ensure that there is no white "background" on top of the video.

logoorange100.png


* 4 Text fields

  * Intro title
  * Intro 2nd title
  * Outro title
  * Outro 2nd title


## The tools used in this demo

### Shotstack

The Shotstack API is a video editing API. You can splice together videos, add watermarks, and add text into your video using their API.  We'll use this API to create our bumpers:

1. Upload a background image (we use the same image for both bumpers)
2. Add a title and a 2nd title for both bumpers (text fields)
3. Add a watermark in the upper right corner for the entire video.

### api.video

The initial video will be uploaded to api.video. Once the mp4 has been produced, it is sent to Shotstack for 'bumper work.' Once the video with bumpers has been created via the Shotstack API, we will re-add the completed video to api.video, and provide a playback url.


## Creating the video

Once you hit 'send' on the form at bumper.a.video, a lot of action takes place:

1. The 2 images are uploaded to bumper.a.video/images.  Shotstack requires that the images be publically available on the internet for the api to process them.
2. The video is uploaded to api.video.  For security reasons there are a few steps in this process:

   * The node server makes 2 calls to api.video: creating a delegated token and a videoId (with the name & description provided by the user). 
   * A delegated token works as a public API token for upload only.  
   * Sending this and the videoID back to the browser, we can use the api.video [JavaScript uploader](https://docs.api.video/sdks/vod/apivideo-typescript-uploader) to securely upload the video to api.video.
3. Once the video is uploaded - a message appears to the user, and a button appears to update the status of the processing.

Now that the video has been uploaded to api.video, the rest of the work is done between the Node server, api.video and Shotstack. 

1. Shotstack requires a publically available video URL for processing the video.  We use the ```video.encoding.quality.completed``` [webhook](https://docs.api.video/reference/api/Webhooks#create-webhook) to monitor the creation of the videos at api.video. When the webhook alert tells us that the mp4 version of the video has been created, we know that the mp4 file is ready.  Now we can request the api for the URL of the mp4 (to send to Shotstack).
2. In order to build the bumpers correctly, we also need the duration of the video uploaded. The [video status](https://docs.api.video/reference/api/Videos#retrieve-video-status-and-details) endpoint tells us the duration of the video in the metadata section of the response.

### Creating the call to Shotstack

The Shotstack API works like an onion with many layers that must be defined to create a full video: 

Every video has a ```timeline``` that defines the overall video.

Each ```timeline``` has one or more ```tracks```.  Tracks sit atop one another (in our case, we will have a watermark track sitting atop the video track).

Each ```track``` has one or more ```clips```.  The clips are bits of video/text or images that have specific durations inside the track.

Each ```clip``` has an ```asset``` that defines the clip - this could be a string of text, or an image or a video file.



large_screenshot-2021-09-30-at-17-10-37.png

medium_screenshot-2021-09-30-at-17-10-37.png

small_screenshot-2021-09-30-at-17-10-37.png

thumbnail_screenshot-2021-09-30-at-17-10-37.png

screenshot-2021-09-30-at-17-10-37.png

There are two tracks that play the length of the video - the watermark track - which has a single clip for the single image asset.

the code for this (using the NodeJS SDK) looks like this:

```
let watermarkAsset = new Shotstack.ImageAsset;
							watermarkAsset.setSrc('https://bumper.a.video/images/'+wmpath)
						//watermark to run full video 
						let watermarkClip = new Shotstack.Clip;
							watermarkClip.setAsset(watermarkAsset);
							watermarkClip.setPosition("topLeft");
							watermarkClip.setOffset({"x": 0.05,"y": -0.05});
							watermarkClip.setOpacity(0.5);
							watermarkClip.setFit("none");
							watermarkClip.setStart(0);
							watermarkClip.setLength(4+duration+4);
```

The clip is used to set the location - in this case the top left - with a bit of (x,y) adjustment, the opacity (50%), and how long the clip should play.

Since the intro and outro are 4 seconds, and the video has length ```duration``` - we set this clip to appear for the entire video.

The main track of the video has many clips (and assets).  Both the intro and outro have background and 2 text assets each, and the middle section has just the video clip/asset.

Shotstack does not like having clips with identical times. That means I cannot add the titles at the same moment as the background image. I could have perhaps placed the text items into different tracks to overlay the background - and then had them all start at the same time.  Instead I have the background appear, and then add each bit of text every 100ms:

```
						let titleIntroTextAsset =new Shotstack.TitleAsset;
							titleIntroTextAsset.setText(introTitle);
							titleIntroTextAsset.setStyle('chunk');
							titleIntroTextAsset.setColor('#ffffff');
							titleIntroTextAsset.setSize('x-large');
							titleIntroTextAsset.setPosition('center');
						let titleIntroClip = new Shotstack.Clip;
							titleIntroClip.setAsset(titleIntroTextAsset);
							titleIntroClip.setStart(0.1);
							titleIntroClip.setLength(3.9);

						let titleIntroTextAsset2 =new Shotstack.TitleAsset;
							titleIntroTextAsset2.setText(introTitle2);
							titleIntroTextAsset2.setStyle('chunk');
							titleIntroTextAsset2.setColor('#ffffff');
							titleIntroTextAsset2.setSize('large');
							titleIntroTextAsset2.setPosition('bottom');
						let titleIntroClip2 = new Shotstack.Clip;
							titleIntroClip2.setAsset(titleIntroTextAsset2);
							titleIntroClip2.setStart(0.2);
							titleIntroClip2.setLength(3.8);
```

The main text asset is present from 100ms into the video to 3.9s, and the secondary text asset is present from 200ms to 3.8s.  It looks kind of cool, as if they are boomeranging in and out, so I kept it this way.

The video clip in the middle has the volume set to 50%. It starts at 4s, and has a length of ```duration``` seconds.

```
						let videoAsset = new Shotstack.VideoAsset;
							videoAsset.setSrc(mp4Url);
							videoAsset.setVolume(0.5);
						let videoClip =  new Shotstack.Clip;
							videoClip.setAsset(videoAsset);
							videoClip.setStart(4);
							videoClip.setLength(duration);
```


All of this data is sent to the Shotstack API, and it begins processing the video - adding the watermark and the bumpers.

Once the video is completed (the Node server polls every 2s to get an update), a new video at api.video is created, using the source URL from Shotstack:


```
	function updateApiVideo(url){
							//ok so the video is created at Stostack
							const videoCreationPayload = {
								title: title, // The title of your new video.
								description: descr, // A brief description of your video.
								source: url, // If you add a video already on the web, this is where you enter the url for the video.
								
							}; 
							finalUpload =  client.videos.create(videoCreationPayload);
							finalUpload.then (function(finalVideo) {
								console.log(finalVideo);
								var finalvideoId = finalVideo.videoId;
								var finalPlayerURL = finalVideo.assets.player;
								console.log('finalvideoid',finalvideoId);
								console.log('finalPlayerURL',finalPlayerURL);
								//res.send(finalPlayerURL);
								videoProgressJson.finalVideoId = finalvideoId;
								videoProgressJson.finalPlayerURL = finalPlayerURL;
								videoStatus(videocreationList, videoId);



							});
						}
```

Finally - we use the same video encoding webhook we used earlier to wait until the 720p version of the video is ready for playback (looking for the new videoID, and the HLS version at 720p resolution).

The user - back on the webpage, can click the "update status" button and track this process.  The update status reports:

* Initial mp4 created
* Shotstack id
* Shotstack status
* New api.video videoID
* Final video at 720p

When the last item reports true - we add a link and embed the new video right onto the bumper.a.video page.

## Conclusion

Automating the mundane tasks we run regularly makes life easier. In this demo, I identified a process that was very manual - creating video bumpers for demo videos.  I used [api.video](https://api.video) and [Shotstack.io](https://shotstack.io) to automate the process, and thereby making the creation of video demos faster and easier!

If you have any questions or suggestions, please share them on our [community forum](https://community.api.video). If you still need to create your api.video account, you can do that in just a few moments by following [this link](https://dashboard.api.video/register). Happy building! 

Add bumpers to your video with bumper.a.video

large_bumperavideo-1.png

medium_bumperavideo-1.png

small_bumperavideo-1.png

thumbnail_bumperavideo-1.png

bumperavideo-1.png

Product updates

At api.video, our goal is to make the process of working with video seamless. Principally, we do that via our APIs that make it really simple to encode, store, and deliver video worldwide. Another aspect, however, is that we need to make those APIs as accessible as possible via the tools that your company might already be using.

Today, we're pleased to announce our new app on the [Contentful marketplace](https://www.contentful.com/marketplace/app/api-video/). Our app makes it easy to bring video content to your websites and apps via Contentful and gives your entire team access to our powerful video APIs (check out our [API documentation](https://docs.api.video/reference)) right from the Contentful user interface.

In this post, we'll do a quick walkthrough on how to connect your api.video account to Contentful. 

All you'll need is:

1. A free Contentful account
2. An api.video API key (Get a free sandbox key [here](https://my.api.video))


## Installing the api.video app in Contentful


Log into your Contentful account and add the [api.video app](https://www.contentful.com/marketplace/app/api-video/) by clicking "Apps" and then "Manage apps" in the main nav bar.

Input your api.video API key first. You'll also notice that there is a list of your JSON objects are listed. The api.video app is meant to be connected to JSON object types in Contentful. If you don't see any objects listed, that's ok, we'll add a JSON object in the next step.

large_apivideoapp.jpg

medium_apivideoapp.jpg

small_apivideoapp.jpg

thumbnail_apivideoapp.jpg

apivideoapp.jpg

## Adding api.video to content models

In this section we'll add api.video to 2 different content models:

1. A new JSON object
2. Add it to the Component:Video Object


### A new JSON object

In the top menu, select "Content Model", and a new page will open with all the models/components in your app.  Choose the "Add content type" button on the top right to begin creating a new type:

large_contentful-headers.png

medium_contentful-headers.png

small_contentful-headers.png

thumbnail_contentful-headers.png

contentful-headers.png

large_namingthemodel.png

medium_namingthemodel.png

small_namingthemodel.png

thumbnail_namingthemodel.png

namingthemodel.png

The UI will walk you through adding fields. Click the blue button to add a field, and then add a JSON Object. You'll be asked to name the field - choose a name that reminds you that it is an api.video object that is being added.

Click the "Create and Configure" button, and under "Appearance" choose api.video:


large_modelconfiguration.png

medium_modelconfiguration.png

small_modelconfiguration.png

thumbnail_modelconfiguration.png

modelconfiguration.png

You may want to create a second field so that all items created with this object have a title.  Create a new field, text, Short text, and when you configure the item, click the "Entry title" button.  (If you do not add this step, every object you add will be named "Untitled" which is less than ideal.)


Your new component model now appears as an item to add when composing a page:


large_addingcomponent.png

medium_addingcomponent.png

small_addingcomponent.png

thumbnail_addingcomponent.png

addingcomponent.png

### Modifying the Component:video model

Contentful has a built in video model that you can add the api.video app to.  Let's walk through the steps to do that.

In the "Content Model" section, click on the "Component:Video" model.  This will give you a page that shows all the fields in the model.  By default, it has 2 fields, the title, and a YouTube Video Id.  We'll modify this so that you can still use a YouTube video Id, but you can also add an api.video object.

#### Add the api.video object

Click the "add field" button on the right. Add a JSON object, and name the field "apivideo" or another term that helps you remember where the videos will be stored.  Click the "Create and Configure" button, and then under Appearance, add the api.video app.


#### Edit the YouTube object

The Component:Video model is designed to only work with YouTube, and one of the settings is that the YouTube video Id is required.  We're making this model more flexible (YouTube AND api.video), so we need to remove this requirement.  Click the settings button, and under "Validation" you'll uncheck the "Required field" checkbox



large_checkbox-removal.png

medium_checkbox-removal.png

small_checkbox-removal.png

thumbnail_checkbox-removal.png

checkbox-removal.png

With these changes, we are now ready to save the Component:video model.


## Adding api.video videos to Contentful

The process is very similar - no matter which type of object you created in the last step.

### Using the Content section

In the top menu, choose content, and then pick the model you wish to use (in the screenshots, I've used the Component:Video model.


The title is 'My Awesome video', and I'm skipping the YouTube section - it's no longer required! With the api.video app, you can choose a video already uploaded to api.video ("select an existing video"), or upload a new video (descriptively named "upload a new video").



large_addingavideo.png

medium_addingavideo.png

small_addingavideo.png

thumbnail_addingavideo.png

addingavideo.png

If you choose an existing video, you can search through your api.video library by title, making video discovery easy.



large_videosearch.png

medium_videosearch.png

small_videosearch.png

thumbnail_videosearch.png

videosearch.png

Now just publish the content, and you've added the video for playback!

You can also add the content model in a page you are building and follow the same steps to add an api.video to your site.






large_screenshot-2021-10-08-at-14-18-13.png

medium_screenshot-2021-10-08-at-14-18-13.png

small_screenshot-2021-10-08-at-14-18-13.png

thumbnail_screenshot-2021-10-08-at-14-18-13.png

screenshot-2021-10-08-at-14-18-13.png

With the "upload a video" option - you'll get the option to upload a video from your local drive. The app will upload the video to api.video, and then show it in the window when it is ready to play.


## Conclusion

We're super excited to see what folks will build with api.video and Contentful. If you're looking for an easy way to integrate video into your application - give our integration a try with the [api.video app](https://www.contentful.com/marketplace/app/api-video/).

Questions? Our [documentation](https://docs.api.video/sdks/nocode/contentful) has more details.  Or, feel free to ask a question with the chat button, or check out our [community forum](https://community.api.video).

New Contentful integration: Adding video more easily

large_apivideo-contentful.png

medium_apivideo-contentful.png

small_apivideo-contentful.png

thumbnail_apivideo-contentful.png

apivideo-contentful.png

New Contentful integration: Adding video to your site just got even easier

Laravel is a great framework for building web applications. It does a lot of the heavy lifting for you, so you can focus your development efforts on the more unique elements of your application. Because there are multiple versions of Laravel and many of the packages you'll use with it have their own updates, it can sometimes get tricky to troubleshoot. There are many troubleshooting suggestions online, and this quick article aims to help sift those for the best tips. 

## Check your version of Laravel
One issue you will encounter is matching your version of Laravel to the advice you find online. This guide may work for other versions of Laravel, but is intended for Laravel 8. When troubleshooting, make sure you are conscious of what version you have and what version the tips you find are for.

## Bootstrap isn't working in my Laravel project
You must properly install Bootstrap for your Laravel project in order to add it to your files. If you find that Bootstrap styling isn't appearing on your HTML pages as expected, this section may be for you.

### How to install Bootstrap 4 for Laravel
To install Bootstrap 4 for your Laravel project, you do these things: 

1. At the command line, type `composer require laravel/ui`.
2. At the command line, type `php artisan ui bootstrap` if you just want Bootstrap for your project but don't plan to do any authentication. If you want to handle authentication in your project with bootstrap, then type `php artisan ui bootstrap --auth`. 
3. You'll also need to make sure npm is installed, so at the command line, type `npm install`.
4. Finally, at the command line run `npm run dev`.  

Some problems that might arise are having packages that aren't up to date, or issues with installing Laravel Mix. You can search online for how to handle packages that aren't up to date if there's a special issue. For the Laravel Mix issue, simply run `npm run dev` again. It often solves the issue.

### How to add Bootstrap 4 to your blade files 
To add Bootstrap 4 into your **blade.php** files, you use mustache quotes {{}} to reference the Bootstrap content you'll need. It looks like this: 

You may see the choice where you just reference a link to a public distribution, but blade files work differently. You need to use the mustache quotes version to add the files.

### Bootstrap still isn't working 
You'll see a note on installation that you don't have the most recent version of popperjs. If you want to update that to see if it corrects your issue, you can use the following command: 

`npm i @popperjs/core` 

## I don't see the changes I made to SASS and JS
If you don't see changes implemented in your application after updating something in SASS or JS files, the issue might be that you didn't run `npm run dev` again. Every time you change content here, you must use this command. If you don't want to do that and want to continually see your changes while you're making them, you can use `npm run watch`. This command will start regularly checking your files and recompiling every time it detects new changes. 

## I made changes to my application and they're not reflected on my server
If you made changes that are not just updates to the views, you may need to restart your server. You can do that like this: 

1. Press **Control + C** at the same time.
2. Type in the terminal in your project folder `php artisan serve`. 

## I installed a new library 
If you install a new library with Composer, you need to make sure you pull in all the new changes that causes. In the terminal type: 

`composer update` 

## I made changes to my database schema 
If you change your database schema or add something new, you need to run a migration. This is pretty simple, type: 

`php artisan migrate:fresh`

## My application isn't accessing my public folder correctly
To make sure your application accesses your public folder, which is where you'll often store assets, you need to create symbolic links for your application: 

`php artisan storage:link` 

## I'm still not sure why I can't see changes I made
If you get stuck, an easy thing to try is: 

`php artisan config:clear` - this clears your cache file. If you corrected something, but the cache isn't cleared, you might not be able to see your update. 

## The route I want isn't displaying
The order of routes in your **web.php** file matters! If you put routes that include variables first, it can mess up the flow of your application. Try to put concrete routes first, and then routes with flexible components after. 

## My controllers aren't found
In Laravel 8, the automatic namespace is turned off. If you want the same functionality as earlier versions of Laravel back, go to **RouteServiceProvider.php** and make it so `protected $namespace = 'App\\Http\\Controllers';` is no longer commented out.

## Conclusion 
When working with Laravel, there are lots of small details to remember. Updating and refreshing various aspects of your application can help correct a lot of problems you may encounter. If you want to try building something with api.video and Laravel, check out our post [Create your own version of Instagram using api.video and Laravel](https://api.video/blog/tutorials/create-your-own-version-of-instagram-using-api-video-and-laravel/).

Troubleshooting tips for your Laravel 8 project

medium_laravel8logo.png

small_laravel8logo.png

thumbnail_laravel8logo.png

laravel8logo.png

No-code

[NFTs](https://api.video/what-is/nft) (non-fungible tokens) are super popular these days. You've no doubt heard that people sell NFTs for their art, be it music, painting, writing, drawings, videos and more. Some artists use NFTs to sell special tickets to their concerts and sometimes video games even sell in-game items using NFTs. But what, you might ask, are they selling that requires the NFT? Well, non-fungible means unique token, and the idea is that it's something that can't be copied. So an NFT is like a digital certificate that shows that you own a particular asset or piece of digital art. 

So if it's not something that can be copied, how come there's copies of files sold as part of NFTs? The idea is that when you buy the NFT you get the original work, or you get one of a limited batch that are certified by using an NFT. If it's something widely available - like an internet meme, then the NFT is there to show ownership even if there are copies of that file available online elsewhere. Sometimes the NFT includes special rights, like only you can use the asset as part of an avatar. For example if you bought a digital drawing as an NFT, it might be that only you can set it as your profile picture, or something similar. Also, because the NFT is a unique token that is part of the blockchain for a cryptocurrency, its entire ownership history can be tracked. 

A couple of common misconceptions about NFTs are that they are expensive, and that you need to use Ethereum to create them. In terms of price point, there are two popular ways of viewing NFTs. One is NFTs as expensive fine art but in the digital space. The very wealthy will collect these, they're often one-of-a-kind and that's that. The other way is the NFT as a trading card. There might be multiple copies of it in a batch, similar to a trading card, but the number of "cards" is limited. This type of NFT is often more affordable. As for requiring Ethereum to create an NFT, this is just one of the most popular cryptocurrencies to make them with. You can add NFTs to many kinds of cryptocurrency other than Ethereum.

There are several cool things about NFTs - you can buy them to support an artist or a project or cause you care about. You can buy them and join groups where being part of the group requires that you own a particular type of NFT. And, when an NFT is sold, they can be set up so that the original artist always receives royalties on them for every sale. This can help put artists on the map or earn them much needed income they require to continue making art. 

There are a few different ways NFTs are set up. Sometimes NFTs can be set up somewhere like opensea.io where they house the asset for you and act as a digital marketplace where people can browse what you're selling. Embedding digital assets directly into each NFT can get cumbersome. So what's common, is the NFT contains details about where you can go to see the digital art or download it if it is yours. The art is then kept somewhere else. In the case of video, you could store your NFT content with a service like us here at api.video. If privacy is a key component of the art being sold, there are different ways you can gate the content. 

If it sounds a little complicated, maybe it will be clearer after we create our own video NFT! Today, we'll learn how to make an NFT with RenderForest, Ethereum, MetaMask, and Mintgate. 

Ready to build your own NFT? Let's get started! 

## Create something worthy of becoming an NFT
The first step is creating the asset you want to use for an NFT. Just for fun, I went ahead and created a short video of api.video's logo appearing out of a giant green fireball! To achieve this magic, I used [renderforest.com](https://www.renderforest.com/). They offer a wide variety of incredible ways to animate your company logo or other image. Possibly this isn't going to be the biggest selling NFT, but it works great for our tutorial today. 

## Let's set up our cryptocurrency wallet and buy some Ethereum! 
The next big task is setting up a cryptocurrency wallet to buy Ethereum with. MetaMask is a popular cryptocurrency wallet to use, because it's easy to connect with NFT marketplaces, where you're going to want to put your NFT up for sale and to be seen. Here's the steps: 

1. Navigate to [https://metamask.io](https://metamask.io).
2. Click **Download** on the front page. You're taken to a page that allows you various downloading choices like Chrome, iOS and Android. 
3. Choose the download option that works best for you. If you're following along exactly, then click the **Chrome** button at the top of the page. You'll see a corresponding download button after you select your environment. For Chrome, it will say **Install MetaMask for Chrome**. 


large_installmetamask.png

medium_installmetamask.png

small_installmetamask.png

thumbnail_installmetamask.png

installmetamask.png

4. Click **Install MetaMask for Chrome**. This will quickly set up MetaMask as a Chrome extension. You'll have to walk through signing up, creating a wallet and getting your secret pass phrase for security. Just follow the steps provided by the wizard, beginning with choosing **Create a wallet**.



large_createmetamaskwallet.png

medium_createmetamaskwallet.png

small_createmetamaskwallet.png

thumbnail_createmetamaskwallet.png

createmetamaskwallet.png

5. When you're done, MetaMask is installed. You'll be asked if you want to buy cryptocurrency. To do this you have to use another service, like Wyre. Follow the provided instructions to go to Wyre, sign up, and buy cryptocurrency for your account. 
6. Now you have a wallet with cryptocurrency. If you want to look in your wallet, you can click the icon to the left of your profile icon in the upper right corner of the Chrome browser. You'll be able to choose MetaMask from a list of extensions. It will then show the icon at the top of the browser. You can hover over it to see the contents of your wallet. 

## Let's add our NFT to an NFT marketplace 
There are many choices for where to create an NFT. Typically you connect your wallet to what's called an NFT marketplace. NFT marketplaces let you create and sell NFTs as well as buy them. You can build collections to display to others for show and to offer for sale. A lot of marketplaces will also house the digital assets you're buying and selling. This can get more complicated with larger assets, or in cases where you want to keep assets private rather than open to viewings by the public. That's why we're going to use [MintGate](https://www.mintgate.app/). MintGate is an NFT marketplace that allows you to securely gate your NFT content so that it's only viewable by people who have access to a viewing token. Here are the instructions: 

1. If you haven't already, [sign up](https://dashboard.api.video/register) for an api.video account so we can upload your video NFT to your api.video account. This is a no-code tutorial, so we'll use the GUI. 
2. Sign in to api.video, and drag your video over the giant **Upload** button. Check that you have it uploaded correctly by clicking **My videos**. You should see that it's been added.
3. Click on your new video, and then click the **Edit video** button. 
4. Uncheck the box for **mp4 support**. This makes it so the video can't be downloaded from a player.  
5. Navigate to [https://mintgate.app](https://mintgate.app). The front page describes what their marketplace does - it allows you to token gate content and generate secret links for events, videos, music, websites, blogs and whatever else you might want to link to. 
6. Click the blue **Create** button. 
7. Click **Content NFT**. 
11. For **What NFT do you wanna create?** click **Gated Link**.
12. Go up to the right corner of the browser and open the MetaMask extension and make sure your wallet shows as connected. If not, follow the instructions for connecting it.
13. In the **Add Content** field, put a link to your video you uploaded to api.video. You can get this link by navigating to your video through [the dashboard](https://dashboard.api.video/overview) and then clicking the video. Click **Copy link** to grab just the link and then add it to the field. 
14. For **Set a Title** name your link.
15. Add a description in the **Add a Description** field.
16. For **Add a Cover**, choose an image to display for your NFT.
17. In the **Number of NFTs** field, enter 10.
18. In the **Set Price in ETH** field, enter the price you want to charge. This is where you can make the NFT you're creating very expensive or very cheap. Today I'm choosing to set the price at **.001** which will come out to about $3.3. 
19. Next, **Choose your royalties**. This is how much you'll receive when your NFT is resold by a buyer later. I'm choosing **10%**. 
20. Click **Create NFT!** You'll get a note saying **Please Wait for Wallet Prompts... Click Sign on Both Prompts to Create NFT**.
21. The place where you need to sign doesn't open automatically - go to your MetaMask extension to see the request. Scroll down and click **Sign**. You'll have to do it a few times.
22. Congrats! Your NFT is now available for sale. You can add additional content to it if you want, or leave it as-is. MintGate uses something called lazy minting, so your NFT will not be fully minted until you have a buyer.

## Conclusion 

MintGate offers a wide variety of options for what you can create and gate. If you had fun creating this NFT, you might want to try out some of the other features and options they offer to create different kinds of NFTs. 

If you have any questions about this post, or would like to continue the coversation, please join our [community forum](https://community.api.video/). 

Create an NFT with api.video, Ethereum, MintGate, Metamask 

medium_thenft.png

small_thenft.png

thumbnail_thenft.png

thenft.png

Create an NFT with api.video, Ethereum, MintGate, and Metamask (without breaking the bank)

A year ago, we looked at how [fast videos are encoded](https://api.video/blog/product-updates/video-encoding-rates-2h-2020/) at api.video. Over the past year, we've made huge upgrades to how we store and deliver video, as well as completely revamped our encoding infrastructure.  

In this post, we'll look at how quickly you can expect your video to be ready today, and we'll do some comparisons to our encoding speed 12 months ago.

## **TL;dr** Our encoding pipeline is a LOT faster. The median video encoding time is 20-40% faster over last year. We see even more impressive results at the 95th percentile where we are 48-63% faster year over year.  This means faster access to the videos uploaded for all of our customers and their users.

## Encoding process

When your video is uploaded to api.video, we take the video and create several different versions of the video HLS [adaptive bitrate streams](https://api.video/what-is/adaptive-bitrate-streaming) and a [mp4](https://api.video/what-is/mp4/) version of the video.

The streams will have several different sizes: 240p, 360p, 480p, 720p, 1080p and 2160p.  We'll create versions up to the size of the video uploaded but no larger (so a 720p uploaded video will not have a 1080p or 2160p video).

The mp4 will be the size of the uploaded video (unless the video is 4K, where a 1080p mp4 version will be created.)

Based on data from June - September, we can count each encoded HLS version and determine the size of the original video:



large_encoded-video-size.png

medium_encoded-video-size.png

small_encoded-video-size.png

thumbnail_encoded-video-size.png

encoded-video-size.png



* 80% of videos uploaded are 720p or better, and 50% of all videos are either 1080p or 4K.


## Encoding time

As each version of the video is encoded, we measure the amount of time it took. 

There are two features that determine the encoding time - the size (dimensions) and duration of the video.

### video dimensions
A 240p video has 102,240 pixels in each frame (426x240).  A 1080p video has 2,073,600 pixels in each frame (1920x1080). With fewer pixels, the 240p video will generally encode faster than a 1080p video of the same duration.

### video duration

A video that is 1 minute long and encoded at 24 [frames per second](https://api.video/what-is/framerate-frames-per-second-fps/) will have 1,440 frames to be encoded. A 5 minute long video will have 7,200 frames, and will take longer to encode.

To try to make sense of this, we'll break down the video encoding times by the video's size, and create buckets of lengths, so that when we compare video encoding times, we are looking at videos of similar duration.

## Percentiles

Percentiles allow us to rank our data into even segments that add up to 100 - making comparison across different collections of data easier. The median value is the 50th percentile, or the value that falls exactly in the middle of the data set. In our charts, we'll show 25%, 50%, 75% (quartile data) for the encoding times.  We also will show the 90 and 95th percentiles, as these can give you an idea of the longer times a video might take to encode.



## Short video encoding (under 5 minutes)

Let's take a look at short videos - those that are under 5 minutes long.  we can calculate the tie it will take for each version to be created:



large_video-encode-times-2021.png

medium_video-encode-times-2021.png

small_video-encode-times-2021.png

thumbnail_video-encode-times-2021.png

video-encode-times-2021.png

The black line shows the 50th percentile - or when 50% of videos will have been encoded.  50% of videos will have a 240p version of the video ready in 7.8 seconds, a 720p version in 15.3 seconds, and a 4K in 35s.

95% of videos under 5 minutes will have the 720p video in 85s or less.  Larger sized videos take longer, and the 95th percentile for the 4K videos is 384s.

You can compare these numbers to the data from 2020, and they are very similar - within a few seconds of the data from a year ago.  We have a few tricks up our sleeve to make the next data set faster for these shorter videos.


## Longer video encoding

In order to compare against the data from a year ago, let's look at the encode times for videos 45-75 minutes long.  Note that the 2020 data omits the 4K data, as there were not enough 4k files at this duration to make a good analysis.  Here is the data at the 50th percentile:



large_50thpercentile-encode-data.png

medium_50thpercentile-encode-data.png

small_50thpercentile-encode-data.png

thumbnail_50thpercentile-encode-data.png

50thpercentile-encode-data.png

medium_screenshot-2021-09-27-at-19-57-03.png

small_screenshot-2021-09-27-at-19-57-03.png

thumbnail_screenshot-2021-09-27-at-19-57-03.png

screenshot-2021-09-27-at-19-57-03.png

The encoding for the median video is 21-38% faster, depending on the size of the video. A really nice improvement!

When reporting performance of our service, we want to monitor the 95th percentile - because we want EVERY video encoding to be fast.  In the chart below, we can see that difference between 2020 and 2021 is even larger at the 95% percentile than it is at the 50th:

Video on demand

Live streaming

Analytics

See all features

Online learning

Short-form videos

Marketplace & E-commerce

Video messaging and recording

Quick start guides

Documentation

Ecosystem catalog

Clients & SDKs

Community

Blog

Demos

Help center

Blog

Huge pricing update! Introducing video encoding at zero cost