DEV Community

Cover image for Simple Screen Recorder With Vanilla JS
Seth Addo
Seth Addo

Posted on

Simple Screen Recorder With Vanilla JS

Let's Begin

In this blog, you are going to learn how to create a screen recorder that does not only record your browser screen. Yes, it can record not only your active tab but the entire screen if you want.
First of all, we will create an HTML file which contains a record button and a video element where you can play the recorded video.

<!DOCTYPE html>
<html>
  <head>
    <title>Screen Recorder/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>
Enter fullscreen mode Exit fullscreen mode

And we also need a JavaScript file. Let's create a file and naeme it index.js.

NB: You can name your js file with any other name but make sure you reference the name well in the HTML file.

let btn = document.querySelector(".record-btn");
btn.addEventListener("click", function () {
  console.log("hello");
});
Enter fullscreen mode Exit fullscreen mode

In the JS file, type the above code into it. This should print the word hello when you open your browser. Alright, now instead of console.log, let us get the stream display

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

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

Now, after clicking the button, you'll see the screen below:
Recording mode selector

Now that we can select the way to record the video, let's now go into the main implementation, that is how to actually record the video. We will use MediaRecorder to record the 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()
})
Enter fullscreen mode Exit fullscreen mode

While recording, we now need to store the data we got from mediaRecorder 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()
})
Enter fullscreen mode Exit fullscreen mode

Let's add the code to make the video play in the video element after we are done recording

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()
})
Enter fullscreen mode Exit fullscreen mode

Okay, we are almost done. Now let's add some finishing touches to make the video video download itself automatically after recording has been stopped.

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()
})
Enter fullscreen mode Exit fullscreen mode

We are finally done, Hope it worked for you.

Thanks for your time and don’t forget to be friends with me on:

Top comments (9)

Collapse
 
0shuvo0 profile image
Info Comment hidden by post author - thread only accessible via permalink
Shuvo

Looks like someones been following my article 🙈

Collapse
 
seths10 profile image
Seth Addo

🤣🤣

Collapse
 
baloraki profile image
baloraki

Thanks, really awesome.
The browser has such great features.

Collapse
 
seths10 profile image
Seth Addo

yh it does

Collapse
 
kingjosh007 profile image
King Josaphat Chewa

I didn't even know this could be done without a back-end!
Great! Thanks for this post.

Collapse
 
seths10 profile image
Seth Addo

you are welcome

Collapse
 
rajezz profile image
Rajeswaran

Thanks for sharing this ✌🏻 Quite informative 💡

Collapse
 
seths10 profile image
Seth Addo

thanks for reading

Collapse
 
aashishpanthi profile image
Aashish Panthi

Yo man

Some comments have been hidden by the post's author - find out more