确定浏览器支持的 DRM 系统

Question

我试图找出如何确定正在使用的 DRM 系统浏览器。事实上，只有 chrome 说它使用“com.widevine.alpha”，其中 IE 和 Safari（Win）在“requestMediaKeySystemAccess”上抛出错误，而 Firefox 甚至没有尝试说它使用“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;
}

是否有任何解决方案，例如 Modernizr 或类似的解决方案来获取我应该使用哪个 keySystem？

Answer 1

有几个网站提供这样的检查，比如dash-player.com/browser-capabilities/ 在仔细查看它是如何完成的之后，可以使用类似的东西：

// 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;
    }
  }
}

只需运行 supportsEncryptedMediaExtension() 和 supportedSystems 就会填充所需的信息。

请注意，config 对象应扩展为包含与您的特定媒体相关的特定编解码器声明。仅仅检测关键系统是不够的，因为编解码器支持有时取决于客户操作系统的依赖关系。

var config = [{
     "initDataTypes": ["cenc"],
     "audioCapabilities": [{
          "contentType": "audio/mp4;codecs=\"mp4a.40.2\""
     }],
     "videoCapabilities": [{
          "contentType": "video/mp4;codecs=\"avc1.42E01E\""
     }]
}];

Answer 2

除了这里列出的信息，我想提一下，在 Chrome 中，无论你是否使用https 都会影响navigator.requestMediaKeySystemAccess 功能的可用性。

在您可能在 http 上运行的开发环境中，navigator.requestMediaKeySystemAccess 将为 Chrome 返回 undefined，而相同的代码将在 Firefox 中返回一个函数.

在您的具有 https 的 prod 环境中，navigator.requestMediaKeySystemAccess 将在 Chrome 和 Firefox 中返回 both 函数。

Answer 3

我必须提供videoCapabilities 标志才能完成这项工作。

function testEME() {
  // https://shaka-player-demo.appspot.com/support.html
  var keySysConfig = [{
    "initDataTypes": ["cenc"]
      //,"persistentState": "required"  // don't use or MacSafari "not supported"
      //,"persistentState": "required", "distinctiveIdentifier": "required"
      //,"audioCapabilities": [{
      //  "contentType": "audio/mp4;codecs=\"mp4a.40.2\""
      //}]
      ,"videoCapabilities": [{
    "contentType": "video/mp4;codecs=\"avc1.4D401E\"" // avc1.42E01E = ConstrainedLevel3, 4D401E=MainLevel3
    //,"robustness": "3000"
      }]
  }];           
        
  var keySystems = {
    playready: ['com.microsoft.playready.recommendation', 'com.microsoft.playready'
      , 'com.microsoft.playready.hardware', 'com.youtube.playready'],
    clearkey: ['webkit-org.w3.clearkey', 'org.w3.clearkey'],
    widevine: ['com.widevine.alpha'],
    primetime: ['com.adobe.primetime', 'com.adobe.access'],
    fairplay: ['com.apple.fairplay','com.apple.fps'
      , 'com.apple.fps.1_0', 'com.apple.fps.2_0', 'com.apple.fps.3_0']
  };
            
  for(keyArr in keySystems) {
    for(forItemIdx in keySystems[keyArr]) {
      let keySys = keySystems[keyArr][forItemIdx];
      try {
         navigator.requestMediaKeySystemAccess(keySys, keySysConfig).
         then(function(mediaKeySystemAccess) {
         //let mkConfig = mediaKeySystemAccess.getConfiguration();
         //let sFlags = "persistentState="+mkConfig.persistentState 
         //  + ", distinctiveIdentifier="+mkConfig.distinctiveIdentifier; 
        console.log(keySys + " supported"); //+" ("+sFlags+")");
      }).catch(function(ex) {
         console.log(keySys+" not supported (" + ex.name+" "+ex.message+")." );
      });
      } catch (ex) {
        console.log(keySys+" not supported (" + ex.name+" "+ex.message+").." );
      }
    }
  }
}