Shuvo

Posted on Oct 21, 2021

Lets create a screen recorder with JS

#javascript #webdev #tutorial #beginners

OBS studio is cool but lets create our very own screen recorder using JavaScript.
And guess what? Its not limited to just recording the browser screen. Yes, you've read that right. Although JavaScript runs on browser, we can use JS to record not only the active tab but any tab or entire screen. So lets get started.
First thing we'd need is a HTML file, in that we will have a record button and a video element where we can play the recorded video.

<!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>

And we'd also need a JS file so lets create the index.js also

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

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

So now if we open it the browser and click on the button we should see hello in console.

Alright now instead of console.log lets get the stream of users display

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

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

So now if you click on the button you'll see this popup.

Now you might think we are done select a window or screen and click share and it should start recording. But its a bit more complicated than that. We have to record the video our self. We are going to use MediaRecorder to record our video.

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()
})

So as our screen get recorded mediaRecorder will give us data in chunks we need to store those data 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()
})

And now when we click on the stop sharing button we want the recorded video to be played in our video element so lets do 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()
})

Now as a finishing touch lets automatically download the recorded video.

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.

Make sure to read my other articles.

Python + JavaScript = 🔥🔥🔥

Shuvo ・ Oct 21 ・ 2 min read

#javascript #node #python #programming

Shuvo

Frontend Developer and YouTuber. Channel link: https://www.youtube.com/c/AngleBrace

Oldest comments (49)

Ashish Bailkeri • Oct 21 '21

Nice tutorial!

Shuvo • Oct 21 '21

I'm really glad that you liked it.

Amran AL Ketara • Oct 21 '21

YOU ARE AWESOME MAN!!
Do you have a YouTube channel, blog or something like that?

Shuvo • Oct 21 '21

Many many Thank.
Yes, I have a YouTube channel.
But I am introvert so I struggle to talk which is why my videos are not that good. But I'm trying to improve
youtu.be/mD_QQvJYQAI

Roshan kumar • Oct 22 '21

Really awesome tutorial !

Shuvo • Oct 22 '21

I am glad you liked it.

pramon18 • Oct 22 '21

This was a good article. Step by step articles like this are really a good idea. Good Job.

Shuvo • Oct 22 '21

Many thanks, I apprecate your valuable comment a loy

Tobias Nickel • Oct 22 '21

awesome, this is a great extension to all the zoom clone tutorials 👍

Shuvo • Oct 22 '21

Glad you liked it

Mena Nasser • Oct 22 '21 • Edited

Very nice article, thank you.

Shuvo • Oct 22 '21

Yes
developers.google.com/web/fundamen...
But its hard to to both at once

HonzaLed • Oct 22 '21

Nice tutorial, i was wondering how to do this, your step-by-step tutorial is awesome

Shuvo • Oct 22 '21

I am really glad that you liked it

Iacovos Constantinou • Oct 22 '21

That's really great!!

Shuvo • Oct 23 '21

Glad you found this helpful

Jose Antonio Felix • Oct 22 '21

It's pretty cool !!! thank you man

Shuvo • Oct 23 '21

You're most welcome

Branko Stancevic • Oct 23 '21 • Edited

Great article! Keep it up! However, I have question...

Why you need to create chunks when e.data in dataavailable is already a blob?

Isn't that part kinda unnecessary?

Couldn't we just use it like this?

  let blob = null;

  mediaRecorder.addEventListener('dataavailable', (e) => {
    blob = e.data;
  })

Shuvo • Oct 23 '21

as you keep recording the dataavailable event will run multiple time. So basically instead you giving you the entire video once recording is done it will give you data in small parts as the video is being recorded.

Branko Stancevic • Oct 23 '21

Ok cool! Thank you

d1_codes • Oct 23 '21

Great Tutorial here.. Please i cant fin where the recorded files are been saved.

Shuvo • Oct 23 '21

In your downloads folders.

nicenine98 • Oct 24 '21

hello
I am web developer. I have to build new site.
but I have to capture image from stream-video when user click capture button.
Also I have to extract from that images.
Help me.