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

N ways to vertically center a div with single/multi-line text (unknown height/fixed height)

When talking about this issue, some people may ask...

Summary of 7 types of logs in MySQL

There are the following log files in MySQL: 1: re...

Detailed explanation of the use of stat function and stat command in Linux

stat function and stat command Explanation of [in...

How to connect Xshell5 to Linux in a virtual machine and how to solve the failure

I installed a virtual machine a long time ago, an...

Windows platform configuration 5.7 version + MySQL database service

Includes the process of initializing the root use...

mysql charset=utf8 do you really understand what it means

1. Let's look at a table creation statement f...

JavaScript+HTML to implement student information management system

Table of contents 1. Introduction 2. Rendering 3....

JavaScript basics for loop and array

Table of contents Loop - for Basic use of for loo...

Some common properties of CSS

CSS background: background:#00ffee; //Set the back...

Summary of several common ways to abbreviate javascript code

Table of contents Preface Arrow Functions Master ...

Vue uses the video tag to implement video playback

This article shares the specific code of Vue usin...

Online web tools and applications that web developers and designers cannot do without

You may remember that in the past articles we hav...

Steps to use ORM to add data in MySQL

【Foreword】 If you want to use ORM to operate data...

Vue realizes web online chat function

This article example shares the specific code of ...

Docker starts Redis and sets the password

Redis uses the apline (Alps) image of Redis versi...