Video.js: Playing DRM content on Android

[slash197]

Description

Implemented widevine drm with videojs for dash streams and it works great on desktop and mobile, however I get an error message playing it in a mobile app's webview. The error is:

Uncaught (in promise) NotSupportedError: Unsupported keySystem or supportedConfigurations.

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue.

1. Run the same videojs config through an android webview

Results

Expected

Playing video content

Actual

No playback and error message

Error output

Uncaught (in promise) NotSupportedError: Unsupported keySystem or supportedConfigurations.

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs v7.2.2

browsers

chrome webview?

OSes

Android 8+

plugins

videojs-contrib-eme

videojs config

_vjs.eme();
_source = {
    src: options.url,
    type: _mime,
    keySystems: {
        'com.widevine.alpha': {
            getLicense: function(emeOptions, keyMessage, callback){
                var message = new Uint8Array(keyMessage);

                videojs.xhr({
                    uri: 'https://wv-keyos.licensekeyserver.com/',
                    method: 'POST',
                    responseType: 'arraybuffer',
                    body: message,
                    headers: {
                        customdata: App.player.drm.key
                    }
                }, function(err, response, responseBody){
                    if (err) {
                        callback(err);
                        return;
                    }
                    callback(null, responseBody);
                });
            }
        }
    }
};

[mister-ben]

An Android webview doesn't support DRM by default. You need to override onPermissionRequest in the webview's WebChromeClient, something like

public void onPermissionRequest(PermissionRequest request) {
  // Crude example, you need to check which permissions were requested 
  String[] perms = {PermissionRequest.RESOURCE_PROTECTED_MEDIA_ID};
  request.grant(perms);
}

Even then you may find support varies by device.

[forbesjo]

Thanks @mister-ben for the answer, we'll add this to a FAQ in videojs-contrib-eme

[halilozel1903]

An Android webview doesn't support DRM by default. You need to override onPermissionRequest in the webview's WebChromeClient, something like

public void onPermissionRequest(PermissionRequest request) {
  // Crude example, you need to check which permissions were requested 
  String[] perms = {PermissionRequest.RESOURCE_PROTECTED_MEDIA_ID};
  request.grant(perms);
}

Even then you may find support varies by device.

@mister-ben Thank you very much Señor 💯 It worked successfully. 👍

[alpkahveci]

An Android webview doesn't support DRM by default. You need to override onPermissionRequest in the webview's WebChromeClient, something like

public void onPermissionRequest(PermissionRequest request) {
  // Crude example, you need to check which permissions were requested 
  String[] perms = {PermissionRequest.RESOURCE_PROTECTED_MEDIA_ID};
  request.grant(perms);
}

Even then you may find support varies by device.

You are the best, thanks a lot !

[JoaoCEAlmeida]

I'm having this problem with videojs "7.7.6" on web with m3u8 links also, when I have DRM enable...

@slash197 @mister-ben Can this be related some how with this ?

Thanks in advance.

[alpkahveci]

I'm having this problem with videojs "7.7.6" on web with m3u8 links also, when I have DRM enable...

@slash197 @mister-ben Can this be related some how with this ?

Thanks in advance.

Which drm do you use? playready?

If it is playready, you can try the code whic is shown below,

```
var headers['Authorization'] = yourDRMToken;
this.player.src([
{
type: 'application/x-mpegURL',
src: source,
keySystemOptions: [
{
name: 'com.microsoft.playready',
options: {
serverURL: this.licenseUrlPlayready,
httpRequestHeaders: headers
}
}
]

    }
  ]);

```