We are writing a webplayer where we need to determine the DRM system supported by the browser. We used below code to check the DRM type on browser.
keySystems: {
clearkey: ['webkit-org.w3.clearkey', 'org.w3.clearkey'],
widevine: ['com.widevine.alpha'],
playready: ['com.microsoft.playready', 'com.youtube.playready'],
fairplay: ['com.apple.fairplay']
},
Chrome:
navigator.requestMediaKeySystemAccess()
IE:
videoElement.isTypeSupported()
We thought of using webkitGenerateKeyRequest() in Safari. But on Javascript console on Safari I tried to see whether the API is available.
let vel = document.getElementById('videoID');
but vel is not listing webkitGenerateKeyRequest() on Javascript console. Can I use can I use canPlayType() as per the answer Determine DRM system supported by browser .
The problem is it will say 'maybe' to everything instead of determining exactly whether the browser supports the perticular DRM or not. Is there any API to find the DRM supported by browser?
Unless you are using a non standard browser the mapping is quite simple usually at this time and you don't really need to check anything other than the browser type:
Safari - FairPlay
Chrome - Widevine
Internet Explorer - Playready
Firefox - Widevine
Mobile used to be a special case as Safari on iOS did not support FairPlay but it now does.
Beyond that, the standard way is to use requestMediaKeySystemAccess as you suggest - latest support picture is usually up to date here:
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/requestMediaKeySystemAccess#Browser_compatibility
Related
I wanted to check what is the support of fetch API in browser so I opened caniuse.com to get this information.
Looking at Chrome browser I see this feature is available since version 42 (which released in april 2015), but looking at Chrome For Android and I see only version 84.
Does this mean that fetch API is available only in the latest version in Chrome For Android? That doesn't seem logical to me so what is the correct way to interpret this (and other) tables on caniuse.com website?
Caniuse hides browser versions with less than 0.5% percent of users, which you can check and tweak by clicking on settings. That spawns a sidebar. You can lower this number down as fast as 0.01%, but even then Chrome for Android only shows version 84. That is because so many people have automatic updates turned on, that at least for mobile browsers, it's much more likely that people are on the latest version. For desktop browsers, people have to deal with company guidelines, have to go through the trouble of clicking "update", etc.
So in conclusion, if a version is not shown, even at 0.01% in the settings, consider it non-existing.
What happened here is that there is no specific data for Chrome for Android, so caniuse defaults to saying that if it's supported in the latest desktop version, then it's also supported in the latest Android version. Nobody has taken the time to specifically test Chrome for Android.
In general, caniuse is a human-curated list and won't always be accurate. You'll be best served by tracking down more primary sources. For example, the Fetch API was enabled in Chromium in 2015-02, with no platform-specific exemptions.
I'm currently upgrading a website for a customer. Current website uses a Modernizr feature set to target specific browsers that we can validate works with the wide variety of customers.
Current browser minimum requirements for this website are:
IE 10
Firefox 19
Chrome 32
Safari 9
iOS 8
Android 4.4 (I don't bother about all the differents quirks of some Blink implementations)
Since the website is targeted for an older audience which has not a lot of IT knowledge, I am considering to still support IE11 for those who still stay on Windows 7, and Firefox 52 for those on XP.
So, new browser minimum requirements would be something like
IE 11
Edge all versions
Firefox 52+
Chrome 69+
iOS 12+
Android 5+
I was searching for a set of features that are known to work on all these conditions so I can set a Modernizr feature set script to redirect users to a fallsafe version of the website if needed.
I've seen this post: Detecting IE11 using CSS Capability/Feature Detection, but it only targets IE11 (it's a great start tho). I also took a look at Caniuse but this can be kind of confusing.
My current idea is to set a feature set containing ES5 full support and ES6 minimal support, but I want to be sure to nake it OK to not have false positives on user's browsers. I also considered detecting flexbox support, since I use it.
So, considering this, would you have an idea of a feature set I could use for that specific set of browser requirements?
Edit: I wonder if there is a tool around that you can specify some browser features you want and that automatically gets you minimal browser requirements. I don't know why but I have a doubt this would probably exists somewhere.
Regards.
I actually implemented Web Share API in Mobile web app, which is working fine in Chrome, since it is featured developed by Google for Chrome. But I want the same functionality to be work on few other browsers such as FF and Opera.
Is there any way to do so, or else it's mandatory to add Custom pop up for those browser whichever is not supporting Web API.
Support for WebShare API is spreading - it is now supported in Safari on both Desktop in Mobile as of early 2019. You can see the list of supported browsers here: https://caniuse.com/#feat=web-share
You can easily feature detect if the client's browser supports it by doing if (navigator.share). Straightforward example here: https://alligator.io/js/web-share-api/
But yes, if it's not supported you will need to create an alternative non-native pop up with the share options you want to offer the user. (This is what I just implemented at the news site I work at).
I'm getting ready to release an iCal subscription feature, and I'd like to set the protocol to https:// or webcal://, depending on browser support. I'm aware that webcal is an unofficial protocol, but is there a way I can check if the browser supports it? So far nothing seems to make it work in IE8, and I'm about to test IE9+, but I'd prefer to offer graceful degradation for all browsers that don't understand webcal:// (as I understand it, the Android browser also appears to have issues with it).
One of the requirements of one of my clients is to show a message to a user that's using an older version of Firefox, Chrome, IE or Safari. For the last two it's easy (IE 9+ and Safari 5+). But for Firefox and Chrome, the requirement is that the site supports the current and the previous version of each browser.
To get the clients browser and version is quite simple, but I need to know what is the last version of each browser. Is there any way of doing that?
Well, technically, all you need is a place that keeps track of what the latest version of each browser (Ideally with a web service).
A quick Googling I was able to find: http://www.webdevelopersnotes.com/articles/latest-browser-versions.php
It's not a web service, but you could simply parse that HTML and get the latest version of each browser. Alternatively, you could keep track yourself and manually update this information in your database.
You should only ever have to worry about IE when it comes to version enforcement. Exception being, of course, if you need a specific API that's just not available in previous versions of Chrome/Firefox, but in that case you'd look and enforce the API, not the browser version. Adding to that, if Chrome/Firefox don't have an API, chances are even the most bleeding edge version of IE won't either, so the point is moot. The fact is Firefox and Chrome, and in part Safari, are far ahead of IE when it comes to browser hosted capabilities that trying to enforce specific versions of the former would likely be a lot of wasted time and effort to yield nothing substantial.
The best I could find was this. It has an export option that allows to export in JSON, XML...
I would strongly suggest that you don't check the browser version, instead try doing feature detection using, say, Modernizr.
What features of your client's site depends on specific versions of each browser? If you use Modernizr you could perform a check on a feature, say some video stuff, and if the current browser does not support that feature, then display a message to the user suggesting they upgrade their browser.
Detecting browser versions via Javascript is very flakey at best.
The only reason I'd say you need this kind of verification is because your webpage has features only available to latest browsers. Instead of relying on version numbers, I suggest learning Modernizr.js for your website.
http://modernizr.com/
It can detect particular html5/css3 features individually.