Home > Mobile >  javascript - prevent screenshot of webpage's regions
javascript - prevent screenshot of webpage's regions

Time:11-10

I have noticed some web pages have somehow implemented a feature to prevent a screen capture of some regions of that web pages. By taking a screenshot of that webpage, instead of some regions that I can normally see live in a browser (Chrome), on a screenshot I can only see a black frame. Firefox doesn't seem to have this "feature" - screenshots are taken normally without black frames.

Example of such site is Netflix. It's not possible to take a screenshot (by "print screen" key on keyboard) of the running movie from Chrome (last update) on a desktop PC running Windows 11. The video controls (play/pause, video position bar ...) are visible, but the video itself is not (black frame).

What kind of javascript functionality/API is capable of this?

CodePudding user response:

Limiting screen capture is called "Digital Right Management" from a vendor's perspective. From a user's perspective it's more like "Enduser Device Control".

It's scope of the Video Playback Pipeline, not JavaScript. JavaScript only facilitates key exchange so that you can decrypt the video locally. Depending on properties that can be ascertained to the video provider about your system, the quality of the video can be limited. Browsers will mostly only receive SD quality. Here's a JS snippet to enumerate the supported CDMs of your browser.

Regarding screenshot prevention: If it's not built into the OS, it will be a custom implementation like here(code) that will not prevent all possibilities to take a screenshots, e.g. using a 3rd party program. For Chrome it is said to be tangled to hardware acceleration, turn that off and screenshots are possible.

Though nothing can guard content against recording in the analog hole, though at least to prevent distribution of such recordings video providers add watermarks on a per user basis.

If you want to go the DRM route, see here for a simple scheme to setup yourself or contact one of the authorized Widevine partners to go for the L1 hardware level.


For further reading, DRM on Android is well documented and has some diagrams:

  • Related