How can you prevent screen captures on the web? [2020] - javascript

BEFORE YOU TRY AND MARK THIS AS A REPEATED QUESTION
I know this is possible, and all of the other questions are old. Here's why this question is different:
Netflix has been able to do this. Try streaming Netflix, turn subtitles on, and you can see that if you try and take a screenshot, the subtitle will appear, but the video will not.
Try this again with OBS. When you use a desktop/window capture, you can see the video from Netflix playing in the browser, but at the SAME time, OBS can't pick it up.
This Wordpress plugin (which I haven't tried out personally, so not sure if it works, but the reviews are promising)
So now that I've assured you this isn't a question with the context of 2014, are there any new ways to be able to avoid screen capture on the web? I've assumed that it's impossible for a while, but it looks like there might be an API for it somewhere, and no one hasn't asked this question in years here. It'd be useful for preventing capture in my own JS websites, so I was just wondering how I could implement this myself. Thanks.

Your initial assumption is correct, it's impossible. The Netflix example is different, because it isn't preventing a screenshot of the webpage (which is why the subtitles still get captured) but of the video stream, which is embedded in the webpage, but not actually a part of it. The video isn't captured in your example because it's protected by Encrypted Media Extensions. This also means, though, that the video isn't playable in just any browser, it's only accessible in browsers that support EME.
So, the answer to "how do you prevent screen captures on the web" is "convince every browser manufacturer to include features in their browser that allow you to control screen capturing, and then only make your website available to browsers that support that feature" (which is essentially what Netflix did for video).

You could try playing a transparent DRM-protected video on top of your content (and forward any user event to the element below it). When the user takes a screenshot, the video should produce a solid overlay on top of your actual content.

Related

Facebook embedded video not playing on click

I'm facing problem with facebook video embedded on my post. My client wanted me to follow this method: https://medium.com/#BenBillups/facebook-video-embeds-that-actually-work-57037f8cdcf3
I've done all of the part except PHP code because that wasn't required by my client. Now what is happening. When page loads a play button appear to start video. On click it work just fine. It plays the video but only on desktops. The click event triggers on mobiles and tablets. But it doesn't start the video.
Please take a look at https://candylish.com/mix-and-match-swirl-cookies/ and also check in mobile. You'll see the difference.
In short, you've to click twice in mobile to start video.
Please help me sort this out.
Thanks :)
I think you are simply dealing with mobile browser's general reluctance to start playing video, when they can't determine it was directly connected to a user interaction (and therefor likely willingly triggered by the user.)
//Autoplay
FB.Event.subscribe('xfbml.ready', function(msg) {
if (msg.type === 'video') {
msg.instance.play();
}
});
This code waits for one of the SDK's events to fire and then tries to call the play method, introducing exactly the kind of asynchronism/detachment that gets this blocked, because techniques like that are often used in a malicious way.
In short, you've to click twice in mobile to start video.
That second click is "a whole different animal" altogether ... it happens on the native play button of the (now) embedded social plugin. The other script is not involved at all any more at this point, and this click is a direct user interaction that triggers the video to play, so it is allowed to work. This isn't nested into anything asynchronous or callbacks, it is straight up click => trigger play.
I don't think you will find any example using this technique where this will work differently.
Mobile browsers are more gracious when it comes to autoplay-on-page-load(!) videos, if those videos do not contain an audio track or are embedded to be muted by default. I don't think Facebook offers the latter as an option for mobile to begin with (the data-autoplay attribute does that for desktop, but is documented to not work on mobile) - so at most you could try with a Facebook video that is silent to begin with; but apart from that I'm not sure this restriction resp. when it actually gets lifted even applies here, it's probably not going to fulfill your client's requirement either.
I started typing this as a comment, but besides that it has gotten a little longer now, in this case I think it can't be done actually simply is the answer, even if it might not be a satisfying one.

html5 <video> tag; click anywhere js works everywhere but firefox

Firefox seems to add it’s own ‘click anywhere to play’ behavior, it dims the poster and adds a play button. It works great, but the problem is that no other browsers seem to add that behavior automatically. So, I’ve had to implement a javascript workaround to allow ‘click anywhere to play’ in other browsers. They work great, but now it’s broken in firefox. The way it behaves, it seems like the javascript I put in there is getting a click and making it play, but then ff’s own ‘click anywhere to play’ catches the click too, and pauses it immediately. I can inch along the entire video, 1 or 2 seconds at a time, if keep clicking. As for the specific js workarounds that I've tried, many of the examples from these two threads:
How can I add click-to-play to my HTML5 videos without interfering with native controls?
and
Click the poster image the HTML5 video plays?
I was really hoping for a <video> attribute like click-anywhere="yes", but I think I'm out of luck there. Or, as a solution to my problem, something like the css: moz-click-anywhere:false; to allow the js to handle clicks exclusively.
The only solution I can think of is the browser detection route, but I’m hoping there’s a more elegant solution. If not, so be it, but it was worth asking.

Detect if the UIWebView can play video inline on iPhone ( allowsInlineMediaPlayback )

I am trying to tell if my video is going to play inline once the user starts the video (as apposed to fullscreen/in the native video player) on an iPhone in a UIWebView before the video has started. I have no way of knowing if the UIWebView has the setting allowsInlineMediaPlayback = YES as i do not know in what app or on what page my video is being displayed.
My goal is to only show the video if it can be played inline.
Is there any way to read the allowsInlineMediaPlayback setting from javascript, or detect if my video will play inline or not?
Everything I have read on the apple developers website seems to suggest that it will automatically play in full screen mode in safari. Now if they are using another app, as far as I know you do not have access to that apps UIWebViews properties. However, in an attempt to not be totally useless, here is a link to all of the methods you can query and you might find some useful information in there.
https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/HTMLMediaElementClassReference/HTMLMediaElement/HTMLMediaElement.html#//apple_ref/doc/uid/TP40009355-CH18-SW27
Some more information that may be useful to you.
https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW1

Single Webpage which you can't close. Only full-screen and play video

So I'm doing webpages for artists for an exhibition coming up. These have been completed but now they've also asked that each of their pieces will have a laptop in front of them.
On the laptop will be a single webpage which has a video on it that contains information about their piece...easy enough.
However they also want that laptop to pretty much be completely unusable apart from display that page.
The "User" will only be able to:
Un/Full-screen the video.
Un/Full-Screen the browser window.
Play/Pause the video.
If the user tries to navigate to another site = redirects to that webpage.
The window cannot be closed either.
Any advice? I assume this can't be done with pure PHP/CSS/jQuery/HTML?
You can try using Chrome's kiosk mode - instructions for enabling here: http://lifehacker.com/use-chromes-kiosk-mode-to-limit-someones-access-to-yo-1243433249
Somebody asked how he could show a website in a desktop application some time ago. I posted the sourcecode as an answer here
Also I found this which seems like it could help you.

Increase (youtube flash) video's sound volume by means of JavaScript

Background story: many users (including me) browse the web from notebooks that are not constructed for sound performance. That means (besides other things) that the sound volume for most videos is too low, especially if the video itself is recorded at low volume.
Therefore...
I was wondering if there is any way of increasing the volume of such a video (especially Youtube, but could be extended to other types), because I'm interested in doing it and even publishing it as Firefox/Chrome/other browser plug-in.
Or, alternatively, if you know such a plug-in do not hesitate to post the link here.
If you want to control system volume then JavaScript has no direct access to it, you would need to write NPAPI (C++ dll) plugin.
If you want to just adjust video player's own volume (you won't be able to increase it beyond 100%) then JavaScript can do it, perhaps.
If video player is HTML5 <video> tag then controlling volume is easy. For YouTube it would be:
document.getElementsByClassName("video-stream")[0].volume = 0.5; //50%
If it is a custom made flash player then you need to rely on its JavaScript interface, if any. Youtube player happens to support controlling volume with JavaScript:
document.getElementById("movie_player").setVolume(50);
In order for this to work you would need to break out of extension sandbox first by injecting <script> tag on the page with this code.
There is no universal solution, you would need to deal with each site individually.
Use VLC Media Player. You can copy and paste links into it. Increase sound to up to 250%
You can use js-ctypes to change system's volume level. Here is an example that sets volume to 12.5%:
Components.utils.import("resource://gre/modules/ctypes.jsm");
var lib = ctypes.open("winmm.dll");
var waveOutSetVolume = lib.declare("waveOutSetVolume", ctypes.default_abi,
ctypes.uint32_t,
ctypes.int32_t, ctypes.uint32_t);
waveOutSetVolume(-1, 0x20002000);
lib.close();
However, this only changes the volume for the Firefox process. It won't have any effect on Flash because it runs in a different process now. I'm not even sure whether winmm has some way to change the global volume at all, you might need the new MMDevice API for that - and then it gets complicated because doing COM calls via js-ctypes IMHO isn't possible. Only option is creating your own library to be distributed along with your extension. That should do the COM messaging and export a plain API that can be called via js-ctypes.
You can use Sound Booster software by Letasoft, but there are some things you might encounter like crash, we are using netbooks so the built-in sound card has limit. So try to buff first before playing that's the best advice that I can give. The max volume output will be 500%.
I found this
javascript:((v,a=new AudioContext(),g=a.createGain())=>(window._g??(c=>(a.createMediaElementSource(document.querySelector('video'))[c](g),g[c](a.destination),window._g=g))("connect")).gain.value=v??1)(parseFloat(prompt("Enter gain level",window._g?.gain.value)));
If you are using Chrome, then you can:
Right-click and choose Inspect. Or simply press F12.
Go to Console.
Paste this code.
Press Enter.
A message will appear, type what level you want (0.5 - 1 - 2 - 3 - ...), and press Enter.
For more about AudioContext.createGain(): Go Here

Categories