search

Building the Interface

To create a screen recorder for the web, you need only to code in regular HTML and JavaScript. As a start, follow the steps below to build the interface.

1. Create a folder called cloudy-snap. Type:

mkdir cloudy-snap
cd cloudy-snap

2. Create an index.html file incloudy-snap to house the code in the demo app. Type:

touch index.html

3. Edit the index.html file to read like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Cloudy Snap</title>
    <style>
        body{
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        .container{
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        
        #videoElement{
          width: 50%;
          padding: 30px;
        }
    </style>
</head>
<body>
    <img src="https://res.cloudinary.com/cloudinary/image/upload/c_scale,w_200/v1/logo/for_white_bg/cloudinary_vertical_logo_for_white_bg.png">
    <h1>CloudySnap</h1>
    <p>Take a screen recording on the web and upload it to Cloudinary</p>
    <div class="container">
      <video id="videoElement" autoplay></video>
      <button id="recorder">
        Capture screen for 2 seconds and Upload to Cloudinary
      </button>
    </div>
</body>
</html>

4. Run theindex.html file in Chrome.

Chrome then displays the interface for the demo app.

Interface for Demo App

At this point, interacting with the interface results in no response from the recorder. The next section shows you how to add capabilities to the recorder and make it work.

PreviousPutting in Place the PrerequisitesNextAdding the Pertinent Features

Last updated

Was this helpful?