We Keep Coding

How does Disney+ prevent screen recordings of their content?

I tried to take a screenshot of a movie on the Disney+ web app when I realised that the video turns black as soon as I try to take a new screenshot with Snipping Tool. When I tried to do the same thing with OBS and Discord streams, I saw the same effect.
Interestingly, this only works for Chrome on my machine (I also tried Firefox and Edge and they just let me record my screen).
When I saw this, I became really curious on how they achieved this.
Does anyone have any idea how I can recreate this for my own web projects?

I became really curious on how they achieved this.
They use Widevine.
Widevine homepage.
https://ottverse.com/widevine-drm-how-does-it-work/
https://en.wikipedia.org/wiki/Widevine
News reports:
https://www.cordcuttersnews.com/sadly-disney-wont-work-on-chromebooks-linux-some-android-devices-because-of-drm/
https://www.tomsguide.com/news/disney-plus-will-work-on-chromebooks
https://www.androidpolice.com/2019/10/22/disney-will-only-work-on-devices-that-support-the-strictest-widevine-l3-drm/
It's also used by Netflix, Hulu and others.
Widevine is Google's DRM system that's baked-in to Chrome.
All other major browsers have adopted it as well, because no-one will use a browser that can't access Netflix.
Mozilla's and Microsoft's support is less user-hostile and as you noticed.
It's just a standard HTML5 <video> element - when the browser downloads the video stream it will see that it's encrypted with Widevine and that engages the Widevine client-side code which does all the DRM biz.
Though there are HTML and DOM features that facilitate DRM, I'm unsure of the extent that any JavaScript is required to use it - as theoretically everything the browser needs to know to load the DRM system should be embedded in the raw media stream.
On Windows, I understand (though unconfirmed) that Widevine makes use of SetWindowDisplayAffinity to block screenshots.
Nothing stops you from doing this in your own native code (e.g. if you had an Electron fork), but please don't because it's a real dick-move to your users, in addition to not working at all if the user has the DWM disabled (e.g. they're running Windows 7 with Aero disabled).
Has anyone any idea how I can recreate this for my own web projects?
You'll need to license Widevine yourself. This is a complicated process intended only for large media production companies and content rightsholders, not individuals or small businesses.
Anyway, even if you could, please don't. Why would you want to make to harder for users to share and appreciate your media? Just stick it up on YouTube instead.

Video textures in Three.js with Google Cardboard

I want to implement a video texture in Three.js following the method used in this example: http://stemkoski.github.io/Three.js/Video.html . However, I'd also like to use my site with the Google Cardboard Chrome API, as detailed here: https://vr.chromeexperiments.com/ , yet when I test the program on Chrome for Android, I get a 'S3TC textures not supported' error. Is there a way around this error?

It's not an error, it just that S3TC is not supported. It's a file format error - like asking a program that only supports JPG to read an PNG. You need to either convert the video to an accepted format, or perhaps see if there's a way of getting the Chrome API to turn on OpenGL extensions, the one you want is EXT_texture_compression_s3tc - if you can access this then you can read in S3TC files. S3TC is usually targeted on mobile devices - where file size is critical. If it's just for a web browser you might want to investigate useing a more standardized video format - like H.264
You can also looks for a library that supports the formats you want to use and if they can uncode a frame, you can directly pass it to the graphics API.

Javascript Audio Editor

Im trying to develop an javascript based audio editor. It should be possible to record, play and edit an audio file with. Its especially important to visualize the recording audio (realtime) and the selected/uploaded audio file (both of them).
I red alot about the Web-Audio-API and saw a few examples as well, but there are some problems - it only works in chrome/safari so far, it should be run on firefox as well, but it doesnt. So what Im looking for is an crossbrowser API or javascript/jquery libary which provides the called features.
Here are some examples to show u what I mean:
http://plucked.de/ (great tool, but there are many bugs as well)
http://www.stud.fit.vutbr.cz/~xmyler00/audiee/ (as u can see web audio API doesnt work on firefox)

The Web-Audio-API is a fairly new standard and is steadily being adopted by the major browsers with varying levels of support. Currently Chrome and Safari have the best support and Firefox support is in it's draft stage. For the sort of application, with cross browser support, that you're wanting you will need to go to third party plugins/extensions/addons for the support you're after.
Welcome to the bleeding edge. :)

Preloading all assets

Is there a single universal way to load all assets before using them? I am wanting to load some images, audio files, and a few .swf files before my app starts. Currently, I load the images by creating new <img> elements and setting the src to the image path, for the audio files I add the preload="auto" attribute in the <audio> tag and I perform an ajax request to load the .swfs.
Is there any problem (re some browsers not caching etc.) with the way I am currently loading my files and is there a 'best practices' way of collectively preloading all these file types before I display my content?

Yes. Actually, this has been made into a standard. Here is the relevant RFC. A move to standardise this for HTML5 is in works
Most modern browsers support prefetching. Here is a brief summary of how they are used:
Firefox
As per MDN, you can use the <link> tags in head of the document,
<link rel="prefetch" href="/assets/my-preloaded-image.png">
as well as set HTTP Link header with the request, or within the HTML as a meta tag.
Link: </assets/my-preloaded-image.png>; rel=prefetch
<meta http-equiv="Link" content="</assets/my-preloaded-image.png>; rel=prefetch">
enter code here
Not only this, but you can also give navigation hints within the page, such as what will be the next page, etc.
<link rel="next" href="2.html">
IE 11
In Internet Explorer too there is the Prefetch header. You can set like so:
<link rel="prefetch" href="http://example.com/style.css" />
You can even prefetch (pre-resolve) DNS queries
<link rel="dns-prefetch" href="http://example.com/"/>
Or, prerender a web page (a-la Google Instant)
<link rel="prerender" href="http://example.com/nextpage.html" />
Chrome
Chrome also does the same things as Firefox and IE in this regard.
Safari
I have not been able to find solid proof of whether Safari supports these things. But reading up on many sources, I suspect they do, just that probably Apple is not so eager to market Safari as Microsoft is pushing IE11 (just an opinion).
Have fun. :)
Sources:
http://msdn.microsoft.com/en-us/library/ie/dn265039%28v=vs.85%29.aspx
https://developer.mozilla.org/en/docs/Link_prefetching_FAQ
http://davidwalsh.name/html5-prefetch
https://developers.google.com/chrome/whitepapers/prerender
https://docs.google.com/presentation/d/18zlAdKAxnc51y_kj-6sWLmnjl6TLnaru_WH0LJTjP-o/present#slide=id.g120f70e9a_0140
Update: After compiling this answer, I stumbled upon a similar answer on SO, which gives more details on the topic. Please do have a look.
How can I preload a page using HTML5?

Prealoding the assets, is one of the hardest as well as simplest tasks in a FLASH or HTML5 project because we have done FLASH to HTML5 conversion projects.
The easiest kinds of preloaders are static preloaders used to load the movie in which they exist. For these preloaders, all you need to do is stop the movie on a preloader screen, usually the first frame of the movie, and keep it there until you are able to determine that the movie has been completely loaded into the Flash player.
The Preloader also stops any flickering or delay when changing uncached images on a web page since the same image has to be downloaded from the server every time it is needed to be displayed.
We have used jQuery HMTL5 Loader in our web apps(HTML5), you can see the Github Repo here.
This plugin needs a JSON file to get the files that it has to preload, and it can preload images, html5 video and audio sources, script and text files. In addition to this, it has a different type of loaders (circular,line, big counter,etc) and additional features so on.
It is implemented like this.
<script>
var loaderAnimation = $("#html5Loader").LoaderAnimation();
$.html5Loader({getFilesToLoadJSON:'json file',
onUpdate: loaderAnimation.update,
debugMode:false
});
</script>
Its working perfectly in different browsers including Chrome, FireFox, Safari, Opera, etc and in mobile browsers.
Note: We have used this for our HTML5 web applications which runs in different platforms including android and iOS.

You can use a PreloadJS library (it is part of CreateJS suite). It's lightweight, easy to use and quite powerful in terms of configuration. It allows queueing, multiple connections, pausing, etc. It offers access to (progress, complete, etc) events.
If you have some Actionscript experience this tool should be quite straight forward for you.

Try using $(window).load(function(){ /* Use any of your resources */ });.
I tried this and working for me. this. Since this is a plain javascript api, you can also use like window.onload=function(){/* JavaScriptCode */}; I believe.

I been really happy with PxLoader: http://thinkpixellab.com/pxloader/
It's an extremely easy to use, lightweight preloader for use in HTML5 apps. You can download images, audio, or any other file-type. It lets you monitor completed events as well.
It's free to use (MIT license) and forkable on GitHub.
There are some good demos and script samples here: http://thinkpixellab.com/pxloader/#sample1

HTML5 Local Storage of audio element source - is it possible?

I've been experimenting with the audio and local storage features of html5 of late and have run into something that has me stumped.
I'd like to be able to cache or store the source of the audio element locally to enable speedier and offline playback. The problem is I can't see how this is possible with the current implementation.
I have tried the following using WebKit:
Creating a manifest file to set up local caching but the audio file appears not to be a cacheable item maybe due to the way it is stream or something
I have also attempted to use javascript to put an audio object into local storage but the size of the mp3 makes this impossible due to memory issues (i think).
I have tried to use the data uri and base64 to use the html as a audio transport that can be cached but again the filesize makes this prohibitive. Also the audio element does not seem to like this in WebKit (works fine in mozilla)
I have tried several methods of putting the data into the local database store. Again suffering the same issues as the other cases.
I'd love to hear any other ideas anyone may have as to how I could achieve my goal of offline playback using caching/local storage in WebKit.

I've been trying to do this myself, on the iOS (for iPhone / iPad) but it refuses to cache audio files in offline, even if in Cache Manifest.
It does not error, but instead simply pretends to have played the audio element if invoked via JavaScript without a control. If it's embedded with a control, it displays an alternate control that says "Cannot play audio file.". It works fine if the application is able to go online.
It seems not to cache the audio, playing another sound resource seems to cause it to clear the previous resource from memory - this is pretty worthless functionality even when online.
I have experimented with base64 encoding the audio as data URI's. This works in Safari on the desktop (at least for fairly short samples of around 20-30k that I've been using) but seems not to be supported at all on iOS - it silently does nothing, which is highly annoying.
I don't know about other vendors - Google Chrome used to not support data URI's for audio but perhaps they fixed it... - it seems like it's not possible for now though.
Update: Minor discrepancy with iPhone OS 3.x (tested with 3.1.2): If an audio element is specified in an offline web app but it doesn't have a control, it displays a non-interactive control with a non-animated spinner on it (which it definitely shouldn't do). I assume this is fixed in iOS 4.x (which should be out next week).

So it's been a while since I asked this question and I thought i'd give some info about how we solved it. Basically we encoded the data into PNG's using a similar technique to this:
http://audioscene.org/scene-files/yury/pngencoding/sample.html
Then cached the image on the mobile device using html5 local storage and accessed it as needed. The PNG's were pretty big but this worked for us.

I spent a while trying to do this for a game I'm making, and since as far as I could tell browsers (Firefox and Chrome) still don't support caching of audio elements I thought I'd post the solution I found.
There is a workaround described here: http://dougx.net/plunder/index.php#code
I can confirm it works pretty well, but is probably better suited to smaller files. As he describes here (http://dougx.net/plunder/GameSounds.txt), you encode the audio as base64 strings, and give them a data:audio/ogg;base64 (or any compatible audio format) header, which HTML5 audio can then read in. Because this is just a string, the browser will cache it.

I guess it would be preferable to get the manifest approach working, since this feels like the most relevant mechanism for locally caching the file.
What happens if you alter the audio file's HTTP headers, e.g. Content-Type and Expires? Does the browser do something different if the file extension is changed?

I see you've had no luck so far.
You might want to take a look at JAI (JavaScript Audio Interface) ("the world's first javascript interface for web <audio>"). Or get in touch with Alastair MacDonald, who wrote it.
Failing that, the HTML5 Doctor may be able to assist.

Adding video and audio files to local storage works with iOS 4.3.
I just added a video and an audio file to manifest and they both got downloaded to offline storage on iPad.