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.
Related
I am making an educational website for one of my clients and he demanded to implement a function that can prevent users to record the screen on the website because the website would have paid content and some Vimeo videos so he doesn't want to allow someone to steal his videos by doing screen record. I know this can be done for android or IOS apps. being a react developer I can also implement this for android apps using expo. but the client wants to do it for a website on a web browser. I've spent 4 hours, searching on the web, still am blanked because I didn't get a single solution.
can you please tell me how can I make it or even if it's possible or not?
Unfortunately, this doesn't appear to be possible. Currently, there is no way for a browser to understand if someone is recording the screen.
It would be quite a security risk if a browser were able to identify something as simple as a screen recorder. It would imply that a browser has far higher level permissions than it should have.
You should convey this to your client. Sometimes clients simply don't understand the technology.
Some people are doing it by detecting specific extension/ shortcut keys, stealing focus/ pausing video when focus out, etc. Some people follow some stealth way (finding software bugs). Also, some screen recorders may respect some meta/declaration. In this way, you may be able to prevent some common screen recorders but not all of them.
all.
My team has been toying with the idea of developing an iOS app using Cordova, and recently, we've been looking into offloading as much of the main JavaScript as possible to our server, in an attempt to speed up fixing critical bugs.
The idea would be to have:
the native app containing all HTML, CSS, plugins and Cordova files
the main JavaScript added to the pages as external scripts from a server
a device-ready function for each page that will set up and start the main JavaScript once it's available
I have seen comments that Apple could be trusting of code that runs in a webview, but it does seem like projects like this could be a security issue.
I am aware of other questions and the like that touch on this, but I feel that the context was always different.
Thanks!
A year ago apple changed the iOS Developer Program Agreement to allow download of code, see the Section 3.3.2
3.3.2 An Application may not download or install executable code. Interpreted code may only be used in an Application if all scripts,
code and interpreters are packaged in the Application and not
downloaded. The only exception to the foregoing is scripts and code
downloaded and run by Apple's built-in WebKit framework, provided that
such scripts and code do not change the primary purpose of the
Application by providing features or functionality that are
inconsistent with the intended and advertised purpose of the
Application as submitted to the App Store.
So, as you are using cordova, and cordova uses WebKit framework, if you don't change the main purpose of the Application, you won't be rejected
The answer is it depends on how you use the system. The technical ding that hits most people is Apple iTunes Guidelines - 2.12
Apps that are not very useful, unique, are simply web sites bundled as Apps, or do not provide any lasting entertainment value may be rejected
It seems clear to me, but as a volunteer on the "official" phonegap forum, I'm often very blunt with people on this point. Nothing worst than months of work for nothings
On the Javascript idea, loading the javascript file from the web is not good practice. If your app ever loses the network, your app will be non-responsive. One app that I can name, that was growing by leaps and bounds, that has this problem is Word with Friends. I play and I can see the stall every time.
Make sure you App is always responsive and if not, give a short reasonable explanation. LIKE,"Opps, we can't find the Internet."
I have seen comments that Apple could be trusting of code that runs in a webview, but it does seem like projects like this could be a security issue.
Yes, Apple trust code that runs in webview, because it is not a browser. However, that does not make it secure. We have plenty of security issues and bugs. A recent security issues allows rogue code to insert weblinks into webview, and thereby allow the App to be used as an attack vector. Another recent security issue will launch rogue code from and mp3 file! And this bugs goes back to Android 2.0.
The cure is worst than the problem. It's a huge whitelist protocol that is confusing because of the bad documentation. Luckily, I should have a blog post in a few days; other people are working on blog posts too. my raw notes are online or read the current issues especially #10.
I am aware of other questions and the like that touch on this, but I feel that the context was always different.
Feel free to read my notes. The one i give to people all the time is:
Top Mistakes by Developers new to Cordova/Phonegap
But the root has more notes
Best of Luck.
I've discovered a pretty cool function on Opera which is fetching data on website, it shows lower resolution images and things like that and page loads fast. This is great for slow connections.
I'm interested in the background of this little function, with my basic knowledge of CSS, HTML and Javascript I don't understand how this can be done. Can anyone explain how does it work?
I mean let's say for images, it needs to download the image first and then convert it to lower resolution one so where do we "win" time here? Image is still being downloaded right?
Sad to say it's non-trivial for you to achieve what you are trying to do. If you take a look at Opera Turbo
How we squeeze out all that speed
When Opera Turbo is enabled, webpages are compressed via Opera's servers so that they use much less data than the originals. This means that there is less to download, so you can see your webpages more quickly.
Enabling Opera Turbo is as simple as clicking the Opera Turbo icon at the bottom-left of the Opera browser window. When you are on a fast connection again and Opera Turbo is not needed, the Opera browser will automatically disable it.
Your best bet is to follow up on How do I check connection type (WiFi/LAN/WWAN) using HTML5/JavaScript?, depending on their connection type, load your images accordingly, but be aware that, a connection type cannot accurately let you determine their network speed. A device can be on 3G or LTE but still getting crappy speeds from their provider.
If you really want to implement this feature and be safe to work across browsers & devices, i can suggest putting lazyload plugins like Unveil that will help with the amount of data on load. OR include a button within your page that allow the user to select a low bandwidth option, something like what gmail does
Turbo mode is really great feature of Opera.
In short, it downloads complete code and images to Opera servers and then send them to user. Turbo mode is big traffic-saver (up to 80%). Opera then decompresses data on-the-fly, while answering user's request. Well, images in Turbo mode are almost useless but still, this mode basically comes handy when you use extremely slow internet-speed.
You can check out official documentation to find more info. Also, check out my old post where I wrote about Turbo mode. There you can find more info and useful links about this topic.
Additionally, look at info on opera-turbo tag here, on StackOverflow.
To preface this, all of my experience has been with developing Ruby on Rails web apps serving, essentially, text data - I don't have any experience yet with rich media.
I'm looking into developing a music notation app (for practice and because I'm dissatisfied with many of the current options), and am trying to determine whether or not to build a native app or a web app. Since all of my programming experience lies in web development, I would prefer to make this a web app if I can, because if I chose to go native I would need to find a decent cross-platform solution in addition to the usual pitfalls of developing natively.
I suspect that even with HTML5 I wouldn't have access to enough processing power to make a browser-based audio engine feasible. It would need to have the ability to play and sequence not a single large .wav file of a song, but many short .wav files concurrently and in sequence. There would be no need for recording - only playback.
But since I've never done this before I really don't know if this is possible. So, I wanted to pose this to more experienced HTML5 media developers:
For modern browsers (I'm not too concerned with support for older browsers), would such an audio engine be feasible? (As in, is the current landscape of JS libraries and the HTML5 audio API sufficient for building something like this?) Or would something like this be far too CPU / memory hungry in a browser?
Thanks!
In my experience Chrome and Firefox for desktop both work great with multiple, sequenced, .wav files embedded in audio tags. You can trigger them with JavaScript and it all seems to work great.
Unfortunately, Mobile Safari seemed to be unhappy with more than one audio tag playing at once, and Chrome for Android had similar limitations. This was a year ago, so things might be different now.
Since we were targeting iPads, we wound up using Phonegap to mix in some native sound libraries into our HTML & JavaScript app. One gotcha that tripped us up: if you want looping audio samples, stick to .wav files; .mp3 files have some silence at the start and end that's really tricky to get rid of.
I've been investigating Web Audio Api to build synths, and it's still very primitive and difficult to use. The infrastructure seems to have had a boost when Web Audio was introduced, but not much development since. Mobile audio on the web is rarely mentioned, too clunky, or unsupported.
At the same time, JS has become significantly faster with the V8 engine, JS loading can happen as needed, asynchronously, and non-blocking, which may solve many of the CPU/memory concerns you have. Look into NodeJS and various module loaders such as webpack, ES6, for more info.
I think there will be attention to web-based music apps because the web can support multiple users. That could be a good reason to keep pushing through these murky waters.. especially if you're talking concurrent connections.
See Molgav tracker. It works on desktop and mobile, it uses hundred of sampled instruments, it has UI adapted for small mobile touchscreens. See how examples sounds.
I'm looking to play AVI files in a web browser however I can't seem to find a decent tool to do so.
The basic WMP object embed is what I'm using right now but it doesn't really do what I'd like it to do, and I can't really implement JavaScript into it. (AFAIK I can't. I done a little digging and that's the conclusion I came to)
I've also tried DivX though I don't really like it. It has adverts, and I've no idea if JavaScript can be included either.
AFAIK Flash doesn't support AVI playback at all.
Does anyone know of any player at all that can play AVI files on the web, which I could possibly integrate some kind of JavaScript in (or has an API)?
Just a thought too, but would Java itself have anything like this?
The player also needs to be able to source the files like this:
file:\\Network-PC-Name\avi\avifile.avi
What you're looking for is WebChimera, there's no doubt about it. It has the most complex JS API ever made for web video, and it supports all file types.. it also supports "file:///" (for links like file:///C:/avi/avifile.avi).
It is open source and has no advertising. And the best part is that everything inside the player is editable, so you can skin it, add buttons and even add entirely new features to it with mostly just JavaScript. :)
Update
As you mentioned you need it to connect to file:///Network-PC-Name/avi/avifile.avi, this tells me you need this for some Local / Private / LAN use.
In this case, I think the best solution for you is to use WebChimera with Node-Webkit, as it will also give you a JS API based server environment.
WebChimera Player is already ported to NW for Windows and Mac:
https://github.com/jaruba/WebChimeraPlayerNW
On Windows, just download the package, and run nw.exe. To customize just edit the html pages. For Mac, just follow the instructions in the Readme.md.
The great part about using it like this, is that it already has the plugin embedded in the app, so you won't even need to install the plugin for the player to work.
The only thing I can't be fully sure of, is if Network-PC-Name can even be accessed through the file:/// protocol in it's normal usage. But this would still be possible anyway as you could map the network drive, and you can even map it programatically (with only JavaScript!) by using the child process exec to run the necessary command. (child_process is built in node-webkit natively)
flowplayer is recommended by this post:
Flash video player for AVI files (free for commercial use)
not sure about the file:\ source, as that's on your local machine and could be refused by the browser for security reasons