Videogular2 gives cors error for Azure DRM protected content

Question

I am using Videogular2 for azure content playback. The contents hosted on azure without DRM works perfectly. When I implement DRM protected content having token authentication gives CORS error. The error is thrown while fetching license from license server.

Following is my code

  stream = {
          source: 'http://xxxxx.streaming.mediaservices.windows.net/xxxxxxx/abc512kb.ism/manifest(format=mpd-time-csf)',
          licenseServers: {
              'com.widevine.alpha': {
                  serverURL: 'https://xxxxxx.keydelivery.westindia.media.azure.net/Widevine/?KID=xxxxx-ef40-87ed-b348-xxxxxx'
              }
          },
          token: 'Bearer xxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
      }

<video #media
        [vgMedia]="media"
       [vgDash]="stream.source"
       [vgDRMLicenseServer]="stream.licenseServers"
       [vgDRMToken]="stream.token"
       id="singleVideo"
       preload="auto" crossorigin
       >
</video>

I got following error while fetching license from license server.

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'. Origin 'http://localhost:4300' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

If I run it with disable-web-security of chrome then I call works perfectly.

Did any one face such issue while playing content from Azure Media.

Answer 1

Mandar -- Azure Media Services (AMS) origin sets the value of the 'Access-Control-Allow-Origin' header in preflight response as the wildcard ''. This works well with most players including our Azure Media Player, Roku and JW, and others. From the error, it seems Videogular2 does not work with AMS origin URL since, with credentials mode set to “include”, XMLHttpRequest in their dashjs does NOT allow wildcard “” as the value of “'Access-Control-Allow-Origin”.

Are you running the player from a single domain? If you are, we can set the request to include your incoming origin domain instead of the wildcard. Reach out to me at dwgeo at microsoft dot com and we can enable the feature on your account. Thanks.

Answer 2

I'm faced the same problem. Here is the Videogular2 source https://github.com/videogular/videogular2/blob/master/src/streaming/vg-dash/vg-dash.ts#L70

It work fine on same domain, but for different domain withCredentials=true is missing. after creating player on 70th line

this.dash = dashjs.MediaPlayer().create();

Should go this

this.dash.setXHRWithCredentials(true);

I hope it might help