Let’s Use JavaScript to Make a Screen Recorder

Let’s Use JavaScript to Make a Screen Recorder


Published at - Oct 29, 2021

OBS Studio is wonderful, but let’s use JavaScript to make our own screen recorder.

What’s more, the recorder we’ll build isn’t simply for recording the browser screen. Yes, you read that correctly. JavaScript may be used to capture not only the active tab but any tab or full screen, despite the fact that JavaScript runs in the browser. Let’s get this party started.

The first thing we’ll need is an HTML file with a record button and a video element where we can play the video we’ve captured.

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <video class="video" width="600px" controls></video>
    <button class="record-btn">record</button>

    <script src="./index.js"></script>
  </body>
</html>

We’ll also require a JS file, so let’s start with the index.js

let btn = document.querySelector(".record-btn");

btn.addEventListener("click", function () {
  console.log("hello");
});

So, if we open the browser and press the button, we should see hello in the console.

Let’s obtain the stream of users shown instead of console.log.

let btn = document.querySelector(".record-btn");

btn.addEventListener("click", async function () {
  let stream = await navigator.mediaDevices.getDisplayMedia({
    video: true
  });
});

As a result, when you click the button, you’ll receive this popup.

You might think we’re done now, but we’re not. Select a window or screen and click share, and the recording should begin. However, the situation is a little more difficult. The video must be recorded by us. To capture our video, we’ll utilize MediaRecorder.

let btn = document.querySelector(".record-btn")

btn.addEventListener("click", async function () {
  let stream = await navigator.mediaDevices.getDisplayMedia({
    video: true
  })

  //needed for better browser support
  const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") 
             ? "video/webm; codecs=vp9" 
             : "video/webm"
    let mediaRecorder = new MediaRecorder(stream, {
        mimeType: mime
    })

    //we have to start the recorder manually
    mediaRecorder.start()
})

Store recording chunks in a variable

As our screen is recorded, mediaRecorder will provide us with data in chunks, which we must store in a variable.

let btn = document.querySelector(".record-btn")

btn.addEventListener("click", async function () {
  let stream = await navigator.mediaDevices.getDisplayMedia({
    video: true
  })

  //needed for better browser support
  const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") 
             ? "video/webm; codecs=vp9" 
             : "video/webm"
    let mediaRecorder = new MediaRecorder(stream, {
        mimeType: mime
    })

    let chunks = []
    mediaRecorder.addEventListener('dataavailable', function(e) {
        chunks.push(e.data)
    })

    //we have to start the recorder manually
    mediaRecorder.start()
})

Stop recording

Now, when we click the stop sharing button, we’d like the recorded video to play in our video element, so let’s accomplish that.

let btn = document.querySelector(".record-btn")

btn.addEventListener("click", async function () {
  let stream = await navigator.mediaDevices.getDisplayMedia({
    video: true
  })

  //needed for better browser support
  const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") 
             ? "video/webm; codecs=vp9" 
             : "video/webm"
    let mediaRecorder = new MediaRecorder(stream, {
        mimeType: mime
    })

    let chunks = []
    mediaRecorder.addEventListener('dataavailable', function(e) {
        chunks.push(e.data)
    })

    mediaRecorder.addEventListener('stop', function(){
      let blob = new Blob(chunks, {
          type: chunks[0].type
      })

      let video = document.querySelector(".video")
      video.src = URL.createObjectURL(blob)
  })

    //we have to start the recorder manually
    mediaRecorder.start()
})

Download recording

Let’s now automatically download the recorded video as a final touch.

let btn = document.querySelector(".record-btn")

btn.addEventListener("click", async function () {
  let stream = await navigator.mediaDevices.getDisplayMedia({
    video: true
  })

  //needed for better browser support
  const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") 
             ? "video/webm; codecs=vp9" 
             : "video/webm"
    let mediaRecorder = new MediaRecorder(stream, {
        mimeType: mime
    })

    let chunks = []
    mediaRecorder.addEventListener('dataavailable', function(e) {
        chunks.push(e.data)
    })

    mediaRecorder.addEventListener('stop', function(){
      let blob = new Blob(chunks, {
          type: chunks[0].type
      })
      let url = URL.createObjectURL(blob)

      let video = document.querySelector("video")
      video.src = url

      let a = document.createElement('a')
      a.href = url
      a.download = 'video.webm'
      a.click()
  })

    //we have to start the recorder manually
    mediaRecorder.start()
})

And there now we have a fully functional screen recorder app.

Conclusion

In this article, we have successfully created a screen recorder using Javascript. I hope this will help you to create a simple screen recorder.

Thank you for your interest in reading this article. Don’t forget to follow me on Medium if you want to see more articles like this.

More content at **plainenglish.io**





About author

Harendra
Harendra Kanojiya

Hello, I am Harendra Kumar Kanojiya - Owner of this website and a Fullstack web developer. I have expertise in full-stack web development using Angular, PHP, Node JS, Python, Laravel, Codeigniter and, Other web technologies. I also love to write blogs on the latest web technology to keep me and others updated. Thank you for reading the articles.



Related Posts -

Angular 2+ datepicker
Angular 2+ datepicker ...

Table of Contents Date PickerScreenshotsDay:DayTime:Month:Time:Installat...



Angular 2 Toast component (Angular 2 Toasty)
Angular 2 Toast component ( ...

Angular2 Toasty component shows growl-style alerts and messages for your ap...



These 7 Front-End Websites Should Be Bookmarked Immediately!
These 7 Front-End Websites ...

I can confidently state that I mostly know what I&rsquo;m doing now that I&...



var functionName = function() {} vs function functionName() {}
var functionName = function ...

The difference is that&nbsp;functionOne&nbsp;is a function expression and ...



Node.js interview questions answer
Node.js interview questions ...

15 important nodejs interview question and answer 2021. Thank you !...



Follow Us

Follow us on facebook Click Here

Facebook QR
Scan from mobile
Join our telegram channel Click Here
Telegram QR
Scan from mobile