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?

Hager

try it, mac os v11.4, Sufari, hulu.com – Hager

Does this answer your question? Is there any way to detect a screen capture or recording? – Specious

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) – Cambrian

try it, it knows, I'm in Sufari – Hager

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. – Sarmentum

Udemy does the same! – Selfabasement

Answer 1

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!

Ezequieleziechiele

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.) – Parenthesis

@Parenthesis 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. – Goliath

@Goliath it turns out that it's just HDR misbehaving - on Windows, if you try to use Snipping Tool to capture something, but the screen is in HDR mode, Windows will first reduce the colour depth, which has the effect of washing out anything close to white. So it seems like this happens when a video player window happens to be present, but otherwise, I can capture totally fine. Why it can't just capture the HDR content is anybody's guess (we do have image formats which can deal with storing it!). – Parenthesis

Answer 2

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);
  });

Mannos

Seems like a pretty simple yet clever way to do it. However, I think there is still no way to detect screen recording. – Cambrian

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 – Hager

try it for your self – Hager

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. – Mannos

how would you do that in js? – Hager

So how can netflix website detect if i take a screenshot? – Fluoridate

They possibly use this API grabz.it/api/javascript/events.aspx – Mannos

Keydown event won't fire on pressing prt scr key, at least on my machine. – Interscholastic

@MatteoBianchi Maybe they are using browser's DRM API – Interscholastic