Videojs DRM with AMS streaming url gives CORS issue when Accessing Widevine license

[ravi-kiran-ash]

With video sources from Azure Media Services (AMS), and following DRM token encryption, I am seeing CORS issues when videojs make an api request to widevine license url. I am using videojs-contib-eme package

var options = {
    techOrder: ['html5'],
        controls: true,
    plugins: {
                        eme: {
                            emeHeaders: {
                                Authorization: 'Bearer=TOKEN’,
                            }
                        },
                    }
}

videoPlayer = videojs(`${this.playerElementId}`, options);
videoPlayer.ready(() => {
     videoPlayer.src({
    src: `${this.resource.mediaPath}(format=mpd-time-csf, encryption=cenc)',
   
        type: 'application/dash+xml',
        keySystemOptions: [{
    name: 'com.widevine.alpha',
    options: {
        licenseUrl: 'https://xxxx.keydelivery.westus2-2.media.azure.net/Widevine/?kid=xxxxxxxxx',
        httpRequestHeaders: {
            Authorization: 'Bearer=TOKEN’,
        }
    }
    }]
});

CORS error: Access to XMLHttpRequest at 'https://xxxx.keydelivery.westus2-2.media.azure.net/Widevine/?kid=xxxxxxxxx'' from origin 'https://xxx.xxx.com’ has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.


Steps to reproduce

1. initialize videojs player
2. Implement DRM solution https://docs.microsoft.com/en-us/azure/media-services/previous/media-services-deliver-keys-and-licenses

3. videojs.play() gives CORS issue

   Tried adding 'withCredentials': false to request headers. still didn't work.

[gkatsev]

keySystemOptions isn't a contrib-eme related property. I'd expect it to be something more like this:

player.src({
  src: `${this.resource.mediaPath}(format=mpd-time-csf, encryption=cenc)',
 
  type: 'application/dash+xml',
  keySystems: {
    'com.widevine.alpha': {
      licenseUri: 'https://xxxx.keydelivery.westus2-2.media.azure.net/Widevine/?kid=xxxxxxxxx',
      licenseHeaders: {
        Authorization: 'Bearer=TOKEN’
      }
    }
  }
})

[ravi-kiran-ash]

With certificate URL setup for Fairplay on AMS, I am seeing an error on Safari with following config: Config:

videoPlayer.src({
    src: 'https:XXXXX.ism/manifest',
    type: 'application/x-mpegURL',
    keySystemOptions: [
        {
            name: 'com.apple.fps.1_0',
            options: {
                certificateUri: `${this.drmConfig.fairplayCertificateUrl}`,
                licenseUri: `${this.drmConfig.fairplayLicenseUrl}`,
                httpRequestHeaders: {
                    Authorization: `Bearer=${this.drmConfig.drmCbcsToken}`,
                },
            }
        },
        {
            name: 'com.widevine.alpha',
            options: {
                licenseUrl: `${this.drmConfig.widevineLicenseUrl}`,
                httpRequestHeaders: {
                    Authorization: `Bearer=${this.drmConfig.drmCencToken}`,
                },
            }
        },
    ]
});

Programatically, I am appending format to src with (format=m3u8-aapl,encryption=cbcs-appl) for safari browser and (format=mpd-time-csf,encryption=cenc)for all other browsers.

Issue: Widevine and Playready are working fine but with Safari Fairplay, I am seeing this following error.

Additional Notes: We are following this doc: https://docs.microsoft.com/en-us/azure/media-services/previous/media-services-protect-hls-with-fairplay I am adding the format to the streaming url correctly but not sure If we are missing something.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.