logo api.video

Tutorials · 6 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.


Ready to build your own Loom-like App? Get started by signing up with api.video!
LATEST ARTICLES
What is a webhook?
Tutorials · 8 min read
What is a webhook and how to use webhooks for real-time video management
Answer critical questions like what are webhooks, how they work, and how you can use them for video management. 
api.video · September 12, 2024
 
AI face recognition (React)
Tutorials · 4 min read
How to build AI facial expression detection into your videos with React
Learn how to add AI facial expression detection to your videos using one of Javascript's powerful libraries, React. 
Yohann Martzolff · June 26, 2024
 
AI face recognition (Javascript)
Tutorials · 4 min read
How to integrate AI facial expression detection to control your video – Javascript 
Learn how to add AI facial expression detection to your videos using Javascript. 
Yohann Martzolff · June 25, 2024
 
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.