Tutorials · 5 min read

Build a Loom like app

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

Build a Loom-like app with just a few lines of code using the @api.video/media-stream-composer library

Olivier Lando

June 30, 2022

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.

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 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 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 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.

Loom like app

Prerequisites

The only things you’ll need are:

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:

javascript

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:

javascript

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:

javascript

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.

javascript

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

javascript

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:

javascript

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.

javascript

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.

javascript

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.

javascript

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.

javascript

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.

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

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

Try out more than 80 features for free

Access all the features for as long as you need.
No commitment or credit card required

Video API, simplified

Fully customizable API to manage everything video. From encoding to delivery, in minutes.

Built for Speed

The fastest video encoding platform. Serve your users globally with 140+ points of presence. 

Let end-users upload videos

Finally, an API that allows your end-users to upload videos and start live streams in a few clicks.

Affordable

Volume discounts and usage-based pricing to ensure you don’t exceed your budget.