Use JS to implement a simple screen recorder | JD Cloud Technical Team

12.23 Yuanchuanghui·Shanghai Station, let’s talk about LLM infrastructure

This article will introduce how to implement a simple screen recorder with JS.

1. Preparation for recording

Create a button

<button id="recording-toggle">Start recording</button>

Writing JavaScript

var RECORDING_ONGOING = false;
var recordingToggle = document.getElementById("recording-toggle"); // 按钮

recordingToggle.addEventListener("click", function(){
     RECORDING_ONGOING = !RECORDING_ONGOING; // 开始 / 停止 录制
     if(RECORDING_ONGOING){
         recordingToggle.innerHTML = "Stop Recording";
         startRecording(); // 开始录制
     } else {
         recordingToggle.innerHTML = "Start Recording";
         stopRecording(); // 停止录制
 }
});

It looks like a lot, but really, it's just adding an event listener to the button to start and stop recording and changing the text accordingly.

2. Start recording

Before writing the function function, declare 3 global variables (outside the function).

var blob, mediaRecorder = null;
var chunks = [];

Now, start screen recording

async function startRecording(){
     var stream = await navigator.mediaDevices.getDisplayMedia(
         {video: {mediaSource: "screen"}, audio: true}
     );

     deviceRecorder = new deviceRecorder(stream, {mimeType: "video/webm"});
}

Create media streams outside the user's screen. The media recorder has a mimeType. This is the type of output file you want.

You can read more about mimeTypes here .

Edge supports video/webmmime type. This is the file extension .webm. You can check if your browser supports mimeType by:

console.log(MediaRecorder.isTypeSupported("video/webm"))
console.log(MediaRecorder.isTypeSupported("video/mp4"))
console.log(MediaRecorder.isTypeSupported("video/mp4;codecs=avc1"))

Add a few lines to the startRecording function

 deviceRecorder.ondataavailable = (e) => {
     if(e.data.size > 0){
         chunks.push(e.data);
     }
 }
 deviceRecorder.onstop = () => {
     chunks = [];
 }
 deviceRecorder.start(250)

Whenever there is data, it is added to the blocks array (defined earlier). When recording is stopped, the stopRecording() function is called.

3. Stop recording

function stopRecording(){
     var filename = window.prompt("File name", "video"); // Ask the file name

     deviceRecorder.stop(); // 停止录制
     blob = new Blob(chunks, {type: "video/webm"})
     chunks = [] // 重置数据块
     var dataDownloadUrl = URL.createObjectURL(blob);

     // 将其下载到用户的设备上
     let a = document.createElement('a')
     a.href = dataDownloadUrl;
     a.download = `${filename}.webm`
     a.click()
 
     URL.revokeObjectURL(dataDownloadUrl)
}

Screen recording with JS is so simple. If you want mp4 or other formats, you have to use the API to convert or do it yourself.

The browser will notify you if the screen is being shared

Author: JD Insurance Zhang Jie

Source: JD Cloud Developer Community Please indicate the source when reprinting

The author of a well-known open source project lost his job due to mania - "Seeking money online" No Star, No Fix 2023 The world's top ten engineering achievements are released: ChatGPT, Hongmeng Operating System, China Space Station and other selected ByteDance were "banned" by OpenAI. Google announces the most popular Chrome extension in 2023 Academician Ni Guangnan: I hope domestic SSD will replace imported HDD to unlock Xiaomi mobile phone BL? First, do a Java programmer interview question. Arm laid off more than 70 Chinese engineers and planned to reorganize its Chinese software business. OpenKylin 2.0 reveals | UKUI 4.10 double diamond design, beautiful and high-quality! Manjaro 23.1 released, codenamed “Vulcan”

{{o.name}}

{{m.name}}