20 lines of JS code to implement screen recording

You may have encountered the need for screen recording during development. Whether it is teaching, demonstration or game recording, you need to record and share content through screen recording. Generally, H5 pages in apps are mostly implemented based on client capabilities, and now browsers MediaRecorderalso provide this capability. MediaRecorderIt is a powerful technology that can implement screen recording function on the browser side. This article will introduce how to use JS MediaRecorderto implement screen recording.

Code

To implement screen recording, we need to navigator.mediaDevices.getDisplayMedia()obtain the screen media stream through the method. This method will pop up a selection window to allow the user to select the screen or window to be recorded. However, for security reasons, when initiating recording, you must ensure that the user gesture triggers the capture, such as clicking a button:

const button = document . createElement ( "button" );
button. innerHTML = "capture" ;
 document . body . append (button);
button. addEventListener ( "click" , async () => {
   // TODO 
});

After clicking, the video stream is obtained and recorded. After obtaining the media stream, we can pass it to MediaRecorderthe object and start screen recording.

const stream = await navigator. mediaDevices . getDisplayMedia ();
 const recoder = new  MediaRecorder (stream);
recorder.start ( );

Stop recording when the user stops sharing their screen. Call recoder.stop()to stop recording.

const  = stream.getVideoTracks ( );
video. addEventListener ( "ended" , () => {
  recorder.stop ( );
});

recoderThe monitored dataavailableevent obtains the recorded file and URL.createObjectURL()converts it into a downloadable URL through the method for users to download the recorded video file.

recorder. addEventListener ( "dataavailable" , ( evt ) => {
   const a = document . createElement ( "a" );
  a. href = URL . createObjectURL (evt. data );
  a.download = "capture.webm " ;
  a. click ();
});

Such a simple screen recorder is completed, and the entire core function of screen recording is implemented in less than 20 lines of code. The complete code is as follows:

button. addEventListener ( "click" , async () => {
   const stream = await navigator. mediaDevices . getDisplayMedia ();
   const recoder = new  MediaRecorder (stream);
  recorder.start ( );

  const  = stream.getVideoTracks ( );
  video. addEventListener ( "ended" , () => {
    recorder.stop ( );
  });

  recorder. addEventListener ( "dataavailable" , ( evt ) => {
     const a = document . createElement ( "a" );
    a. href = URL . createObjectURL (evt. data );
    a.download = "capture.webm " ;
    a. click ();
  });
});

Browser compatible

Current browser support, lower versions need to be upgraded before they can be used.

It is indeed a good feeling to realize such a powerful function with so little code, but this is just a simple recording function. There are relatively many factors to be considered in actual development. Since screen recording may consume more resources, When recording for a long time, we should prompt the user about the recording time or size limit and provide corresponding operations and feedback.

Using MediaRecorderWe can easily implement the screen recording function. This function is very useful in teaching, demonstration and other scenarios, and also provides developers with more creative possibilities. Those who are interested can experience using it to see the effect. In actual use, this function should also be used reasonably to ensure user privacy and data security.

refer to

https://dev.to/ninofiliu/simple-screen-recorder-in-20-lines-of-javascript-4ina

By JavaScript