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?

Answer 1

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/

And 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.

The EME topic is complex, as you can see from the following general diagram.

---

_{[Credit: From reference above]}

---

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.