HLS media file decryption is not working using VideoJs, FairPlay

Question

I've tried to play an encrypted HLS media file, but It was not played and occurred errors as below.

enter image description here

The executable environment was identified in this link, but it was not played

And tested in test page of Pallycon, but It was played without a problem.

Execution environments and source code are as below.

execution environments:

• OS: macOS High Sierra 10.13.6
• Safari: 13.1.2

using libraries

• videojs: ^7.8.4
• videojs-contrib-eme: ^3.7.0

DRM Vendor

• Pallycon

source code

const playerConfig = {
                    src: "https://mz-cm-transcoding-output.s3.ap-northeast-2.amazonaws.com/mz-cm-v1/assets/1604917161khae8nfj/Beach+-+19987.m3u8",
                    type: 'application/x-mpegurl',
                    keySystems: {
                        'com.apple.fps.1_0': {
                            getCertificate: function (emeOptions, callback) {
                                videojs.xhr({
                                    url: "https://license.pallycon.com/ri/fpsKeyManager.do?siteId=<SITE_ID>",
                                    method: 'GET',
                                }, (err, response, responseBody) => {
                                    if (err) {
                                        callback(err)
                                        return
                                    }
                                    callback(null, base64DecodeUint8Array(responseBody));
                                })
                            },
                            getContentId: function (emeOptions, initData) {
                                const contentId = arrayToString(initData);
                                return contentId.substring(contentId.indexOf('skd://') + 6);
                            },
                            // return content ID
                            getLicense: function (emeOptions, contentId, keyMessage, callback) {
                                videojs.xhr({
                                    url: <license_url>,
                                    method: 'POST',
                                    responseType: 'text',
                                    body: 'spc=' + base64EncodeUint8Array(keyMessage),
                                    headers: {
                                        'Content-type': 'application/x-www-form-urlencoded',
                                        'pallycon-customdata-v2': <token>
                                    }
                                }, (err, response, responseBody) => {
                                    if (err) {
                                        callback(err)
                                        return
                                    }
                                    callback(null, base64DecodeUint8Array(responseBody))
                                })
                            }
                        }
                    }
                };

                player.src(playerConfig);

Answer 1

I had the same problem when I was trying to implement the FairPlay in VideoJs. In my case, it was a CORS issue because the certificate was in a different domain and CORS was not enabled there. So I created an API in my server to return the certificate and it fixed the problem.

If load your get certificate URL (https://license.pallycon.com/ri/fpsKeyManager.do?siteId=<SITE_ID>) in the browser, you can check the Access-Control-Allow-Origin in the Response Headers to see what origins are allowed.