How do you detect a screen shot with js

Question

Not sure how they do it but hulu has found a way to detect if a screenshot is taken or if the screen-record is on, and sets the video background to black. I'm on for mac os. It is all front end that I can tell, but how do they do it?

Does this answer your question? [Is there any way to detect a screen capture or recording?](https://stackoverflow.com/questions/35163909/is-there-any-way-to-detect-a-screen-capture-or-recording) — Simone Rossaini, Jun 10 '21 at 07:23
I don't think it is possible to detect screenshot on a browser (Assuming you are using a browser in the image). It is possible to do it on a standalone app (discord can detect running games). However I think they instead are detecting if the page moved out of focus which can be done. EDIT: On a standalone app it is possible to detect a screenshot utility if it is running (probably need to give the app permission to do so) — Anish Sharma, Jun 10 '21 at 07:25
Funny enough, I actually was poking around the web because I also was perplexed on how Hulu could be keying off of something like this. It turns out that the screen does not get blacked out if you disable the "Use hardware acceleration when available" setting in Chrome. This may suggest that Hulu itself is not deliberately blocking the screenshot; its just getting blocked due to a technical limitation somewhere else in the chain. It could also just mean that Hulu can't block it when HW accel is turned off. — Ben Atlas, Nov 01 '21 at 22:09

Cohen · Answer 1 · 2021-06-10T07:51:16.550

4

Possible duplicate of How to detect "on Screenshot" with Javascript

However from this source, an answer states "Currently, there is no way to handle a screenshot event through JavaScript. The screenshot functionality of phones simply has no connection to the browser."

As for a PC device, you can capture all possible keyboard comibinations to trigger a screenshot. For example, most windows computers use WIN + prt scr, Mac uses Shift + Command + 3

Aftermost, there are many other possibilities to "attempt" a prevention of screenshots, however, you are risking false results in which some browsers or specific actions could trigger.

EDIT: Detecting a screenshot using the clipboard:

Using JavaScript's native Clipboard API, you can get the last copied item from the clipboard as what is seems to state. Only possible issue is, it prompts the user asking permission to access clipboard data.

navigator.clipboard.readText can read the previously copied content. Here is a simple way I found to detect this. Reference:

https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API

navigator.clipboard.readText()
  .then(text => {
    console.log('Pasted content: ', text);
  })
  .catch(err => {
    console.error('Failed to read clipboard contents: ', err);
  });

edited Jun 10 '21 at 07:51

answered Jun 10 '21 at 07:26

Cohen

2,375
3
16
35

Seems like a pretty simple yet clever way to do it. However, I think there is still no way to detect screen recording. – Anish Sharma Jun 10 '21 at 07:30
No, because it can tell if screen record, or screen share from hangouts or slack is running go black even if the internet is off then go back to playing when it is off – Brandon Stewart Jun 10 '21 at 07:32
try it for your self – Brandon Stewart Jun 10 '21 at 07:33
2

As for detecting a screenshot, you can possibly try monitoring the clipboard and detect the foreground application running. You can also recognize the activity of the snipping tool, as this pastes the image to your clipboard. – Cohen Jun 10 '21 at 07:35
how would you do that in js? – Brandon Stewart Jun 10 '21 at 07:39
So how can netflix website detect if i take a screenshot? – Matteo Bianchi Jul 17 '21 at 17:35
They possibly use this API https://grabz.it/api/javascript/events.aspx – Cohen Jul 18 '21 at 01:02
Keydown event won't fire on pressing `prt scr` key, at least on my machine. – Max Sep 06 '21 at 08:11
1

@MatteoBianchi Maybe they are using browser's DRM API – Max Sep 06 '21 at 08:13

score 3 · Answer 2 · answered Aug 31 '22 at 01:41

3

I believe the way that most commercial video sites like Hulu and Netflix achieve this is by using DRM (Digital Rights Management) to protect video content that lives on their servers.

I did a bit of research, and I found that DRM is a special kind of encryption that only allows video playback when certain conditions are met (i.e. the user is logged in and paying for a subscription). There's a really good article from Solid Digital that describes this technology in depth and has a working demo that you can find here.

The demo didn't work in Safari for me but it works perfectly in Chrome, and when I tried to screen record it the player went blank just like Netflix.

I had the same question and this was a good answer for me so I hope this helps!

answered Aug 31 '22 at 01:41

Matt K

104
3

I've encountered a web site which is doing this for its payment screen. I tried to take a screenshot to show the site owners a bug I'm encountering, but as soon as Snipping Tool comes up, most of the UI turns white, making it impossible to take a useful screenshot. If it's really DRM being used to do this, I guess it's another reason to hate DRM. (Just in case I didn't have enough reasons already.) – Hakanai May 29 '23 at 17:52
@Hakanai sounds like a fraud prevention measure that is doing a good job :-) A screenshot of the UI is usually not what the devs need anyway. Better to send the console output and network activity. – enf0rcer Aug 21 '23 at 12:25

How do you detect a screen shot with js

2 Answers2

Linked