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?

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?

• javascript
• screenshot

• try it, mac os v11.4, Sufari, hulu.com – Brandon Stewart Commented Jun 10, 2021 at 7:22
• Does this answer your question? Is there any way to detect a screen capture or recording? – Simone Rossaini Commented Jun 10, 2021 at 7: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 Commented Jun 10, 2021 at 7:25
• try it, it knows, I'm in Sufari – Brandon Stewart Commented Jun 10, 2021 at 7:27
• 2 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 Commented Nov 1, 2021 at 22:09

2 Answers 2

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!

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