Simple Screen Recorder With Vanilla JS
Tags: javascript, webdev, beginners, tutorial
Published: 2021-10-22 13:49:27

## 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.
```html
<!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>
```
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.

```javascript
let btn = document.querySelector(".record-btn");
btn.addEventListener("click", function () {
  console.log("hello");
});
```
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

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

btn.addEventListener("click", async function () {
  let stream = await navigator.mediaDevices.getDisplayMedia({
    video: true
  });
});
```
Now, after clicking the button, you'll see the screen below:
![Recording mode selector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j8bcdzxsv2zkzs7po048.png)

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.

```javascript
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()
})
```
While recording, we now need to store the data we got from `mediaRecorder` in a variable.

```javascript
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()
})
```
Let's add the code to make the video play in the video element after we are done recording
```javascript
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()
})
```
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.

```javascript
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()
})
```
We are finally done, Hope it worked for you.

Thanks for your time and don’t forget to be friends with me on:
* [Twitter](https://www.twitter.com/set_addo) 
* [LinkedIn](https://www.linkedin.com/in/seth-addo-034327190)
* [GitHub](https://www.github.com/seths10)