Create a screen recording function with JS

Create a screen recording function with JS

OBS studio is cool, but JavaScript is cooler. Now, let’s create our own screen recording function with JavaScript .

First, create an HTML file that contains a record button and a play tag.

The content is as follows:

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

Then create index.js ,

Listen for button clicks:

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

Open the html file in the browser and click the button. We can see hello printed in the console.

Now remove the print and replace it with the following:

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

Now click the button and a screen selection box will pop up:

Since I am using two screens now, two options will appear.

Now you might think that selecting a screen and clicking Share will start the recording. No, this is more complicated than we think. 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 
  }) 
 
  // Need better browser support const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")  
             ? "video/webm; codecs=vp9"  
             : "video/webm" 
    let mediaRecorder = new MediaRecorder(stream, { 
        mimeType: mime 
    }) 
    //Must start mediaRecorder.start() manually 
})

When our screen is recorded, mediaRecorder will provide us with chunks of data, which we need to store in a variable.

let btn = document.querySelector(".record-btn") 
 
btn.addEventListener("click", async function () { 
  let stream = await navigator.mediaDevices.getDisplayMedia({ 
    video: true 
  }) 
 
  // Need 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) 
    }) 
 
    //Must start mediaRecorder.start() manually 
})

Now, when we click the stop sharing button, we want to play the recorded video in our video element, we can do it like this:

let btn = document.querySelector(".record-btn") 
 
btn.addEventListener("click", async function () { 
  let stream = await navigator.mediaDevices.getDisplayMedia({ 
    video: true 
  }) 
 
  // Need 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) 
      }) 
 
 
    //Must start mediaRecorder.start() manually 
})

Now it is basically done and can be polished, such as automatically downloading the recorded video.

You can do this:

let btn = document.querySelector(".record-btn") 
 
btn.addEventListener("click", async function () { 
  let stream = await navigator.mediaDevices.getDisplayMedia({ 
    video: true 
  }) 
 
  // Need 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() 
  }) 
 
 
    //Must start mediaRecorder.start() manually 
})

Now, the most basic recording function is complete, let's try it out!!

This is the end of this article about using JS to create a screen recording function. For more information about using JS to create a screen recording function, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Summary of JS tips for creating or filling arrays of arbitrary length

<<:  How to add configuration options to Discuz! Forum

>>:  A brief discussion on how to set CSS position absolute relative to the parent element

Recommend

How to export mysql query results to csv

To export MySQL query results to csv , you usuall...

Use of Vue filters and custom instructions

Table of contents Filters 01.What is 02. How to d...

How to prevent Flash from covering HTML div elements

Today when I was writing a flash advertising code,...

52 SQL statements to teach you performance optimization

1. To optimize the query, try to avoid full table...

After installing MySQL, the root account prompt appears when logging in. mysql ERROR 1045 (28000): Access denied for use solution

After installing MySQL, you will find that the ro...

jQuery realizes the picture following effect

This article shares the specific code of jQuery t...

How to directly access the docker for windows container intranet through an independent IP

Docker officially recommends that we use port map...

Detailed explanation of three relationship examples of MySQL foreign keys

This article uses examples to describe the three ...

Videojs+swiper realizes Taobao product details carousel

This article shares the specific code of videojs+...

Sharing tips on using scroll bars in HTML

Today, when we were learning about the Niu Nan new...

HTML table markup tutorial (37): background image attribute BACKGROUND

Set the background image for the table header. Yo...

Implementation of MySQL multi-version concurrency control MVCC

Transaction isolation level settings set global t...

MySQL tutorial DML data manipulation language example detailed explanation

Table of contents 1. Data Manipulation Language (...

Automatic line breaks in html pre tags

At this time, you can use overflow:auto; (when the...

How to recompile Nginx and add modules

When compiling and installing Nginx, some modules...