Define a browser supported DRM system

Question

I am trying to figure out how to determine which browser of the DRM system is using. And in fact, only chrome says that “com.widevine.alpha” is used, where IE and Safari (Win) throw an error on “requestMediaKeySystemAccess”, and firefox doesn't even try to say that it uses “com.adobe.acccess" = ]

function isKeySystemSupported(keySystem) { var dfd = Q.defer(); console.log('check: ', keySystem); navigator.requestMediaKeySystemAccess(keySystem, [{contentType: 'video/webm; codecs="vp9"'}]).then(function() { dfd.resolve(true); }, function() { dfd.resolve(false); } ); return dfd.promise; } 

is there any solution like Modernizr or similar to get which keySystem should i use?

Answer 1

There are several websites offering this kind of verification, for example dash-player.com/browser-capabilities/ . After a more detailed study of how this is done, you can use something similar:

 // EME Check var keySystems = { widevine: ['com.widevine.alpha'], playready: ['com.microsoft.playready', 'com.youtube.playready'], clearkey: ['webkit-org.w3.clearkey', 'org.w3.clearkey'], primetime: ['com.adobe.primetime', 'com.adobe.access'], fairplay: ['com.apple.fairplay'] }; var keySystemsCount = (function () { var count = 0; for (keysys in keySystems) { if (keySystems.hasOwnProperty(keysys)) { count += keySystems[keysys].length; } } return count; })(); var testVideoElement = document.createElement('video'); var supportedSystems = []; var unsupportedSystems = []; var supportsEncryptedMediaExtension = function () { if (!testVideoElement.mediaKeys) { if (window.navigator.requestMediaKeySystemAccess) { if (typeof window.navigator.requestMediaKeySystemAccess === 'function') { console.log('found default EME'); hasEME = true; var isKeySystemSupported = function (keySystem) { var config = [{initDataTypes: ['cenc']}]; if (window.navigator.requestMediaKeySystemAccess) { window.navigator.requestMediaKeySystemAccess(keySystem, config).then(function (keySystemAccess) { supportedSystems.push(keySystem); }).catch(function () { unsupportedSystems.push(keySystem); }); } }; var keysys, dummy, i; for (keysys in keySystems) { if (keySystems.hasOwnProperty(keysys)) { for (dummy in keySystems[keysys]) { isKeySystemSupported(keySystems[keysys][dummy]); } } } } } else if (window.MSMediaKeys) { if (typeof window.MSMediaKeys === 'function') { console.log('found MS-EME'); hasEME = true; var keysys, dummy, i; for (keysys in keySystems) { if (keySystems.hasOwnProperty(keysys)) { for (dummy in keySystems[keysys]) { if (MSMediaKeys.isTypeSupported(keySystems[keysys][dummy])) { supportedSystems.push(keySystems[keysys][dummy]); } else { unsupportedSystems.push(keySystems[keysys][dummy]); } } } } } } else if (testVideoElement.webkitGenerateKeyRequest) { if (typeof testVideoElement.webkitGenerateKeyRequest === 'function') { console.log('found WebKit EME'); hasEME = true; var keysys, dummy, i; for (keysys in keySystems) { if (keySystems.hasOwnProperty(keysys)) { for (dummy in keySystems[keysys]) { if (testVideoElement.canPlayType('video/mp4', keySystems[keysys][dummy])) { supportedSystems.push(keySystems[keysys][dummy]); } else { unsupportedSystems.push(keySystems[keysys][dummy]); } } } } } } else { console.log('no supported EME implementation found'); hasEME = false; } } } 

Just run the support for EncryptedMediaExtension () and the supported systems will be filled with the required information.

Answer 2

In addition to the information given here, I want to mention that in Chrome, if you use https or not, this will affect the availability of the navigator.requestMediaKeySystemAccess function.

In your development environment, which probably runs on http , navigator.requestMediaKeySystemAccess will return undefined for Chrome , while the same code will return the function in Firefox .

In your prod environment that has https , navigator.requestMediaKeySystemAccess will return the function in both Chrome and Firefox.