Normal

small_olivier.png

thumbnail_olivier.png

olivier.png

Olivier Lando

No-code

no code

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

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

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

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

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

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

## The demo application

Our application is composed of the following pages:

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

## Database schema

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

Here are the schemas of the 2 data types:

### User



large_userschema.png

medium_userschema.png

small_userschema.png

thumbnail_userschema.png

userschema.png

large_videoschema.png

medium_videoschema.png

small_videoschema.png

thumbnail_videoschema.png

videoschema.png

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

large_database.png

medium_database.png

small_database.png

thumbnail_database.png

database.png

## Installation of the api.video plugin

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

## Pages

### Login / sign up page

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

#### Sign up form

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

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

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

medium_workflow-sign-up-upload-token.png

small_workflow-sign-up-upload-token.png

thumbnail_workflow-sign-up-upload-token.png

workflow-sign-up-upload-token.png

#### Login form

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


small_workflow-login.png

thumbnail_workflow-login.png

workflow-login.png

### Upload page

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

#### The api.video uploader element

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

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

#### Progress bar

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

#### Workflow actions

There are five workflows defined for this page:

large_workflows-upload-page.png

medium_workflows-upload-page.png

small_workflows-upload-page.png

thumbnail_workflows-upload-page.png

workflows-upload-page.png

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

### Home page

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


large_homepage.png

medium_homepage.png

small_homepage.png

thumbnail_homepage.png

homepage.png

#### The repeating group

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

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


large_homepage-repeating-group.png

medium_homepage-repeating-group.png

small_homepage-repeating-group.png

thumbnail_homepage-repeating-group.png

homepage-repeating-group.png

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

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


large_homepage-player-settings.png

medium_homepage-player-settings.png

small_homepage-player-settings.png

thumbnail_homepage-player-settings.png

homepage-player-settings.png

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

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

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

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

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

 

### Video page

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

large_video-page.png

medium_video-page.png

small_video-page.png

thumbnail_video-page.png

video-page.png

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


### Account page

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





large_delete-video.png

medium_delete-video.png

small_delete-video.png

thumbnail_delete-video.png

delete-video.png

## Conclusion 

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

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

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

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

large_bubble_plugin.png

medium_bubble_plugin.png

small_bubble_plugin.png

thumbnail_bubble_plugin.png

bubble_plugin.png

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

thumbnail_anne-sophie.jpg

anne-sophie.jpg

twitter-brands.svg

Twitter (Anne-Sophie)

Anne-Sophie Poupard

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

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

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

small_apivideouploader.png

thumbnail_apivideouploader.png

apivideouploader.png

## How does it work?

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

small_apivideo-local-uploader.png

thumbnail_apivideo-local-uploader.png

apivideo-local-uploader.png

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

The tool is available for Windows and MacOS clients!


## How is it built?

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


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

A handy desktop app for uploading and sharing your videos

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

large_sync-app.jpg

medium_sync-app.jpg

small_sync-app.jpg

thumbnail_sync-app.jpg

sync-app.jpg

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

doug.jpg

Doug Twitter

Doug Sillars

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

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

## Our webhooks

We currently have 4 alerts from our webhooks:

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


## Now available in Zapier

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

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

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

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

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

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

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

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

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

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


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


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

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

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

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

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

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

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

Our Zapier integration now features instant triggers

medium_screen-shot-2021-01-28-at-2-13-01-pm.jpg

small_screen-shot-2021-01-28-at-2-13-01-pm.jpg

thumbnail_screen-shot-2021-01-28-at-2-13-01-pm.jpg

screen-shot-2021-01-28-at-2-13-01-pm.jpg

Updated: our Zapier integration now features instant triggers

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

[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)

Welcome back to our 'So Easy, It's a Zap!' series. In this installment, we'll look at a zap that lets you combine api.video with Slack messaging without writing any code. A zap is what happens when you use Zapier to combine two or more applications together. You use one application to define a trigger that will set off an action in another application or the same application. If you want more details, check out our introductory article about Zapier - ['Create Video Integrations Without Coding - So Easy It's a Zap!'](https://api.video/blog/no-code/create-video-integrations-without-coding-so-easy-it-s-a-zap/). 

## Prerequisites 

You'll need a few things to successfully complete this project: 

* api.video [account](https://dashboard.api.video/register) 
* Slack account 
* Zapier account

Slack will walk you through everything and we provide links to the content you'll need to set yourself up with Slack. 


## Configure api.video as the Trigger Event 
Api.video will be the trigger event for your Zap. Each time you add a new video in api.video, it will trigger Slack to update a channel with a message notifying everyone that its available.

To get started, do the following: 

1. Sign up and log in to Zapier.
2. Navigate to [https://zapier.com/apps/apivideo/integrations/slack](https://zapier.com/apps/apivideo/integrations/slack).
3. Under Popular Ways to Connect api.video and Slack, next to Send Slack messages for new videos created on api.video, click **Try It**. 

medium_apivideo-and-slack.jpg

small_apivideo-and-slack.jpg

thumbnail_apivideo-and-slack.jpg

apivideo-and-slack.jpg

4. Under Connect Your Apps, choose your api.video account. If it's not set up, you'll need to go through a walk through to add it, or reconnect it if it expired. You can connect or reconnect by clicking on either Connect or Please reconnect it here. Then, get your api.video from your dashboard, and add it in the field for your API key when prompted with 'Allow Zapier to access your api.video Account?' Click **Yes, Continue**. 

## Configure Slack as the Action Event
Slack will be your action event. It will deliver a notification to a Slack channel you choose every time a new video is added in your api.video account. 

1. Now you need to sign in to Slack. You'll have similar choices to those you had for api.video. In this case, we don't have a Slack account connected in Zapier yet, so we'll click **Sign in to Slack**. Sign in to your workspace, and click **Continue**. You'll walk through the steps you'd use to sign in, giving permission to Zapier to connect for you. 
2. After you've connected, use the drop-down to choose a slack channel to test with.
3. Turn on your Zap so you can test it.

## Test Your Zap
To test your Zap, add a new video to the account associated with your API key. You can do so programmatically, or you can test by doing the following:

1. Open your api.video dashboard.
2. Click **Upload**. 
3. Add a video from your computer. 
4. Wait to see if Zapier senses the video was added, and then Slack will report it in the channel. You're using a polling method, so it might take a minute or two.
5. If nothing happens, then open Zapier on your Zaps page and click the drop-down arrow next to your Zap. 
6. Click **Run Zap**. It should work within a few minutes. 

You can set up other Zaps too. Check out our entire 'So Easy its a Zap!' series in the [No-code](https://api.video/blog/no-code/) section of our blog. 

Send Messages in Slack Any Time You Create a New Video

screenshot api.video and slack integration

large_apivideo-and-slack.png

medium_apivideo-and-slack.png

small_apivideo-and-slack.png

thumbnail_apivideo-and-slack.png

apivideo-and-slack.png

small_screen-shot-2021-03-16-at-11-00-46-pm.png

thumbnail_screen-shot-2021-03-16-at-11-00-46-pm.png

screen-shot-2021-03-16-at-11-00-46-pm.png

Erikka Innes and Doug Sillars

As COVID-19 is forcing more educators to teaching remotely, and more organisations are cancelling in-person meetings, video conferencing is becoming more important than ever.

With entire countries under lockdown or quarantine, tools like Zoom, Skype, Hangouts and others are seeing high usage. However, these tools can have high bandwidth requirements. Zoom recommends 800 KBPS up and 1 MBPS down for group conferencing

But, what about students who do not have fast internet at home? Advice like "Go to the library" just doesn't work during a pandemic. How can the video be served at a lower bitrate for these users?

broadcast a zoom meeting, live stream, record a zoom meeting, record a livestream

medium_douglivestream.png

small_douglivestream.png

thumbnail_douglivestream.png

douglivestream.png

## Live Transcoded Streams
For streamers (professors, teachers, colleagues), there are settings that will push the video to live transcoding engines. In this example, we'll use api.video to transcode the video to a lower bitrate.

## Saving Videos for Later Playback
If you are streaming the videos, wouldn't it be great to also aggregate these videos into a portal for your students to later review? Zoom allows you to record your videos, and provides you a URL, but then you have to create the portal. What if we could create the portal from the Live Stream?

## Simple Setup
As we walk through this process, you'll see that this is an easy setup that anyone can use to share their live video streams.

## Getting Started
To begin, go to api.video and create a free account. Once you sign up, you'll see a list of keys. You'll need your production key in a few steps, so make a note of it now (or leave the dashboard open so you can come back and look).

The code for this project is hosted at Glitch. All Glitch apps get a silly subdomain (in this case ["twilight-decorous-mail"](https://glitch.com/~twilight-decorous-mail)). 

### Update 2021
The code is also pn Github: https://github.com/dougsillars/watchLivestream
You can also see an updated version at: [watch.a.video/livestream](https://watch.a.video/livestream)

1. On the Glitch page, click **View Source**.
2. Click the button **Remix to Edit**. You'll have your own version (with silly name).
3. On the left menu are all the files that create the website. Click on the **.env** line (there is a key next to it). This file will open in the middle. On lines 8, and 10 are three variables: imageUrl, apiVideo and PORT. There is no value after the equals sign. For **imageUrl**, add a url pointing to your logo. For **apiVideo**, paste in the production key from when you signed in. For **PORT** enter **3000**.

That's it - you just configured your website. Now to add your content:

1. At the top, click the **sunglasses**, and open the project in a new page. You'll see a mostly empty site. We haven't configured it yet. 
2. In the url bar, after the https:-silly-.glitch.com add **/createClass** to the end and press **Enter**. You'll get a page about creating a class. 
3. On this page, you can enter your class name, and also whether you want to record all sessions for later viewing. Press **Enter**, and you'll get some more important information: your StreamKey and the URL of your site with a URL parameter afterwards. Make a note of these as you'll need them for the next set of instructions.

## Now we are ready to stream with OBS!!
OBS is a free application available on Mac/Windows/Linux. 

1. Download and install on your computer.
2. Set a Source. You must set the source - Video Capture Device, and choose the camera your computer.
3. Under Settings -> **Stream**. a. Pick Service -> **Custom**. 
4. Enter the following parameters: b. Server: **rtmp://broadcast.api.video/s** c. Stream Key: **enter the StreamKey Value you obtained from creating your class**.
5. Click **Start streaming**.  

The live stream is available on your portal!  When you stop streaming, the video will be placed below the line into the recorded video list.

api.video transcodes your video to much smaller sizes and bitrates. Even if you are sharing a 4K video, your customers or students on very slow connections will still be able to watch on a 250 kbps 240p, or 500 kbps 360p video. Sure, it won't be beautiful, but hey can participate. And to top it all off, all the video sare saved in a conveient portal for later viewing.

## You May Also Like
* [Start and Record a Live Stream of Your Zoom Meeting](https://api.video/blog/no-code/start-and-record-a-live-stream-of-your-zoom-meeting/) - Add a live stream to your Zoom meeting so you can reach more viewers, then save a high quality playback for anyone who wants to watch later.
* [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/) - Create a live stream using Python and the FFMPEG command line. 

Article reposted from Glitch by Erikka Innes

Start and Record a Live Stream with OBS

As COVID-19 is forcing more educators to teaching remotely, and more organisations are cancelling in-person meetings, video conferencing is becoming more important than ever.

With entire countries under lockdown or quarantine, tools like Zoom, Skype, Hangouts and others are seeing high usage. However, these tools can have high bandwidth requirements. Zoom recommends 800 KBPS up and 1 MBPS down for group conferencing.

What about students who do not have fast internet at home? Advice like "Go to the library" just doesn't work during a pandemic. How can the video be served at a lower bitrate for these users?


## Live Transcoded Streams
For streamers (professors, teachers, colleagues), there are settings that will push the video to live transcoding engines. In this example, we'll use api.video to transcode the video to a lower bitrate.

## Saving Videos for Later Playback
IF you are streaming the videos, wouldn't it be great to also aggregate these videos into a portal for your students to later review? Zoom allows you to record your videos, and provides you a URL, but then you have to create the portal. What if we could create the cortal from the LIve Stream?

## Simple Setup
As we walk through this process, you'll see that this is an easy setup that anyone can use to share their live video streams.

## Getting Started
To begin, go to [api.video](https://api.video) and create a free account. Once you sign up, you'll see a list of keys. You'll need your production key in a few steps, so make note of it (or leave the dashboard open in a window to come back to).

The code for this project is hosted at Glitch. All Glitch apps get a silly subdomain (in this case ["twilight-decorous-mail"](https://glitch.com/~twilight-decorous-mail)). 

1. On the Glitch page, click **View Source**.
2. Click the button **Remix to Edit**. You'll have your own version (with silly name).
3. On the left menu are all the files that create the website. Click on the **.env** line (there is a key next to it). This file will open in the middle. On lines 8, and 10 are three variables: imageUrl, apiVideo and PORT. There is no value after the equals sign. For **imageUrl**, add a url pointing to your logo. For **apiVideo**, paste in the production key from when you signed in. For **PORT** enter **3000**.

That's it - you just configured your website. Now to add your content:

1. At the top, click the **sunglasses**, and open the project in a new page. You'll see a mostly empty site. We haven't configured it yet. 
2. In the url bar, after the https:-silly-.glitch.com add **/createClass** to the end and press **Enter**. You'll get a page about creating a class. 
3. On this page, you can enter your class name, and also whether you want to record all sessions for later viewing. Press **Enter**, and you'll get some more important information: your StreamKey and the URL of your site with a URL parameter afterwards. Make a note of these as you'll need them for the next set of instructions.

## Now we are ready to stream with Zoom!!
To get any content on the page, we need to start streaming. 
	
1. Login to Zoom.us.
2. Go to your **Account Settings**.
3. Under Meetings, there's a setting called **Allow live streaming meetings**. Enable this setting.
4. Start your meeting and under More choose **Live on Custom Live Streaming Service**.
5. For Streaming URL put: rtmp://broadcast.api.video/s
6. For Stream Key put:  StreamKey value obtained from above.
7. Enter the website url to your video portal.
8. Click **OK**.

The live stream is now available on your portal. When you stop streaming, the video will be placed below the line into the recorded video list.

api.video transcodes your video to much smaller sizes and bitrates. Even if you are sharing a 4K video, your customers or students on very slow connections will still be able to watch on a 250 kbps 240p, or 500 kbps 360p video. Sure, it won't be beautiful, but hey can participate. And to top it all off, all the video sare saved in a conveient portal for later viewing.

You can also view your live stream and recorded live stream through your api.video dashboard in the section for live videos.

## You May Also Like...
* [Livestream a video](https://a.video/works/livestream-a-video) - This is a demo you can try without coding, hosted at a.video! 
* [Secure live streams with unique overlay](https://api.video/blog/tutorials/secure-live-streams-with-unique-overlay/) - Learn how to secure live streams so they aren't shared when they shouldn't be.
* [Live stream from your Android Phone](https://api.video/blog/tutorials/livestream-from-your-android-phone/) - Create a live stream using your Android phone.

Article reposted from Glitch by Erikka Innes.

Start and Record a Live Stream of Your Zoom Meeting

Walkthrough set up for sending details about a newly uploaded video to Google Spreadsheets. Later, you can review the spreadsheet to make sure you uploaded everything, and the settings for each video are correct. If they aren't, you can take data from your spreadsheet and use it to make changes to your videos more easily, either with one of our helpful PHP scripts that let you update data in bulk, with a custom script of your own, or even your very own no-code Zap! 

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

* [api.video account](https://dashboard.api.video/register)
* Google account
* Zapier account
* This tutorial assumes familiarity with Zapier. If you're not sure what Zapier is, please review the post [Create Video Integrations Without Coding - So Easy It's a Zap!](https://api.video/blog/no-code/create-video-integrations-without-coding-so-easy-it-s-a-zap/) to learn about triggers and events. We will briefly review them as they come up here.


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

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

## Configure Google Spreadsheets as Your Action Event
Now we'll configure so Google Spreadsheets is the action event. In Zapier, an action event is a response to a trigger event. When api.video sends notification that a new video is created, Google Spreadsheets responds with an action event - which is adding data about the new video to the spreadsheet.

1. For Google Sheets, everything populates in the Action. You should see Google Sheets listed for Choose app & event. Underneath you can choose what action event you want for this application, and it should already show Create Spreadsheet Row. If it doesn't, choose these options from the drop-downs.
2. Click **Continue**. 
3. You are prompted to sign in to Google Sheets. Click the **Sign in to Google Sheets** button.
4. You are prompted to choose the account you want to sign in with. Choose the account you want to use, or add it.
5. You're asked to grant the right to edit, create, and delete all of your Google Drive files as well as the right to edit, create, and delete spreadsheets in Google Drive. Click **Allow**.
6. Click **Continue**. You can now set up details about your action.
7. The details you can set for your action are: 
* Drive - The area from your Google Drive you want to take a spreadsheet from.
* Spreadsheet - Choose the spreadsheet you want to use from the drop-down.
* Worksheet - Choose the specific worksheet to use from the spreadsheet you chose.
* There's now three fields - Id, Title, Description. In each box, choose the piece of data that matches. These will dynamically populate in the spreadsheet. If you mess up, you can click **Refresh fields** to start over again. 
8. Click **Continue**. Zapier sets up a test action for you. 
9. Click **Test & Continue**. If there's an issue, and Zapier can help with the error, it will give you a message about what to fix. Otherwise, you should get a message saying 'Test was successful!' 
10. If you like your new zap, click **Turn on Zap** to start using it! 

If there's a zap you'd like to see us make, please contact us in our [community forum](https://community.api.video/)! 

zapier, api.video, google sheets, integrate google and api.video

large_videogooglesheet.png

medium_videogooglesheet.png

small_videogooglesheet.png

thumbnail_videogooglesheet.png

videogooglesheet.png

Update a Google Spreadsheet Every Time You Add a Video to api.video (Zapier)

Player

live - create

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!

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/api/Live-Streams#list-all-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.

16. Log in to your api.video account.
17. At the top of the dashboard, click My videos. You're taken to go.api.video.
18. At the top of the screen, click Players. You're taken to the Players screen.
19. Click the +Add Player button. You're taken to the Add a player screen.
20. 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.
21. Make a note of the player ID or leave this screen open while we work on other parts of the project.
22. Go back to the dashboard, which is the screen you first see when you log into your api.video account.
23. At the top of the dashboard, click My videos. A screen offering tabs for Videos, Live and Players opens.
24. Click Live.
25. Click Create a live stream. The Edit a live stream screen opens.
26. In the Name field, put a name for your live stream. I'm going to call mine 'Bob.'
27. Leave Player id blank.
28. 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.
29. 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.

34. Navigate to obsproject.com.
35. Choose the product appropriate for your operating system. This tutorial will focus on the mac version. Click macOS 10.13+.
36. Install the dmg file, drag the icon over to applications, and open OBS.
37. 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! 

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.

Live stream with OBS and api.video

large_nathan-anderson-yqesar7snli-unsplash.jpg

medium_nathan-anderson-yqesar7snli-unsplash.jpg

nathan-anderson-yqesar7snli-unsplash.jpg

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