Building a Custom Screen Recorder from Scratch with HTML, CSS & JavaScript

Published on June 13, 2024

Hello everyone! Today, Today we’ll learn how to create an intriguing screen recording project. Let’s break down the code step by step and uncover the magic behind it!

We declare the document type and set the language to English. This is crucial for the browser to understand how to render the page.

In the <head>, we specify the character set as UTF-8, ensuring our webpage can display a wide range of characters. We also include a viewport meta tag, which makes the page responsive, adjusting its layout based on the device’s screen size. The title of our page is simply ‘Screen Recorder‘.

Moving on to the <body>, we set up a container div to hold the main elements of our page. Inside this container, we have an <h1> tag with the title ‘Screen Recorder‘, making it clear what our page is about.

Then, we have three buttons: ‘Start Recording‘, ‘Stop Recording‘, and ‘Download Recording‘. Each button has a unique ID. Initially, the ‘Stop Recording’ and ‘Download Recording’ buttons are disabled because we don’t need them until the recording process starts.

Next, we have a ‘box’ div. This is where our recorded video will be displayed. Inside this div, there’s a video element with controls enabled, allowing users to play, pause, and control the recorded video.

CSS

We apply a background colour of #b4b4b8 to the entire page, giving it a calm and neutral appearance.

Our container is centred and given a margin-top of 50px for some spacing. This keeps our main elements nicely aligned and easy to read.

The buttons are styled with padding for comfort, a background colour of #0d9276 for a fresh look, and rounded corners. They also change the cursor to a pointer on hover, making them feel interactive and user-friendly.

The box deev is set to a width of 400 pixel, and its contents are centred both vertically and horizontally. This ensures our video player is well positioned on the page.

The video element is styled to take up the full width of its container and is given a top margin for spacing. This makes the video easy to view and control.

JavaScript

First, we wait for the document to be fully loaded using $(document).ready(). This ensures our code runs only after the HTML is completely loaded, preventing any errors or issues.

We declare two variables: recorder and recordedBlob. These will handle the recording process and store the recorded data.

When the ‘Start Recording’ button is clicked, we access the screen using navigator.mediaDevices.getDisplayMedia(). This prompts the user to share their screen. If successful, we initialise the recorder with RecordRTC, specifying the type as ‘video’ and format as ‘webm‘. We then start the recording.

At this point, we disable the ‘Start Recording‘ button to prevent multiple recordings and enable the ‘Stop Recording’ button so the user can stop the recording whenever they’re ready.

If the user clicks the ‘Stop Recording’ button, we stop the recording and retrieve the recorded video blob. We create a URL for this blob and set it as the source for our video element. This allows the user to play back the recorded video immediately. We also toggle the button states: ‘Start Recording‘ is enabled again, ‘Stop Recording’ is disabled, and ‘Download Recording‘ is enabled.

Finally, the ‘Download Recording’ button allows users to save the recorded video. We create a hidden anchor element, set its href to the blob URL, and trigger a click event to start the download. This saves the video as ‘recorded_video.webm‘.

And that’s it! We have a fully functional screen recording tool with a user-friendly interface. We’ve covered the HTML structure, styled it with CSS, and brought it to life with JavaScript. I hope you enjoyed this walkthrough and feel inspired to create your own projects. Thank you for watching and happy coding!

Our Latest Blog

Learn, Build, and Innovate_ Machine Learning with Python at London’s Tech Institute

April 18, 2025ByFlorence

Our Latest Blog

Learn, Build, and Innovate: Machine Learning with Python at London’s Tech Institute

Accelerate Your Tech Career with LSET Bootcamps in Java, Python, DevOps & More

Build Scalable Web Apps with MongoDB, Express, React, and Node.js

Popular Courses

Follow Us