live - create

API client

Normal

large_img_8063-min-1.jpg

medium_img_8063-min-1.jpg

small_img_8063-min-1.jpg

thumbnail_img_8063-min-1.jpg

img_8063-min-1.jpg

github-brands.svg

GitHub Yohann

5a22d420c9a5a7-416105621512231968826.png

LinkedIn Yohann

Yohann Martzolff

Tutorials

JavaScript

React Native

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

Congratulations! The live streaming app is done!

ezgif-com-gif-maker-2.gif

## Getting started

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

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

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

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

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


## Create a new React Native app

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

### Launch the application

Inside your new project start Metro to bundle your application:

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

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

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

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

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

## Add the live stream client to your app

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


### Installation

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

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


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

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

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


### Permissions

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

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

#### Android

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

#### iOS

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

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

#### Sign your iOS application (optional)

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

### Usage

#### Component

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

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

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

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

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

#### Launch your first live stream

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Paste your stream key in place of `YOUR_STREAM_KEY`.

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


## Make it dynamic

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

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

Some properties can be updated during the live stream:

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

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


### Add icons

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

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

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

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

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

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


### Live stream view

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

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

#### Streaming button

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

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

#### Camera button

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

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

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

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

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

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

#### Muted button

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

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

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

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

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

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

## And now what?

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

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

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

large_image.png

medium_image.png

small_image.png

thumbnail_image.png

image.png

How to build a live streaming app in 3 steps

doug.jpg

twitter-brands.svg

Doug Twitter

Doug Sillars

Video trends

Frequently asked question: How many live streams can I use simultaneously with api.video? 
Answer: How many cameras do you have?

That sounds like a snarky response (and perhaps it is *a little bit* snarky). Some platforms - like YouTube Live or Twitch - allow just one live stream per account at a time. But, with api.video there is no such limitation - as long as you have cameras (and available bandwidth), you can stream to your heart’s content from every single one of them.

## Why would I stream more than once?

There’s no reason to limit your viewers to just one view - stream from every angle (or stream from every angle that you have a camera for!).  Or if your client needs video from a number of locations at once - api.video can support you.  Here are some example use cases:


Are you running a multi track conference?  Stream each room from the same api.video account. Add a hallway cam to show the social interactions.  
Do you support more than one client?  Don’t drive yourself crazy scheduling to fill the one slot - let everyone have their own live stream(s).
Sporting event - multiple angles.  Does the coach want a stream from the opposite side?  From behind the goal/end-zone? From the top of the stadium?

## Create your live streams


The first step in having multiple live streams is to create your live streams.  You can create as many streams as you’d like. 

Creating [live streams](https://api.video/blog/tutorials/live-stream-tutorial) is easy with our [API](https://docs.api.video/reference/post_live-streams).  

Once you’ve created your live stream you (or your clients/users) can re-use each livestream over and over (like a Space-X rocket). 

* Stop the stream after each conference talk, and restart before the next. If you have ```record:true``` set for the live stream, you’ll get VOD versions of each video saved into your account.  Each recording will have the livestream name, and the time (in GMT). 
* Assign live stream(s) to your clients, and let them use them to their heart’s content. No more work is needed on your part.
* Name each livestream for easy recovery of the videos:  “50 yard line”  “Client X” “Conference Fizz 2021: Buzz track”




## A wildly absurd demo 


As an example of using live concurrent live streams, I hooked up all the cameras I could find (and that were charged up) to my laptop/wifi. In the example below, I was able to run 5 concurrent live streams - showing the capabilities of api.video, but also pushing my computer (and my internet connection) to their limits:
<image>



medium_257523051420257536349489364058826396261704n.jpg

small_257523051420257536349489364058826396261704n.jpg

thumbnail_257523051420257536349489364058826396261704n.jpg

257523051420257536349489364058826396261704n.jpg

* [https://Livestream.a.video](https://Livestream.a.video) - using an USB webcam (mounted on monitor)
[https://Record.a.video](https://Livestream.a.video) - using Mac webcam
[OBS](https://api.video/blog/no-code/start-and-record-a-live-stream-with-obs) - using Iriun and a phone - this app connects your phone to a computer via Wi-Fi (on right of photo on a stand)
[Android livestream](https://api.video/blog/tutorials/livestream-from-your-android-phone) - phone using Larix Broadcaster to stream (leaning on laptop)
[Pi livestream](https://api.video/blog/tutorials/video-streaming-with-a-raspberry-pi) - my raspberry Pi camera (pointed out the window)





This was a fun demo to try out, but it did push my laptop to the limit. What it does show is that with a few computers & cameras and an api.video account, it is really easy to simultaneously live stream as many views, angles, rooms as you desire.



large_concurrent-livestreams.jpg

medium_concurrent-livestreams.jpg

small_concurrent-livestreams.jpg

thumbnail_concurrent-livestreams.jpg

concurrent-livestreams.jpg

How many live streams can I run at once?

Videos - Upload a Thumbnail

NodeJS

When publishing a video on the web, sometimes it is desirable to add a defining mark on the video, often called a watermark.

When you use api.video in the sandbox, we add a watermark to show that the videos are being played back in our test environment:


medium_screenshot-2021-05-25-at-06-50-01.png

small_screenshot-2021-05-25-at-06-50-01.png

thumbnail_screenshot-2021-05-25-at-06-50-01.png

screenshot-2021-05-25-at-06-50-01.png

Perhaps you want to add your corporate logo in the corner of the video.  Or perhaps the class name.  There are a number of different reasons you might want to add a watermark to your video, and in this post, I'll walk through two approaches to add a watermark to your videos. 

NOTE: We now have watermarking available as part of the API. Check out the new way to update content here: [https://docs.api.video/reference/post_watermark](https://docs.api.video/reference/post_watermark)
 
## The watermark

In this study, we'll be adding the api.video logo as our watermark.  I (randomly) chose to insert the logo in the top right corner of the video.



logoorange100.png

Your watermark should be appropriately sized for the space in the video.  In this case 100x100 pixels to fit inside a 1920x1080 video (~5%x10% of the screen). 

I have adapted the [record.a.video](https://record.a.video) app to add a watermark and you can test it at [watermark.a.video](https://watermark.a.video), and in this app, I have provided 2 ways to add the watermark: the frontend and the backend.  

medium_screenshot-2021-05-25-at-07-50-14.png

small_screenshot-2021-05-25-at-07-50-14.png

thumbnail_screenshot-2021-05-25-at-07-50-14.png

screenshot-2021-05-25-at-07-50-14.png

If the box is checked, the watermark is inserted on the frontend. If unchecked, the watermark is added on the backend.  The field allows you to change the image being added as a watermark.  

## Frontend Watermark

In the watermark.a.video application, the screen (screenCaptureAPI) and the camera (MediaRecorded API) are drawn to a canvas.  I've [described this process in detail](https://api.video/blog/tutorials/building-record-a-video-the-screencapture-api) with code samples. The canvas is refreshed every 20ms, giving 50 FPS video on the canvas.  

To add a watermark, I simply load the image into the app, and instead of only drawing the screen (videoElem) and the camera (cameraElem), I add the watermarkImg:

```
        console.log("FE watermark", canvasWatermark);
        //load watermark image
        var watermarkImg = new Image;
        watermarkImg.src = canvasWatermark;
            //draw the 2 streams to the canvas
            drawCanvas(videoElem, cameraElem,watermarkImg,ctx);

```

Inside the drawCanvas function, I draw the watermakrImg on top of the other 2 elements (by placing it last in the list of things drawn):

```
    function drawCanvas(screenIn, cameraIn,watermarkImg, canvas){
        var textLength = 60;
        canvas.drawImage(screenIn, screenX0,screenY0, screenX1, screenY1);
        canvas.drawImage(cameraIn, cameraX0, cameraY0, cameraX1, cameraY1);
        canvas.drawImage(watermarkImg, watermark_x, watermark_y);
```

For this demo, I have hardcoded the watermark to be in the upper right corner, so watermark_x = watermark_y = 25.


## Backend Watermark

Perhaps the watermarking for your videos needs to be hardcoded into your process, or you do not want your users to be able to modify the watermark. Adding a processing step in the backend to insert a watermark makes this easy.

> Note that this approach oly works on a live stream, and not with the video on demand.  The VOD recording is done completely on the front end.

In the [record.a.video](https://record.a,video) app, livestreams are sent to a NodeJS server, where the WebRTC video recorded by the browser is converted to RTMP for ingestion into the api.video livestream server.  This conversion is done with FFMPEG.  We can simply modify the FFMPEG command insert the watermark on top of the video while it is being transcoded.  

```
			var ops = [
				'-i', socket._watermarkUrl,
				'-i','-',		
         '-preset', 'ultrafast', '-tune', 'zerolatency', 
			       '-r', framerate, '-g', framerate*2, '-keyint_min',keyint_min, 
				'-filter_complex', '[1:v][0:v] overlay=25:25',
     				'-c:a', 'aac', '-b:a','44k', '-ar', 44100, 
			        '-f', 'flv', socket._rtmpDestination		
		
		];

```

The FFMPEG options for watermarking has 2 lines added to the code from record.a.video.

```
				'-i', socket._watermarkUrl,
```

We have to give the URL of the image to add as the watermark.

```
	'-filter_complex', '[1:v][0:v] overlay=25:25',
```

The filter complex tells FFMPEG the order of the overlay.  Since I add the watermark first (index 0), and then the video stream(index 1) - we place the video stream first, and then the watermark on top, with an offset of 25x25.

FFMPEG reads the image file and just inserts it on each frame encoded to the api.video server.

### Watermark addition

In both cases, the live video that is sent to api.video has the watermark added. In the first case it is added in the browser as the video is being recorded, and in the second case, it is inserted by FFMPEG during a transcoding step.

Here's what the resulting video looks like:




In either case, you can see that we have successfully added the api.video logo as a watermark in the upper right corner.  Try out the demo: [watermark.a.video](https://watermark.a.video).  If you want to add watermarks to your videos - try out [api.video](https://dashboard.api.video/register). Feel free to fork the repo on [Github](https://github.com/dougsillars/watermarkavideo) and try it out yourself! And you can check out all the API reference documentation here: [api.video API Reference documentation](https://docs.api.video/reference/overview). If you have any questions or suggestions, please let us know on our [communtiy forum](https://community.api.video/). 



large_1024px-watermarksample.jpeg

medium_1024px-watermarksample.jpeg

small_1024px-watermarksample.jpeg

thumbnail_1024px-watermarksample.jpeg

1024px-watermarksample.jpeg

Watermarking your video or live stream

Video Get

We recently launched [record.a.video](https://record.a.video), a new web app that can record your camera and screen right from the browser!  When you are done recording, it uploads the video to [api.video](https://api.video) to create a link for easy sharing of your video.

In the process of building this app, I learned a lot about a few web APIs, so I thought I would write a bit more detail in how I used these APIs and how they work.

* In this post, we'll use getUserMedia API to record the user's camera and microphone.

* In [post 2](https://api.video/blog/tutorials/building-record-a-video-the-screencapture-api), I discussed recording the screen, using the Screen Capture API. Using the video streams created in posts 1& 2, I draw the combined video on a canvas.

* In [post 3](https://api.video/blog/tutorials/building-record-a-video-the-mediarecorder-api), I'll discuss the MediaRecorder API, where I create a video stream from the canvas to create the output video.  This output stream feeds into the video upload (for video on demand playback) or the live stream (for immediate and live playback).

* In [post 4](https://api.video/blog/tutorials/building-record-a-video-using-the-webspeech-api-for-live-captioning), I'll discuss the Web Speech API. This API converts audio into text in near real time, allowing to create 'instant' captions for any video being created in the app. This is an experimental API that only works in Chrome, but was so neat, I included it in record.a.video anyway. 

You can also check out our [live stream API reference documentation](https://docs.api.video/reference/get_live-streams).


## MediaDevices.getUserMedia()

Let's start at the beginning,  With record.a.video, we grab the camera and microphone inputs from the device to record the video.  This API allows the browser to interact with external media devices, and read their output.

In record.a.video, we enumerate the video and audio inputs to display them as options for the recording:




large_screenshot-2021-03-30-at-10-33-48.png

medium_screenshot-2021-03-30-at-10-33-48.png

small_screenshot-2021-03-30-at-10-33-48.png

thumbnail_screenshot-2021-03-30-at-10-33-48.png

screenshot-2021-03-30-at-10-33-48.png

Once the capture begins, we display the chosen camera, and record from the chosen microphone.

So, how does this work?

## Enumerating the devices

When you call the enumerateDevices, you get all of the details of the devices:

```
    navigator.mediaDevices.enumerateDevices()
    .then(function(devices) {
        devices.forEach(function(device) {
        console.log(device.kind + ": " + device.label +" id = " + device.deviceId);
        
            if(device.kind =="videoinput"){
                //add a select to the camera dropdown list
              //  var option = document.createElement("option");
              console.log(device);
                deviceIds[counter] = (device.deviceId);
                deviceNames[counter]= (device.label);
                counter++;
            }
    });
```

If we look at the console log, we get a list of all the input and outputs:


```
audioinput: Default - Blue Snowball (046d:0ab9) id = default
audioinput: Blue Snowball (046d:0ab9) id = 693957e7a6c63d00cf9068338ec0108bfdfad2f108182bc988f7ed79430d5024
audioinput: Logitech StreamCam (046d:0893) id = ec257829b4d910400bdff0fe8639e3e2c5b9bd761c1cd4454b8f272672e4d482
audioinput: MacBook Pro Microphone (Built-in) id = be26a24fb1ca054193d51c80a6c875a091a285153959ddae8ab24f55c939bcd5
audioinput: Iriun Webcam Audio (Virtual) id = 5e911d92f330fb9333fee989407c5c84c3b99af29046d8182e582545e772687f
videoinput: Logitech StreamCam (046d:0893) id = 8d59c8e7bc02076c4230ba70125c03491020950b008769bd593bdb13e33c1ce7
videoinput: FaceTime HD Camera (Built-in) (05ac:8514) id = e3fce20226c193876c5ff206407fd4815ad5b1e6329e67a8e82c9636d8e75c8d
audiooutput: Default - External Headphones (Built-in) id = default
audiooutput: U32J59x (DisplayPort) id = b342ee4661c78101936e50a2b5a3e5080d5ed748e031547e492c7ab0eeddd9df
audiooutput: External Headphones (Built-in) id = 4a3980d8579a418193b1e8ff46771f204e87b2997b90d0d4e7e60a4acaae1235
audiooutput: MacBook Pro Speakers (Built-in) id = b7045191ebec43d797348478004f25472c868bcae61ad04a7de73f70878e27b2
```

Here we learn that, yes, I have a lot of audio/video devices hooked into my computer.  (mental note: why is Iriun webcam only presenting as audio, and not as video?)

Each device has a:
* kind: audio or video; input or output
* label: A text description for human consumption
* deviceId: a random string that uniquely IDs the device.


We'll use the deviceId to decide which device to broadcast, but in record.a.video, use the labels in the form - since they are better descriptions for our users.

## Picking a broadcast

Once a user has chosen their video input, we can make a request to obtain this video. (The same approach works for audio as well, so I'm only describing video here):

```
            navigator.getUserMedia = (navigator.mediaDevices.getUserMedia ||
                            navigator.mediaDevices.mozGetUserMedia ||
                            navigator.mediaDevices.msGetUserMedia ||
                            navigator.mediaDevices.webkitGetUserMedia);
```

When requesting a camera, you can apply constraints to the request to enforce exactly what you would like, for example:

```
            cameraW=1280;
            cameraH=720;
            cameraFR=25;

            var camera1Options = {
                audio:false,
                video:{
                    deviceId: deviceIds[0],
                    width: { min: 100, ideal: cameraW, max: 1920 },
                    height: { min: 100, ideal: cameraH, max: 1080 },
                    frameRate: {ideal: cameraFR}
                }
            };
```

Here I set the ideal video as 1280x720, but allow for differences with the min & max parameters.  This means that if the camera cannot provide 1280x720, it will give me a similar size, but in the available sizes for the camera.

Note: I have  set the audio to false.  In this demo, I am applying the video onto the screen with a video tag. If the browser were to play audio from the camera, the mic would pick it up, and you'd get an awful feedback loop. I want to avoid this. I could just mute the video, but I thought it would be cool to take another Media Stream for the audio, and apply that track to my stream during recording (after it appears on the screen).

### Getting the stream and placing it on the page

I have a video element called 'video1'.  I assign the getUserMedia to display there:

```
 video1= document.getElementById("video1");           navigator.mediaDevices.getUserMedia(camera1Options).then(function(stream1){
                video1.srcObject=stream1;
```


When this call is made - the browser will ask the user for permission to use the camera.  If the user accepts the sharing request - the browser grabs the camera feed, and applies it into the video1 element:

small_screenshot-2021-03-30-at-13-34-37.png

thumbnail_screenshot-2021-03-30-at-13-34-37.png

screenshot-2021-03-30-at-13-34-37.png

thumbnail_screenshot-2021-03-30-at-13-37-29.png

screenshot-2021-03-30-at-13-37-29.png

That's all there is to it!

With the getUserdevices API, pulling the video feed from your camera to the browser just takes a few lines of code.

## If one camera is great, what about two?

While most desktops do not have multiple cameras, most smartphones do. I thought it would be very cool to extract a video feed from 2 cameras on one device. 

(Imagine a real estate walkthrough where you can see the surroundings, and the face of the person presenting.)  So I built a demo application. You can see this application in action at [record.a.video/index1.html](https://record.a.video/inex1.html).  

I basically repeat the camera1 and video1 code above with camera2 and video2, and use the first two cameras reported by the enumeration query.

When I test the page on desktop, I get both cameras to stream (which is super cool!) Unfortunately on Android & iOS, only one camera can stream at a time - resulting in the first camera grabbing a still image from the start or capture, and going moving to an inactive state as the second camera becomes active. (On my phone, the front camera has the still image, and the rear camera continues to show video).

I imagine that this is a battery/CPU saving setting, as running 2 cameras full time on a phone battery would quickly use up the battery.


## Conclusion

The MediaDevices.getUserMe4dia() API allows the browser to use the external camera and mics to display (and record) content.  [Build your own version](https://dashboard.api.video/register) of a video recording system today! If you have any questions or suggestions, please share them on our [community forum](https://community.api.video). Happy building! 

large_piqsels-com-id-oslvc.jpg

medium_piqsels-com-id-oslvc.jpg

small_piqsels-com-id-oslvc.jpg

thumbnail_piqsels-com-id-oslvc.jpg

piqsels-com-id-oslvc.jpg

Building record.a.video part 1: MediaDevices.getUserMedia() for camera and audio recording

Video upload


With the explosive growth of remote working in the past year, we’ve all worked to find different ways of communicating.  Slack and Zoom have become major tools for communication as we are all no longer in the same building or office.  

Apps like Clubhouse have become ‘places’ to go and hang out and chat with others.

One app that has featured explosive growth over the past year is Loom. Loom is an app that lets you record short video messages - sharing your screen or just using your camera. When you are done, the video is saved on a server, and you are given a link.  This link is easy to share: on social media, on Slack etc. It is a great way to communicate an idea, or to express your point - it’s everything that is great about video, packaged in an easy to use interface.  

It is no wonder that Loom is so successful.  My only issue is that I either have to use an installed app on my Mac (265 MB installed), or a Chrome extension (I did not go this approach, as Chrome eats too much memory already).

## Can I build a Loom-like app - in the browser?

I lead developer relations at api.video.  We offer a full service API for video transcoding, hosting and delivering video streams.  It is incredibly fast, and can be used to share videos in the same way Loom does.  So this raised 2 questions:

1. If I delegate the ‘hard’ bits of the video handling to api.video, can I build a recording app in the browser? 

2. Can I get this app running in all four major modern browsers?  Desktop & mobile?

TL;DR:  

Question 1: Yes - you can build a website to record and share video (screen sharing and camera video). It will even stream live video!

Question 2: Almost all browsers.  On the desktop, the full featured app works great in Chrome, Edge Firefox, and Safari 14.0.3 (there are some support issues that will fail below Safari 14).  

For Mobile: it works on Android (without screen sharing). Unfortunately, the APIs used are not yet in mobile Webkit, so no iOS support at this time.

Try it out! The application is live at [record.a.video](https://record.a.video). You can also check out our [live stream API reference documentation](https://docs.api.video/reference/get_live-streams).

## How does it work?


large_screenshot-2021-03-26-at-11-13-30.png

medium_screenshot-2021-03-26-at-11-13-30.png

small_screenshot-2021-03-26-at-11-13-30.png

thumbnail_screenshot-2021-03-26-at-11-13-30.png

screenshot-2021-03-26-at-11-13-30.png

When you open [record.a.video](https://record.a.video), you'll get a menu as above.  (You may not get the available cameras and microphones - press "start capture" and allow camera/microphone permissions, then reload the page).

* The top bar allows you to switch between Live streaming and recording a video.
* Choose your camera and mic (if you have more than one).
* Select the screen layout - do you want to show just the camera or screen, or do you want to overlay the camera on the screen?
* Live captions:  If you are using Chrome, we can add live captions to the video being created.  Pick top or bottom for the captions.
* "Show recording" if you leave this checked, you'll see the video being recorded in the browser.  Our CEO dislikes the "vortex effect" you see when sharing the screen, so we added this button for him to disable the view. (👋 Hi Cedric!)

Now that you've chosen all your options, you're ready to start capture!

### Recording

Once you've started recording, you'll see 3 new views appear:

* The screen being shared
* The camera
* The recording (showing screen, camera or both). (Unless you hid the recording).


small_screenshot-2021-03-26-at-11-22-05.png

thumbnail_screenshot-2021-03-26-at-11-22-05.png

screenshot-2021-03-26-at-11-22-05.png



## Record and stream right from your browser!

So it works!  Recording your screen and camera in the browser with live streaming or recording and uploading for asynchronous viewing.  

What completely blows my mind about this application is that leveraging web APIs, this site weighs in at just under 300KB.  There is a NodeJS backend to handle the streaming (we have to convert the format to RTMP for ingestion into api.video), but if you remove the live streaming component, this app runs with just JavaScript (you can even run it locally on your computer!)

## See it in action

##  Curious about the details

I'm really glad you asked!  We've written a series of posts describing the APIs used to collect video streams, how they were cpmbined, and how they are streamed:

* In [post 1](https://api.video/blog/tutorials/grabbing-camera-streams-with-mediadevices-getusermedia), I talked about the getUserMedia API to record the user's camera and microphone.

* In [post 2](https://api.video/blog/tutorials/building-record-a-video-the-screencapture-api), I discussed recording the screen, using the Screen Capture API. Using the video streams created in posts 1 & 2, I draw the combined video on a canvas.

* In [post 3](https://api.video/blog/tutorials/building-record-a-video-the-mediarecorder-api), I'll discuss the MediaRecorder API, where I create a video stream from the canvas to create the output video.  This output stream feeds into the video upload (for video on demand playback) or the live stream (for immediate and live playback).

* In [post 4](https://api.video/blog/tutorials/building-record-a-video-using-the-webspeech-api-for-live-captioning), I'll discuss the Web Speech API. This API converts audio into text in near real time, allowing to create 'instant' captions for any video being created in the app. This is an experimental API that only works in Chrome, but was so neat, I included it in record.a.video anyway. 



## Conclusion

Record.a.video lets you easily record and share video - live or asynchronously! 


Go give it a shot [record.a.video](https://record.a.video), and if you want to build your own - the code is on [Github](https://github.com/apivideo/recordavideo). In the coming days, we’ll add some technical posts describing how we built it.

If you have any comments or suggestions, please leave us a note in our [community forum](https://community.api.video). 


large_loom-app.png

medium_loom-app.png

small_loom-app.png

thumbnail_loom-app.png

loom-app.png

Building "Loom" in the browser: record a video with api.video

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

Python

Let's learn how to live stream using the FFMPEG command-line interface for Mac and Python, then write a program that will do everything for us in Python. For the camera and audio, we'll use what's built-in to your Mac. You can attach another camera if you want, this tutorial should help with figuring out how to do that too. We recommend trying this tutorial as-is first. And then...

<center><iframe src="https://giphy.com/embed/26BRrxbIBrDJ3jq5G" width="480" height="360" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/producthunt-live-stream-livestreaming-opeah-26BRrxbIBrDJ3jq5G"></a></p><br></center>

## Requirements

* Mac (as always, you can tweak the instructions for Linux or PC but it's a Mac focused tutorial) 
* Homebrew - if you don't have it we'll include a little about installing it
* Xcode - you can add this as part of a homebrew installation 
* api.video account - you can get one for FREE right here - [SIGN UP](https://dashboard.api.video/)
* Python
* requests module for Python
* ffmpeg-python 
* OSX10.7 or higher

You can also check out our live stream API reference documentation here: [Live stream](https://docs.api.video/reference/get_live-streams)

## Install FFMPEG

Sometimes an FFMPEG install can get complicated. You'll see a lot of people online asking why their installation doesn't work. If you have a Mac, there is an easy answer to this problem...hopefully. Let's go over one simple way you can install FFMPEG so it starts working at the command line for you right away. We're going to use the homebrew method, because it makes installation simple if you already have homebrew installed. 

### For users who already have Homebrew
If you've got homebrew installed, all you need to do is this: 

```brew install ffmpeg```

That's it. It should install without issue. (Famous last words right?) Test that it works with this: 

```ffmpeg -version```

If it's installed, you will get back a bunch of information about your configuration. If not you will get an error of some type. Troubleshooting installation is beyond the scope of this tutorial, but you can post questions in the [community forum](https://community.api.video/) and we'll help you figure it out.

### For users who don't have Homebrew
If you fall into this category, you may be wondering what homebrew is. It's a free, open-source software package manager. It simplifies installation of software on macOS and Linux. 

To install homebrew, you'll need to run this command: 

```/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"```

If you don't have Xcode, or the appropriate Xcode components installed, you'll have to install those. Fortunately, you'll be told what's missing so you can install it. Follow the instructions to install and if you run into problems, there is a lot of documentation online to help you through. We can't be more specific for Xcode, because there's a lot of ways your installation can differ from another one. However, if you need help, feel free to contact us in the [community forum](https://community.api.video/). 

## Let's use FFMPEG CLI and Python to live stream
Now that we have FFMPEG installed, let's try using it to set up a live stream.   

1. Let's set up the container for our live stream. With api.video, you create a container for your live stream, then you send your stream to it to be played. The code for this is: 

2. Now that we have our container, open the api.video [dashboard](https://dashboard.api.video) and click **My Videos**.
3. Click **Live**. You should see your livestream (mine's named Bob) here. But it's not working yet. That's okay, we're going to change that. Click on the picture representing your livestream.
4. You'll see some information about your livestream. The information we're interested in, is the RTMP Stream Url. Go ahead and make a note of that and leave the dashboard open - we're going to add that url into our script.
5. Open a Terminal window. 
6. Let's list the available video and audio devices on your Mac using FFMPEG. At the CLI prompt, type: 
```ffmpeg -f avfoundation -list_devices true -i "" ```
This will list all the devices available to you. You should see something similar to this: 

``` 
[AVFoundation indev @ 0x7fed75d21fc0] AVFoundation video devices:
[AVFoundation indev @ 0x7fed75d21fc0] [0] FaceTime HD Camera (Built-in)
[AVFoundation indev @ 0x7fed75d21fc0] [1] Capture screen 0
[AVFoundation indev @ 0x7fed75d21fc0] AVFoundation audio devices:
[AVFoundation indev @ 0x7fed75d21fc0] [0] Built-in Microphone 
```

So you might be asking what's going on here? Let's go over the command. First, you're telling the system that you're using the ffmpeg CLI by saying 'ffmpeg.' Then your script says for our input file format (-f) use the framework avfoundation and list available devices. We know it's for the input file because of the -i flag. There's more to this explanation, but it's a little outside the scope of this tutorial. Without getting too into the details here, the device is your input instead of a file. When you run the script a list comes back and it shows you two arrays. One array is for video choices, and one is for audio. Note the number for each item you want to use. For this tutorial we're going to use 0 and 0.    

7. And now for the script. Type: 
```ffmpeg -f avfoundation -framerate 25 -i "0:0" -f flv rtmp://broadcast.api.video/s/streamKey``` 

We have a few things going on in this script. We start by telling the system we want to use the ffmpeg command line, then we provide information about our input "file" (camera and audio in this case). We say for the input file format -f we want to use the AVFoundation framework (avfoundation) at framerate (-framerate) 25. And we mention it's for input here too (-i) and what kind of input with "0:0." If you're like what the heck is "0:0" you're in good company. This is basically a key value pair for the video and audio. Think of it like "video:audio." And what you did, is you said for video use what's in slot 0 of the video choices array. For audio use what's in slot 0 of the audio choices array. You can also use just the first word of each item in the array, typed exactly the same way. That would look like "FaceTime:Built-in." Finally you say for your output file format (-f) you want to send the format of flv (flv) to the RTMP server with your stream key. That's where it will be turned into beautiful HLS and streamed for you. 

If you've seen FFMPEG before, you might wonder where the codecs are. You can add them in to your script, but for the sake of simplicity they're excluded here. By excluding them, your system will choose what it thinks are the best codecs. You can see what was selected, and then manually include them in your script if you feel like it. This can be a good way to test that you understand where to put the codec flags in your script. After that works, if you don't like a codec you can trade it out for something else and see if it runs better (or in some cases at all, codecs are finnicky). 

At this point, if your script is running, you have a bunch of choices available to you: 

* You can grab the embed iframe information and add the live stream to a web page.
* You can grab the embed link and add it to a page, or just put it in the browser search bar and open it to play there. 
* You can associate it with a player. 

8. It won't stop running! That's okay, you have two choices here. You can click on the Terminal window and press **q** or you can use **CTRL-C**. 

If you want to try running this entire process programmatically, read on! 

## Run ffmpeg CLI with ffmpeg-Python
This is a pretty cool Python module. It's a wrapper for your CLI commands, meaning you can run everything using a Python file. We're going to need it for this next code snippet. 

1. Install ffmpeg-python. It's a little confusing because the install command looks different than the module title. On the command line, install with: 
```pip install ffmpeg-python```

NOTE: Don't mess up and try installing ffmpeg. It will install something, but in our case, not something useful.

2. In your code sample, make sure you add import ffmpeg. 

3. And now the code sample: 

The code sample will authenticate, grab a token, set up the container for your livestream, fetch the livestream key and build your server URL, then start up your live stream. It prints out the iframe embed code and the live stream link. You can take the iframe code and paste it into an HTML page for viewing or you can use the live stream (player) link and put it in your web browser. Press play and you're streaming! 

## Clean up on Aisle 9 - Delete Your Live Streams
After trying the code sample a few times, you may have a bunch of live streams when you only wanted one or two. 

You can remove the live streams one at a time with this code: 

Note that the liveStreamId is not the stream key. It's the value that shows at the end of the player link. This is an example player link: 
```https://embed.api.video/live/li6pLlinklOtQ6aK6u7Ktc6N```

Add the part that comes after 'live/' after 'live-streams/' in the code sample and send your request. The live stream will be deleted for you.

Thanks for reading today! If you have any questions, suggestions or trouble setting this up, please contact us in the [community forum](https://community.api.video/). We can include troubleshooting content based on issues you run into. 

large_live-stream-ffmpeg-cli-and-python-1.png

medium_live-stream-ffmpeg-cli-and-python-1.png

small_live-stream-ffmpeg-cli-and-python-1.png

thumbnail_live-stream-ffmpeg-cli-and-python-1.png

live-stream-ffmpeg-cli-and-python-1.png

Live stream to the browser with FFMPEG CLI and Python 

We're often asked, can I use api.video to live stream video with my Android/iPhone?  Our answer is (of course) a resounding yes! If you want to build our own streaming app, we have SDKs for both [Android](https://docs.api.video/docs/android-sdk) and [iOS](https://docs.api.video/docs/ios-sdk). In future posts, we'll build sample apps using these SDKs. 

In this post, we'll skip building an app, and start streaming quickly by using a free app from the Google Play store to quickly begin live streaming with api.video.

## Setting up a video live stream

Before we download an app to our Android phone, you'll need an api.video live stream.  [Create a free account](https://my.api.video) (you can livestream with the free account!).  Once you have your account, you'll have an API key.  We have several posts on [creating a livestream](https://api.video/blog/tutorials/live-stream-tutorial) that can help you walk through the steps. You can also check out our [live stream API reference documentation](https://docs.api.video/reference/get_live-streams).

First, you'll authenticate with your token (curl code shown):

```
 curl -X POST \
  https://sandbox.api.video/auth/api-key \
  -H 'Content-Type: application/json' \
  -d '{"apiKey": "your_api_key"}'
```

This will create a token that you'll use to create a live stream. Insert the access token into the header (line 3), and rename your live stream from "Your Stream Name":

```
curl -X POST https://sandbox.api.video/live-streams \
-H 'Content-Type: application/json'  \
-H 'Authorization: Bearer {insert access_token here}'\
-d '{"name":"Your Stream Name"}'

```


The JSON response will have a bunch of parameters:

```
{"liveStreamId":"li400mYKSgQ6xs7taUeSaEKr",
"streamKey":"30087931-229e-42cf-b5f9-e91bcc1f7332",
"name":"Your Stream Name",
"Record":false,
"Broadcasting":false,
"Assets":{
"iframe":"<iframe src=\"https://embed.api.video/live/li400mYKSgQ6xs7taUeSaEKr\" width=\"100%\" height=\"100%\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"\"></iframe>",
"player":"https://embed.api.video/live/li400mYKSgQ6xs7taUeSaEKr",
"hls":"https://live.api.video/li400mYKSgQ6xs7taUeSaEKr.m3u8",
"thumbnail":"https://cdn.api.video/live/li400mYKSgQ6xs7taUeSaEKr/thumbnail.jpg"}}
```

You'll need the streamKey to set up your live stream - and the assets links for your viewers:
* iframe can go right into your webpage
* video player url 
* HLS url.- to insert in your own HLS video player.
* Thumbnail - the static image that shows when your stream is not playing.

That's the hard technical part. Now we need an app for your phone!

## Getting an app

There are a number of free apps in the Android app store (I searched for Live Stream). I tested with Larix player and CameraFi Live in this post, and can verify they both worked wwell with api.video (as I am sure most of them do).


## App setup

These apps have pre-set configurations for most streaming services. You'll want to use the "Custom RTMP" service.  Each app is slightly different - and will either ask for a full URL, or will ask for a URL and a streamKey

Your full URL will be rtmp://broadcast.api.video/s/{streamKey}

Or if you have to enter  2 fields:

* URL: rtmp://broadcast.api.video/s
* streamKey: {streamKey}

After entering these, and before you can stream, you'll need to give the app permission to use your camera and microphone (of course!).

Each app will have various settings for streaming, but you're basically ready to go - pick the front or rear camera from your Android phone, and start streaming.  In just a few seconds, your video will begin appearing on the video player url (or the HLS link, or the iframe). Share these links with your friends, and they'll be able to watch yo livestream right from your phone.

## Caveats

Watch your data usage - streaming video can use a lot of data (if you're data constrained - use your WiFi). Streaming will also use your battery a lot - if you're not near an outlet, make sure you have a battery pack or two to keep your phone fully charged.


## Conclusion

That's basically it - there are a lot of free streaming apps in the Google Play store - they are quick to set up, and you can be streaming live on your phone in a matter of minutes.

In the next post, we'll build the framework of a basic Android app using our SDK. But in the meantime, [sign up to start streaming](https://dashboard.api.video/register) from your phone today! 



small_android-apps-flag-bookeh-light-637457-1.jpg

thumbnail_android-apps-flag-bookeh-light-637457-1.jpg

android-apps-flag-bookeh-light-637457-1.jpg

Live stream from your Android phone

Player

No-code

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

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

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

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

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

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

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

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

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

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


large_obs.png

medium_obs.png

small_obs.png

thumbnail_obs.png

obs.png

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

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

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

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

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

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

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

Here's the code sample:

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

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

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

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

## You May Also Like...

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

large_nathan-anderson-yqesar7snli-unsplash.jpg

medium_nathan-anderson-yqesar7snli-unsplash.jpg

small_nathan-anderson-yqesar7snli-unsplash.jpg

thumbnail_nathan-anderson-yqesar7snli-unsplash.jpg

nathan-anderson-yqesar7snli-unsplash.jpg

Live stream with OBS and api.video

Video on demand (VOD) is a great way to give your customers a way to watch videos when *they* want to watch them. But what if you want that recorded video to be played at a specific time? 

* Maybe you are have a scheduled event at an odd hour, and you do not actually need to be present.
* A “replay event” of a live stream that occurs 6 hours later for viewers in other parts of the world.
* A “video share” party where a group of people can watch a video.

This is not possible with VOD, but is possible with a video livestream. In this post, we'll walk through the steps required to convert a recorded video into a video livestream for scheduled playback. You can also check out our [live stream API Reference documentation](https://docs.api.video/reference/get_live-streams).



##  Broadcasting a VOD

There are 3 things you’ll need to do a basic VOD broadcast:

1. A livestream:  When you livestream with api.video, you’ll need to [create a livestream](https://api.video/blog/tutorials/live-stream-tutorial) that will be used to broadcast your video. You can also check out the API reference material for this endpoint here: [Create live stream](https://docs.api.video/reference/post_live-streams).

Once you’ve created a livestream for the video, you’ll need the parameters from the response - namely the streamKey and the iframe/player urls for your viewers to see the livestream.

2. A recorded video. You’ll want to have a video that you wish to send over the livestream.  This can be a video local to your computer, but in this tutorial, it will be a file that has been [uploaded to api.video](https://api.video/blog/tutorials/uploading-large-files-with-javascript). We’ll use the mp4 url for the streaming. The API reference doc for uploading a video is here: [Upload a video](https://docs.api.video/reference/post_videos-videoid-source).

3. FFMPEG You’ll also need [FFMPEG installed](https://ffmpeg.org/download.html) on your computer. If you use a Mac, you can install via HomeBrew. FFMPEG is the tool that will help you take your VOD and convert it into a broadcast.

Ok, Now you have everything you need.  In a terminal window on your computer, we’ll run a FFMPEG command:

```
ffmpeg -i <your video to be streamed> -preset ultrafast -tune zerolatency -f flv rtmp://broadcast.api.video/s/<livestream streamkey>
```

Ffmpeg will take an input (-i) of your video, and using an ultrafast and zero latency transcoding, create a flv (rtmp flash video) stream, and send it to the api.video RTMP stream.

medium_screenshot-2021-02-08-at-19-44-13.jpg

small_screenshot-2021-02-08-at-19-44-13.jpg

thumbnail_screenshot-2021-02-08-at-19-44-13.jpg

screenshot-2021-02-08-at-19-44-13.jpg

FFMPEG will start running, and spit out a lot of code into the terminal.. Here you can see that the video is being encoded and sent on.

That’s literally all you have to do to make this work.


## I have scheduled broadcast at 8 AM, UGH!

Ok, what if you could automate this command to run right at 8am (and you can hit the snooze button one more time)?  It is easy to do!

Create a Bash script with your command:


```
#!/bin/bash

ffmpeg -i class_recording.mp4 -preset ultrafast -tune zerolatency -f flv rtmp://broadcast.api.video/s/<livestream streamkey>
```

Then we’ll use crontab (Mac and Linux) to automate the command.  Let's say class is Feb 10, at 8 AM.

Running 

```
crontab -e
```
Opens the cronjob queue (probably in VIM). Type ‘i’ to begin typing, and enter:

```
00 08 10 02 * <path to your script>
```

This will run the script at 8 AM on February 10. To exit VIM, type <esc>, ‘:wq” to save the file. Now - as long as your computer is on at 8 AM on the 10th, the video will stream for you!

## Looping a video in a livestream

Do you want to have a video on continuous loop?  With api.video, you *can* do this with just our video player:

	
```
https://embed.api.video/vod/vi6xuvHolHxZQ5r6KETXAiR4#autoplay;muted;loop
```
	
Appending the autoplay, muted and loop parameters to the player url tells the api.video player to do all of these actions - the video will continuously playback for your users.
	
But if you want to have the loop in a livestream, this is possible as well:

```
ffmpeg 	-stream_loop <number of loops> -i https://cdn.api.video/vod/vi1UQBDAMqAPCRxB3dmw1thc/mp4/1080/source.mp4 -preset ultrafast -tune zerolatency -f flv rtmp://broadcast.api.video/s/1d1e7a11-14a6-4984-b6d4-0c9864aec3dd
```
	
Simply insert the -stream_loop in the beginning of your ffmpeg command, and add the number of additional plays afterwards (-1 is an infinite loop).  


## Sharing a movie


Ok - since we can have a livestream - we can now “share” a movie with others.  Note: the videos are *not* perfectly synced (a work in progress), but we can all watch the same video - at approximately the same location for each of us.

We’ve sort of covered this idea with a class lecture - you might imagine all the students will be online at 8 AM to watch the class.  But what if we wanted to do something fun?  

We've built [share.a.video](https://share.a.video), a demo app running NodeJS, that replicates the FFMPEG transcoding shown above, but on your remote server - and then gives a playback view where anyone with the url can watch the video.  In the example, we use 'Big Buck Bunny' and `Sita Sings the Blues' (both Creative Commons licensed videos). The code is open sourced on [Github](https://github.com/dougsillars/shareavideo)
	
On page load - we look to see if the livestream is already broadcasting:
	
On the Node server, we have some of the video data hardcoded. To find out if the video is playing, we call the Livestream endpoint, and match the livestreamIds - what we are really interested in is the broadcasting parameter:

```
	//get data on both movies:
	const client = new apiVideo.Client({ apiKey: apiVideoKey });
	let allLiveStreams = client.lives.search();
	var videos =[{
		"name": "Big Buck Bunny",
		"livestream": "li6ndv3lbvrZELWxMKGzGg9V",
		"broadcasting":false, 
		"iframe":"",
		"thumbnail":"",
		"description": "Big Buck Bunny is a free and open source movie, created by Blender, and released under Creative Commons 3.0."

		},{
			"name": "Sita Sings the Blues",
			"livestream": "li7e2ePBRYKY6AOfPU8HSt91",
			"broadcasting":false,
			"iframe":"",
			"thumbnail":""
			,
		"description": "Sita Sings the Blues is a an open source movie, created by Nina Paley, and released under CC-BY-SA."
		}];

	
	allLiveStreams.then(function(liveList){
		//console.log(liveList);
		for(var i=0;i<liveList.length; i++){
			
			//set iframe thumbnail and broadcasting status for each video
			if(liveList[i].liveStreamId === videos[0].livestream){
				videos[0].broadcasting = liveList[i].broadcasting;
				videos[0].thumbnail = liveList[i].assets.thumbnail;
				videos[0].iframe = "iframe src='" +liveList[i].assets.player +"' width=\"100%\" height = \"100%\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"true\"";
			}else if(liveList[i].liveStreamId === videos[1].livestream){
				videos[1].broadcasting = liveList[i].broadcasting;
				videos[1].thumbnail = liveList[i].assets.thumbnail;
				videos[1].iframe = "iframe src='" +liveList[i].assets.player +"' width=\"100%\" height = \"100%\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"true\"";
			}

		}
		console.log(videos[counter]);
			return res.render('index', videos[counter]);
																	 \
																	 
```
We return the JSON array of video data to the web application. The application is built with Pug, and we can use logic from the broadcasting variable to decide what is displayed:
																	 
```
    if broadcasting
      h1 The Movie has already started. Click the image to enter the theatre.
      p
      h2 Make sure your phone is silenced.
      #video-player
        #thumb-live-indicator.active
        #videoDiv
          #{iframe}
        #imageDiv.hidden
          #{livestream}
    else
      h1 Click the image to begin the livestream.  It'll take a few seconds to buffer up, and then we'll get you into the theatre.
      p
      h2 Make sure your phone is silenced.
      #video-player
         #thumb-live-indicator
         #videoDiv.hidden
           |#{livestream}
         #imageDiv
          img.image(src= thumbnail)
  if broadcasting
    #video-title.active
      p Video is playing Click Image to enter the theatre
  else
    #video-title
      p #{description} 
```

	
If broadcasting = true, we display a page that lets viewers enter the video playback. If broadcasting=false, we invite viewers to click the image, and start the livestream.  

When you start the livestream, we call the "start" endpoint, which will start the livestream.  We decide which movie is being started, and then use FFMPEG commands (similar to those above) to do the VOD-> live transcoding on the server:
																	 
																	 ```
																	 	//ok this will kick the video stream off
		console.log(req.body);
		var videoToStream = req.body.movie;
		//counter for array data BBB=0, SSTB =1 (more will go from here)
		var counter = 0;
		if(videoToStream==="sstb"){
			counter =1;
		}	
		console.log("video to stream:",videoToStream );
		var videoLink = videoUrls[counter];
		var rtmpDestination = "rtmp://broadcast.api.video/s/"+streamKeys[counter];
		
		var ops = [
			'-i', videoLink, 
			  '-preset', 'ultrafast', '-tune', 'zerolatency', 
				'-f', 'flv', rtmpDestination		
		];


		console.log("ops", ops);
		ffmpeg_process=spawn('ffmpeg', ops);
		//ffmpeg started
		console.log("video stream started");
		
		ffmpeg_process.stderr.on('data',function(d){
			console.log('ffmpeg_stderr',''+d);
		});
		
		//
		 res.sendStatus(200);
																	 ```
	
When the video stream starts, we head back to the client side of the app for another cool trick.
	
A livestream requires about 15 seconds of video to be transcoded before it is live - so if we opened the livestream URL right away, viewers would get an error.  So, we play a little trick  when we get the response from the server:
	
	```
	 oReq.onload = function (oEvent) {
            console.log("video started: ",movieUpload );
            var livestreamid  = document.getElementById("videoDiv").innerHTML;
            document.getElementById("videoDiv").innerHTML="";
            console.log("liveid", livestreamid);
            var videos = ['vi74TmfoJyPmVJVnIl4jzMLA', livestreamid];

            //now we create the player
            //since the livestream can take some time to start - we'll kick off with the 10 second countdown video
            var counter = 0;
            createVideo(counter);
            document.getElementsByClassName('image')[0].style.display= 'none';
            document.getElementById('thumb-live-indicator').className = "active";

            //code lifted from playlist demo
            function createVideo(counter) {
                console.log("video", counter +videos[counter]);

                var vodOptions = { 
                    id: videos[counter], 
                     autoplay: true
                     // ... other optional options s
                 };
                 var liveOptions = { 
                    id: videos[counter], 
                     autoplay: true,
                     live: true
                     // ... other optional options s
                 };
                 videoOptions = vodOptions;
                 if(counter >0){
                     //live video
                     videoOptions= liveOptions;
                     //add teh sync button
                 //   liveSync();

                 }
                console.log("player options", videoOptions);

                window.player = new PlayerSdk("#imageDiv", videoOptions);
                player.addEventListener('play', function() { 
                    //console.log("playing");
                    onPlay(counter);
                });
                player.addEventListener('ended',function() { 
                    console.log("ended");
                    counter ++;
                    //if we hit the end of the array - start over again
                   
                    onEnd(counter);
                });
            
            }
            
            
            function onPlay(counter) {
               // console.log("onPlay");
                console.log("counter" ,counter);
            
                console.log("video playing");
            }
            function onEnd(counter){
                //console.log("onEnd");
     
                //console.log("video over");
                player.destroy();
                //video is over - so start another one...
                createVideo(counter);
            }
            //end code lifted from playlist demo


    }
	```
	
We create a [video playlist](https://api.video/blog/tutorials/creating-video-playlists) - where the first video is a 10 second countdown - like from the movies, and the 2nd video is the livestream.
	
This gives the live video enough time to build up a buffer and be ready to play, and makes for a fun experience for viewers.
	
## Conclusion
	
In this post, we've walked through several different ways to convert a recorded video into a livestream, all using FFMPEG in the background.  We've covered a basic command line implementation, and then shown how to schedule that same command.
	
We've also built a sample application based on NodeJS at [share.a.video](https://share.a.video) that does the same thing, but on a remote server, and has built in webviews to start and watch the videos.
	
If you still have questions (or want to share how you are piping recorded video into a livestream) - join the conversation on our [community forum](https://community.api.video).

And if you want to check out our reference documentation, the live stream content is available here: [Live Streams](https://docs.api.video/reference/get_live-streams). Fianlly, if you still haven't created an api.video account, you can do that in just a few second [here](https://dashboard.api.video/register). Thanks for reading! 

medium_screenshot-2021-02-11-at-11-19-23.jpg

small_screenshot-2021-02-11-at-11-19-23.jpg

thumbnail_screenshot-2021-02-11-at-11-19-23.jpg

screenshot-2021-02-11-at-11-19-23.jpg

Sharing a video: sending a video via live stream

Authenticate

Live streaming your content is a great way to connect with your audience. In this tutorial, we'll walk through the steps you need to follow to set up a video livestream.

Note: we have example code of setting up a live stream in the [browser](https://api.video/blog/tutorials/live-stream-tutorial/), with [Zoom](https://api.video/blog/video-trends/start-remote-work-with-online-video-and-zoom-us)
and with [OBS](https://api.video/blog/video-trends/video-live-streaming-in-just-5-easy-steps).

[Here](https://docs.api.video/reference/post_live-streams) is the direct link to the technical docs to create a live stream.

In order to establish a video livestream, you must first create a livestream container at api.video. Then you can begin streaming with the tool of your choice. In this example, the live stream will be created with OBS, free and open source software for video streaming.  

## Creating Live Stream

### Step 1: Authenticate

You need an access_token in order to create and upload a video.

You will need your API key to obtain the access_token. You can find your API key in [your dashoard](https://dashboard.api.video).  

This tutorial uses the sandbox endpoint. To upload your video in production, simply replace all `sandbox.api.video` instances with `ws.api.video`.

First, call the authentication endpoint and get your access token.


#### Example - Curl Request


### Step 2: Create the Live Stream

Now we [create the live stream](https://docs.api.video/reference/post_live-streams). In the JSON parameter, feel free to edit the name of the live stream from "Your Stream Name" to whatever you want to name your stream.

#### Example - Curl Request

Live - create