Widevine DRM + DASH Audio not playing, no error

[AkashYadav00]

Hi team,

I am implementing Widevine DRM with Videojs player. At present, we have already implemented HLS, non-drm playback for music (audio only) content and is working fine.

Now, I am implementing Widevine DRM & DASH.

import "videojs-contrib-eme"; import videojs from "video.js";

private videoJsPlayer: any;

this.videoJsPlayer = videojs(this.audioRef.current, {
                autoSetup: false,
                autoplay: false,
                controls: false,
                loop: false,
                audioOnlyMode: true,
                controlBar: false,
});
this.videoJsPlayer.ready(() => {
            this.videoJsPlayer.reset();
            this.videoJsPlayer.eme();
            this.videoJsPlayer.load();
});

this.videoJsPlayer.src({
                    src: source,
                    type: CONSTANTS.VIDEO_JS_DASH_TYPE,
                    keySystems: await DrmHelper.getKeySystems(httpHeaders, source),
                    withCredentials: true
                });
this.videoJsPlayer.load();

const convertArrayBufferToString = (arraybuffer: ArrayBuffer): string => {
    return String.fromCharCode.apply(null, Array.from(new Uint8Array(arraybuffer)));
};

const convertStringToArrayBuffer = (str: string): ArrayBuffer => {
    const arrayBuffer = new ArrayBuffer(str.length);
    const arrayBufferView = new Uint8Array(arrayBuffer);
    for (let i = 0, strLen = str.length; i < strLen; i++) {
        arrayBufferView[i] = str.charCodeAt(i);
    }
    return arrayBuffer;
};

public async getKeySystems(licenseHeaders, sourceUrl) {

return {
"com.widevine.alpha": {
    supportedConfigurations: [{
                    audioCapabilities: [{
                        initDataTypes: ["cenc"],
                            sessionTypes: ["temporary"],
                        contentType: "audio/mp4; codecs=\"opus\"",
                        robustness: "SW_SECURE_CRYPTO"
                    }]
        }],
        async getLicense(_emeOptions: Object, keyMessage: ArrayBuffer, callback: ICallBackType) {
                    let startTime = window.performance.now();
                    videojs.xhr(
                        {
                            uri: licenseServerUrl,
                            method: HTTP_METHOD_POST,
                            responseType: "arraybuffer",
                            body: JSON.stringify({
                                licenseChallenge: btoa(convertArrayBufferToString(keyMessage)),
                            }),
                            headers: licenseHeaders,
                        },
                        (err, response, responseBody) => {

                            if (err || !response || response.statusCode < 200 || response.statusCode >= 300) {
                                LOG.error(`error`);
                                if (err) {
                                    callback(err);
                                }
                                return;
                            }
                            LOG.info("License fetched successfully");

                            const drmProxyResponse = JSON.parse(
                                convertArrayBufferToString(responseBody)
                            );
                            let key = convertStringToArrayBuffer(atob(drmProxyResponse.license));
                            callback(null, key);
                        }
                    );
                },
}

"video.js": "^7.21.4",
"videojs-contrib-eme": "^3.11.1"

Code attached above. There is no error in browser console but also music is not played.

License call is successful and the callback function is also called (Attached breakpoints in debugger to confirm this) On seeing the Network tab of chrome browser, I see that no more network calls are being made after the license request.

There should be network calls to fetch the audio chunks.

1. What am I missing?
2. Do I need to use videojs-contrib-dash also for DASH playback?