Web Tools #546 - MediaCapture, CSS/HTML Tools, SVG, Uncats

It's amazing how far the Web APIs have come and how much we can now do with just a little bit of JavaScript. One example of this is the Media Capture API, which allows you to capture part or all of a screen for things like streaming, recording, or sharing during a WebRTC conference.

I came across a simple example of this in this article by Nino Filiu, where he shows how to create a simple screen recorder using only 20 lines of JavaScript. You can check out that article or this demo for the full code. I'll show the main bits of it here, with some brief explanations.

In this case, the whole code gets triggered by a button click, but you could do it whatever way you want. The first part is as follows:

The above example uses the await operator in conjunction with the .getDisplayMedia() method of the mediaDevices interface. A MediaRecorder() constructor is also used, after which the recording session is initiated using the .start() method.

The next bit of code uses the same media object from the previous bit to grab the video tracks, which is where the actual media stream takes place:

During the streaming process, the code listens for the "ended" event to trigger a stop to the recording process.

When you first trigger the recorder, you'll get a browser-based option box that will ask you what tab in the browser you want to start recording. In this simple example, there's also no option to change the size of the recording; it defaults to the full viewport.

While the recording is in process, you'll notice a "Sharing this tab..." indicator at the top of the viewport area. This is where you can stop the recording process, which will trigger the "ended" event shown above.

The final bit of code, which I took from Nino's article, is a neat little way to grab the file that's created when the stream/capture session ends:

This creates an anchor (link) element that doesn't exist on the page but technically can still be manipulated. The link.click() method triggers a virtual "visit" to the link that's created, but since it has the "download" attribute present instead of a standard href, the file gets downloaded.

You can view my full CodePen demo here and, once again, full credit to Nino Filiu for the basic idea.

Now on to this week's tools!