how to prevent screen recording on a website in a web browser?

Question

I am making an educational website for one of my clients and he demanded to implement a function that can prevent users to record the screen on the website because the website would have paid content and some Vimeo videos so he doesn't want to allow someone to steal his videos by doing screen record. I know this can be done for android or IOS apps. being a react developer I can also implement this for android apps using expo. but the client wants to do it for a website on a web browser. I've spent 4 hours, searching on the web, still am blanked because I didn't get a single solution. can you please tell me how can I make it or even if it's possible or not?

Supervisory

I can record the screen of my computer using a camera. How are you going to prevent me from doing that, or even know that I'm doing it? – Soutane

The only way I know is possible (but personally don't know how to do) is how Neflix, Disney+, etc. use some kind of WebGL 3d video element that just shows as a black screen if you try to record. However, this can easily be bypassed with an HDMI capture card. There is no way that I know of that makes it impossible to record (someone can always use a video camera anyways) – Lothario

uula.com/courses/71/arabic/lessons/3587/videos/18194 now look at this website guys It has that feature. how they made it? – Supervisory

Answer 1

These answers are kind of wrong. They use technology called DRM (Digital Rights Management).

What is a DRM player

DRM (Digital Rights Management) players are media players that implement DRM technologies to protect digital content such as videos, music, and eBooks from unauthorized access, copying, or distribution. DRM typically involves encrypting the content and restricting access to the decryption key, which is only available to authorized users.

When it comes to preventing screen capturing, DRM players often use a combination of encryption and watermarking techniques. The video is encrypted, and the player decrypts it on the fly for playback. However, the decryption process is usually done in a protected environment, which makes it difficult for screen recording software to capture the decrypted content. The player also adds an invisible watermark to the video frames, which identifies the viewer who is watching the video. When a screen recording is attempted, the player can detect the watermark in the captured frames and display a black screen or other obfuscation method to prevent the video from being recorded.

This technique works because screen recording software captures whatever is displayed on the screen, regardless of whether it is encrypted or not. However, if the screen recording software cannot access the decrypted content, it will only capture the black screen or obfuscation method, which makes the recorded video useless.

Now here is the w3c paper on how this work under the hood. https://w3c.github.io/encrypted-media/

if you want to understand it in a simpler way, try this web.dev post. https://web.dev/eme-basics/

I cannot clearly explain how this procedure works in one simple answer, because there are lots of things to understand. Hope you get some information from my answer.

Abominate

Answer 2

Unfortunately, this doesn't appear to be possible. Currently, there is no way for a browser to understand if someone is recording the screen.

It would be quite a security risk if a browser were able to identify something as simple as a screen recorder. It would imply that a browser has far higher level permissions than it should have.

You should convey this to your client. Sometimes clients simply don't understand the technology.

Gunstock

agree, even netflix cant achieve this – Way

uula.com/courses/71/arabic/lessons/3587/videos/18194 now look at this website guys It has that feature. how they made it? – Supervisory

I'm sorry, but what do you mean? I can record this website just fine. It is not feasible to prevent screen recordings. As other commenters have mentioned, users can simply just get their phone out and take a video... or they can record on their desktop. You are wasting your time with this, and you should say that to your client. – Gunstock

@DanishBukhari You wasted my time. I test recording, it does work. Don't overthink it man. – Niel

I have tried recording that web site on Win10 with XBox recorder (press Win+Alt+R) and although it recorded the whole screen, the contents of the video box was black. Inspecting the elements I see that there's a <div> wrapper with class drmVideoContainer, so there's something (this doesn't mean it can not be recorded with other recorder apps that I haven't tried). Also a Netflix movie didn't get recorded. Probably there are partial solutions that work with specific recorders, not sure if XBox recorder may be following some directives to not include video or if it is enforced by some strategy – Freudberg

Answer 3

Some people are doing it by detecting specific extension/ shortcut keys, stealing focus/ pausing video when focus out, etc. Some people follow some stealth way (finding software bugs). Also, some screen recorders may respect some meta/declaration. In this way, you may be able to prevent some common screen recorders but not all of them.

Nembutal