DEV Community

Screen Recording in 10 lines of Vanilla JS

Sebastian Stamm on March 08, 2020

Let’s have a look at how we can capture and record your users screen. Not just your page, but also other tabs of the users browser, the desktop and...

Read full post

wimdenherder • Jan 28 '23

You can also let the user download the result with:

recorder.onstop = e => {
  const completeBlob = new Blob(chunks, { type: chunks[0].type });
  const downloadLink = document.createElement("a");
  downloadLink.href = URL.createObjectURL(completeBlob);
  downloadLink.download = "screen-recording.webm";
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
};

you can set a timeout of 3 seconds for example:

setTimeout(() => recorder.stop(), 3000);

🦄N B🛡 • Mar 13 '20 • Edited

// , Whoa. If your 10 lines of Javascript could record my face right now, it'd look like I've seen a ghost.

I will definitely use this for evil.

The potential for bug reporting, at the very least, is huge.

This is going out to anyone who works on frontend stuff in our company and affiliates.

Sebastian Stamm • Mar 15 '20

Well, recording your face with these 10 lines is also possible, just replace the getDisplayMedia call with getUserMedia({video: true})

The initial work at my company that lead to this article was also related to bug recording. Together with some event listeners that capture all keyboard and mouse interactions you can build quite powerful tools. Still, for screen and webcam recordings you need active user consent, which makes it harder to abuse.

Nicolas Terol • Aug 28 '20

This is great !
But the method getDisplayMedia can fail. You can see this by wrapping the async call in a try catch bloc and catching the error.
And that's a good thing, it's pretty obvious why this method should be protected. I don't know about Windows, but under Mac you must give it access to your browser from the system and not only the browser. Besides, this method cannot be called programmatically :
Only the user can call it from an html button.

Still a great article ! It's a fantastic tool to play with.

Prosper90 • Aug 31 '20

Hello,
I am looking for a way to record an svg animation in a div assign it to a blob and set a video src to the blob's url then download this animation as an mp4 format.
Do you think this could work and if so how do I approach it
Thanks

human being • Mar 1 '21

Hello! This is really awesome and I never thought it is that easy. All thanks to you. I am also looking for a way to save the recorded gif to local folder. Could you please guide me here on how to achieve this? Thanks in advance!

Scott Neufeld • Oct 18 '21

Hi Sebastian -

I'm getting this error in latest Chrome build, what security settings do I need to change?

"Failed to execute 'getDisplayMedia' on 'MediaDevices': Access to the feature "display-capture" is disallowed by permission policy."

Also -- looking to implement this server-side with headless Chrome, any thoughts on this and whether I'll be able to include sound?

Thanks!

Dr. Jeran Ott • Jul 24 '20

Sebastian, Is there a way to also record the audio from the microphone?

Sebastian Stamm • Jul 29 '20

Sure! Instead of calling getDisplayMedia you would need to call getUserMedia, like this:

const stream = await navigator.mediaDevices.getUserMedia({
  audio: true
});

You can then plug this stream into the MediaRecorder like described in the post.

Joe Young • Feb 10 '21

Is it possible to record the internal audio (not the microphone, but the sound on the screen)?

jtn1490 • Jun 23 '20

Hey - great tutorial! Quick question - is it possible to select just a portion of the screen to record?

Sebastian Stamm • Jun 23 '20

Depending on the browser, you can select to record the whole screen, just a single application window, or a specific tab. If you need an even more specific portion - e.g. only a section of a specific tab - you could do that in post-processing:

Record the whole tab (or window or screen) and then modify the resulting video so that only the desired portion remains. This "modify the resulting video" is probably quite complicated though. If you find a nice Javascript library for video editing, please let me know!

Prashant Shahi • Feb 10 '21

any luck finding the solution to record just a portion of the screen?

jtn1490 • Jun 23 '20

Gotcha, thanks!

jhonatan • Jun 13 '20

Very nice hehe.. Is there a way I can record the window and stream it in real time?

Sebastian Stamm • Jun 19 '20

Sure! Instead of pushing the data into an array in the ondataavailable handler, you could also send it to a server or connected peers. For real-time, you probably want to specify the timeslice argument when starting the recording, like recorder.start(100); to make sure you data handler is called periodically instead of at the end

sanidhyajain1 • Aug 17 '20

but how do you pass it to the server ?
in the form of a blob or something else?
cause i wanted to emit it using socket.io

sanidhyajain1 • Aug 17 '20

pls write a post on using this for live streaming with socket.io

Alaa Sadik • Jan 28 '21 • Edited

Sebastian, great work, but I would be very grateful if you give post the portion of JS/PHP code to upload the video (.mkv) to my server.

neel004 • Oct 11 '20

how can we implement live stream to server from client using this same.

Maneesh Rao • May 7 '21

Nice document. How can we save the audio recording with screen recording both?

pranavps020 • Mar 8 '22

getDisplayMedia won't work on android/ios, is there any work around?

Sachin Kammar • May 15 '20

Is there a way to record a tab/window/specific site without user permissions?

Sebastian Stamm • Jun 11 '20

Not in a video stream. The closest thing you could do is periodically get a snapshot of the current DOM with something like document.body.innerHTML and send it to your server. You could then reconstruct the site based on this HTML.

If you want mouse cursor positions too, you would need a global mousemove handler that tracks the cursor position and also send it to your server.

Of course this only works on your own page. Recording another tab or even window this way without the users consent is fortunately not possible :)

Shibu N • Nov 4 '21

Video quality is too low. How to improve?