Playback Widevine with token from Azure Media Services

Question

Good morning everyone, I'm having a hard time trying to add a simple Authorization token to playback widevine protected content from azure media services using react-native-video. here is my code :

   ref={(ref: Video) => { this.video = ref }}
    source={{
      uri: "https://swannmediaservice-euwe.streaming.media.azure.net/95aae6ef-55a4-411d-9706-73890f5d2ba5/L'Homme qui courait après le Te.ism/manifest(format=mpd-time-cmaf,encryption=cenc)",type: 'mpd', 
      drm: {
        type: 'widevine', 
        headers: {
            'Authorization': 'Bearer=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL3d3dy5zYXRvcmlwb3AuY29tLyIsImF1ZCI6InVybjpzYXRvcmlwb3AiLCJleHAiOjE3MTA4MDczODksIm5iZiI6MTYwMTMwMDA3OH0.O_41HbAcE8kFDivOM9Q4AL2z-4TMUTLchuUoyxCdDKY'
          }
    }
    }}

this ofc is just for testing purposes.

This always gives me this error in the log output when i test it on Android : Caused by: java.lang.IllegalStateException: Media requires a DrmSessionManager Which I'm assuming is due to the video not being able to play.

I tested this in the azure media player and everything works correctly. here is a link for that :

https://aka.ms/azuremediaplayer?url=https%3A%2F%2Fswannmediaservice-euwe.streaming.media.azure.net%2F057936a3-2899-4d63-b287-3c50976c1bc4%2FFrench%20audiobook%20The%20Caliph%20A2x_.ism%2Fmanifest(format%3Dmpd-time-csf%2Cencryption%3Dcenc)&widevine=true&widevinetoken=Bearer%3DeyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL3d3dy5zYXRvcmlwb3AuY29tLyIsImF1ZCI6InVybjpzYXRvcmlwb3AiLCJleHAiOjE3MTA4MDczODksIm5iZiI6MTYwMTMwMDA3OH0.O_41HbAcE8kFDivOM9Q4AL2z-4TMUTLchuUoyxCdDKY

and it works fine. is there anything I'm missing here?

Platform

iOS Android ExoPlayer

Video sample

URI : https://swannmediaservice-euwe.streaming.media.azure.net/95aae6ef-55a4-411d-9706-73890f5d2ba5/L'Homme qui courait après le Te.ism/manifest(format=mpd-time-cmaf,encryption=cenc)

Header: Bearer=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL3d3dy5zYXRvcmlwb3AuY29tLyIsImF1ZCI6InVybjpzYXRvcmlwb3AiLCJleHAiOjE3MTA4MDczODksIm5iZiI6MTYwMTMwMDA3OH0.O_41HbAcE8kFDivOM9Q4AL2z-4TMUTLchuUoyxCdDKY

Answer 1

well ,since i figured out my own problem, here is the solution :

Since azure media services consults their own licensing sevice to play media ( and not using a 3d party licensing service ) , exoplayer doesn't realise that and tries to play the video regardless even if there is a licenseServer in the response (manifest settings) or not since it expects a a licenseService pasted in it's DRM settings so it can use it to fetch the license and pass a Header with it. So basically , when i didn't use a licensServer and thought everything worked automatically , i was wrong. so what my code was doing , is : it requests a license frorm no where , and it wont work. So you have to parse the data that is coming from the link , extract the license server manually and add it to the request like this :

 ref={(ref: Video) => { this.video = ref }}
    source={{
      uri: "your mpd url",type: 'mpd', 
      drm: {
        type: 'widevine', 
        licenseServer: 'the Parsed license server form the mpd file',
        headers: {
            'Authorization': 'Bearer=yourtoken'
          }
    }
    }}

Implemented that , now everything works great.

Answer 2

May be it comes from the manifest name which may be problematic. I recommend to not use accented characters or special characters like ' as the name is exposed in the the streaming Url. Remove also spaces when possible. To do so, rename the source file, re-encode the content and give another try.