Screen recording the browser window using javascript

Question

I'm developing an app which is basically a drawing app in which interactive simulations can be embedded.

I'm trying to add the option for recording the screen and audio in the website itself so that teachers can create the lessons online. What is the best way to achieve this? I've searched a lot in the internet and found that recordRTC by Muaz Khan is a very nice choice. But I'm a noobie and I feel like there are too many options in it and I'm not sure which is the best option for me.

I've also read about webRTC. Is it possible to screenrecord using it? I don't mind using chrome extension, provided I should have the option for recording a specific part of the page with it. Please help....

Answer 1

As of May 2018, you can obtain a screen video stream in Firefox using:

let constraints = {
  video: {
    mediaSource: "screen"
  }
};

navigator.mediaDevices.getUserMedia(constraints)
  .then(mediaStream => {
    // do something with mediaStream now
  });

However, this doesn't actually record the screen. You'll need to build a way to do that yourself. One way is to use WebRTC to send the video you obtain to your backend and record it there.

As far as other browsers go:

• Chrome does not support natively obtaining screen media. You'll have to build an extension and ask your users to install it. It's not very hard to do.
• Edge & safari supposedly support it, but I have not tried then.