Video upload

SDKs and libraries

Normal

small_olivier.png

thumbnail_olivier.png

olivier.png

Olivier Lando

Tutorials

JavaScript

In this tutorial, we'll see how to build a Loom-like web application using the JS library we've just released: [@api.video/media-stream-composer](https://github.com/apivideo/api.video-typescript-media-stream-composer).

## **Presentation**

### **The Loom tool**

For those who do not know the Loom tool, here is the description that can be found on their site:

> Loom is a video messaging tool that helps you get your message across through instantly shareable videos.
> 
> 
> With Loom, you can record your camera, microphone, and desktop simultaneously. Your video is then instantly available to share through Loom's patented technology.
> 

Here we will create a simplified version of Loom, which will incorporate its main functionality, namely uploading videos from a screencast with the user's webcam overlaid as a rounded thumbnail.

### **The @api.video/media-stream-composer JS library**

The [@api.video/media-stream-composer](https://github.com/apivideo/api.video-typescript-media-stream-composer) aims to simplify handling video streams in browsers.

Here are its main features:

- generated a video stream composed of several video streams available in browsers (webcams, screen recording)
- easily generate & upload this video stream to [api.video](https://api.video/) using api.video's progressive upload feature
- let the user interact with the stream composition on the fly (by moving/resizing each base stream or drawing in the result stream)

The library can be easily included in any web page or added as a dependency to a project, for example, in a React.js application. For more information, feel free to check out the [readme](https://github.com/apivideo/api.video-typescript-media-stream-composer) on GitHub.

### **What it will look like**

What we will build will take the form of a simple web page where the user will have to choose the screen window he wants to save.

Then this window will be displayed on the web page with the webcam in superposition. It will be possible to move and resize the webcam view.

A button will allow you to start and stop the recording. Once the recording is finished, a link to the uploaded video will be displayed.

large_screenshot.jpg

medium_screenshot.jpg

small_screenshot.jpg

thumbnail_screenshot.jpg

screenshot.jpg

## Prerequisites

The only things you’ll need are:

- a text editor
- an [api.video](http://api.video) account - you can easily create a free sandbox account by going here: [https://dashboard.api.video/register](https://dashboard.api.video/register).

## **Let’s do it!**

### **Page layout**

The first step will be to write the HTML code of the web page. It will be very straightforward since it will contain only the following elements:

- a div container that will contain the preview of the recording
- 2 buttons to start and stop the recording
- a select input to choose the mouse tool: move/resize or drawing
- a text holder for the video link

This is what it looks like:

### **The @api.video/media-stream-composer library**

### **Initialization**

Let's get serious! The first step here is to include the script of the library. To do this, we'll add the following in the `<head>` tag of the page:

Fine, the script is now included; we can now add some JS code to initialize the library. To keep it simple for this tutorial, all the JS code will be directly included in the HTML page.

Let's add the following before the closing `</body>` tag:

In this snippet, we create the `MediaStreamComposer` instance. The `MediaStreamComposer` is a class that will allow us to compose a video stream from several video streams available in browsers.

Then, we append the canvas created by the `MediaStreamComposer` to the `#canvas-container` div. By doing so, the video stream will be displayed on the web page, and the user will be able to interact with it.

We can add our video streams now that we have initialized our library.

### **Adding video streams**

We will add two streams to our composition:

- a screencast of the user's screen in the background
- a webcam stream in a rounded thumbnail in the bottom left corner

Adding a stream is done with the `addStream()` method. It takes 2 parameters: the MediaStream, and the settings object specifying how the stream should be displayed.

First, we have to request the browser to give us the streams. This is done with the `navigator.mediaDevices.getUserMedia()` & `navigator.mediaDevices.getDisplayMedia()` methods.

Now that we have the streams, we can add them to the composer.

Done! The streams are now added to the composer, and the video stream is displayed on the web page. We can now configure the drawing tool.

### **Drawing tool**

The drawing tool is a simple pen that will allow the user to draw on the video stream. It can be configured using the `setDrawingSettings()` method as follow:

Nice! We're almost done. The last step is to add some buttons & inputs to the web page so the user can interact with it.

### **User interactions**

To simplify the task, we will first create constants containing references to the buttons & inputs.

We can now bind the events to the buttons & inputs.

*The `start` button*

When the user clicks on the `start` button, we can call the `MediaStreamComposer` to start recording. We will use the `startRecording()` method. This method takes an `uploadToken` as a parameter. An upload token is a unique identifier that will be used to upload the video to api.video. You can create a new upload token using the API or directly from the api.video dashboard.

*The `stop` button*

When the user clicks on the `stop` button, we will call the `stopRecording()` method. This method returns a Promise that will be resolved when the recording is stopped. The Promise's value is an object containing the details about the uploaded video. We will retrieve the video URL from the object and display it in the `video-link` element.

*The `tool-select` select*

This select box will allow the user to select the action performed when the user clicks on the video stream. It can be either "drawing" or "moving / resizing a stream". Choosing a tool is done by calling the `setMouseTool()` method.

## **To go further...**

The media stream composer library allows you to do many other things, like selecting a different audio source from the video streams, or adding static images to your composition (to display a logo for example). For more information, feel free to check the readme on the github repo.

## **Conclusion**

You have seen how easy and fast it is to create this application using the @api.video/media-stream-composer library.

The full code is available in the repo of the library on GitHub here: [examples/screencast-webcam.html](https://github.com/apivideo/api.video-typescript-media-stream-composer/blob/main/examples/screencast-webcam.html).

You can see the demo live at [https://record.a.video/screencast-webcam.html](https://record.a.video/screencast-webcam.html).

To see a more complex example, in action, look at [https://record.a.video](https://record.a.video/). You'll be able to test almost all the features of the library in action.

large_build-your-own-loom.png

medium_build-your-own-loom.png

small_build-your-own-loom.png

thumbnail_build-your-own-loom.png

build-your-own-loom.png

Build a Loom-like app with just a few lines of code

Analytics

doug.jpg

twitter-brands.svg

Doug Twitter

Doug Sillars

Product updates

How many people have watched my video?

How much of my video are people watching?

Is there a common abandonment time?

Are my users skipping ahead in the video?

These are questions that can be solved with api.video's [analytics](https://docs.api.video/reference/analytics).  

## Now available with external players

api.video offers video encoding, hosting, delivery and analytics.  If you do not want to use our player (or already have an integration with another player), you can use your [3rd party player to deliver the video](https://api.video/blog/tutorials/using-api-video-with-external-video-players). 

Until now, when you used an external player, you lost the opportunity to gain any insights from our analytics engine. We have now launched libraries for [videojs](https://github.com/apivideo/videojs-player-analytics), [hlsjs](https://github.com/apivideo/hlsjs-player-analytics), and a general [analytics package](https://github.com/apivideo/player-analytics), allowing you to integrate api.video analytics into your customized 3rd party video player!

## How does it work?

Let's look at an integration with videoJS. Here's a simple page that loads a video from api.video into videoJS, (and has added in analytics):


```
<head>
  <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
  <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
  <script src="https://unpkg.com/@api.video/videojs-player-analytics"></script>

  
  
</head>

<body>
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="1280"
    height="720"
    poster="https://cdn.api.video/vod/vi4blUQJFrYWbaG44NChkH27/thumbnail.jpg"
    data-setup="{}"
  >
    <source src="https://cdn.api.video/vod/vi4blUQJFrYWbaG44NChkH27/hls/manifest.m3u8" type="application/x-mpegURL" />
    
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>

  <script>
             videojs.registerPlugin('apiVideoAnalytics', VideoJsApiVideoAnalytics);
            
             var player = videojs('my-video');
	         player.apiVideoAnalytics();
			 
         </script>
</body>
```

To add analytics, we add the script in the head of the document:

```
 <script src="https://unpkg.com/@api.video/videojs-player-analytics"></script>
```

and then to add the analytics engine, we add the JavaScript at the end of the page:
* registering the api.video analytics plugin
```
 videojs.registerPlugin('apiVideoAnalytics', VideoJsApiVideoAnalytics);
```
* assigning a variable to the player
```
 var player = videojs('my-video');
```
* connecting the player to the analytics plugin
```
player.apiVideoAnalytics();
```

and that's all there is to it!

## Can I add metadata to the analytics?

Yes! If you replace: 

```
player.apiVideoAnalytics();
```

with:

```
      player.apiVideoAnalytics({
        metadata: {
          player: "videojs"
        }
      });
```

you can collect [dynamic metadata](https://api.video/blog/tutorials/dynamic-metadata).  In this case, I am assigning the value videojs to the player variable.  Now, whenever anyone watches a video using this videoJS player, it will be recorded in the dynamic metadata as such (so I can break down the playback across different devices).

Querying the analytics, we can see this in action:


```
		{
			"session": {
				"sessionId": "ps4ZrdWqAR8mevHi4IwHoACf",
				"loadedAt": "2021-04-01T11:07:25+00:00",
				"endedAt": "2021-04-01T11:07:25+00:00",
		*		"metadata": [
					{
						"key": "player",
						"value": "videojs"
					}
				]*
			},
			"location": {
				"country": "United Kingdom",
				"city": "Chesham"
			},
			"referrer": {
				"url": "https://jsfiddle.net/",
				"medium": "unknown",
				"source": "unknown",
				"searchTerm": "unknown"
			},
			"device": {
				"type": "computer",
				"vendor": "unknown",
				"model": "Other"
			},
			"os": {
				"name": "Mac OS X",
				"shortname": "Mac OS X",
				"version": "11.2.3"
			},
			"client": {
				"type": "unknown",
				"name": "Chrome",
				"version": "89.0.4389"
			}
		}
```

## Conclusion

We are working to make api.video integrate easily into your infrastructure.  If you use a 3rd party player, you are no longer prevented from using our analytics to study the playback of your videos.

Grab the appropriate library, and try it today!

[videojs](https://github.com/apivideo/videojs-player-analytics)

[hlsjs](https://github.com/apivideo/hlsjs-player-analytics)

[General analyitics package](https://github.com/apivideo/player-analytics)

medium_43160471697fbafef276c.jpg

small_43160471697fbafef276c.jpg

thumbnail_43160471697fbafef276c.jpg

43160471697fbafef276c.jpg

New feature: Analytics libraries for 3rd party video players!

Featured article

# api.video blog

Blog

Follow the api.video Blog to explore tutorials, video use cases, and learn about on-demand and live-streaming video updates.