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

Basic usage of JS date control My97DatePicker

My97DatePicker is a very flexible and easy-to-use...

CSS3 uses the transition property to achieve transition effects

Detailed description of properties The purpose of...

Common array operations in JavaScript

Table of contents 1. concat() 2. join() 3. push()...

Detailed process of NTP server configuration under Linux

Table of contents 1. Environment Configuration 1....

WeChat applet custom tabBar step record

Table of contents 1. Introduction 2. Customize ta...

How to use limit_req_zone in Nginx to limit the access to the same IP

Nginx can use the limit_req_zone directive of the...

Analysis of the methods of visual structure layout design for children's websites

1. Warm and gentle Related address: http://www.web...

The correct way to use MySQL indexes and detailed explanation of index principles

1. Introduction Why do we need indexes? In genera...

An example of refactoring a jigsaw puzzle game using vue3

Preface It took two days to reconstruct a puzzle ...

13 Most Frequently Asked Vue Modifiers in Interviews

Table of contents 1. lazy 2.trim 3.number 4.stop ...

MySQL database architecture details

Table of contents 1. MySQL Architecture 2. Networ...

Solution to changing the data storage location of the database in MySQL 5.7

As the data stored in the MySQL database graduall...

Join operation in Mysql

Types of joins 1. Inner join: The fields in the t...

Vue-CLI3.x automatically deploys projects to the server

Table of contents Preface 1. Install scp2 2. Conf...

Detailed tutorial on how to create a user in mysql and grant user permissions

Table of contents User Management Create a new us...