I am trying to load some video content from Microsoft Azure, using Video.js, and I need to add some headers for SharedKey authorization. I have been trying various methods and doing research for several days, but I am hitting brick walls and could really use some assistance.
Important to note that this is for a mobile app written using Angular / Cordova.
This is how Azure suggests that we do it:
https://learn.microsoft.com/en-us/azure/media-services/latest/player-how-to-video-js-player
Basically, by attaching a function to videojs.Hls.xhr.beforeRequest.
Unfortunately, there are several problems with this approach. Here is a ticket in the videojs issue tracker trying to look for a solution to these issues:
https://github.com/videojs/video.js/issues/7207
In summary:
1- We are not using HLS/DASH. We are loading mp4 files from blob storage. And videojs "hands that off directly to the browser, and it handles all loading of things while not providing this extra set of functionality."
2- Even if we were to convert the media and use HLS, "this method won't be available because native playback is used for Safari with HLS.". (So do we need to use DASH? Or does that not work on Safari either?)
3- There is still no way to add headers for Subtitle tracks, whether we use native subtitles, or add them through videojs.players.video.addRemoteTextTrack.
I have also tried other alternative methods like
1- Trying to use xhook to intercept it.
2- Trying to use @angular/common/http/HttpInterceptor.
Neither method worked.
So, my questions would be:
1- Is there a method I'm overlooking that would allow me to add / inject headers to requests being made natively by the browser?
2- Could it perhaps be done with an authorization cookie? I have seen this mentioned in some other questions, but I couldn't find any concrete examples, and I'm not sure how it would work with Azure.
3- If all else fails, is there another video player I could use that does provide better support in regards to authorization options?
Any other suggestions would be also be appreciated. Thank you.
Considering you're serving a video file stored as a blob in Azure Storage directly, you can make use of Shared Access Signature (SAS). A SAS provides a time-limited, permission-bound access to a blob.
The way it would work is when a user requests a video to be played, you will need to send a request to your backend service. Your backend service will create a SAS token for the blob with Read permission (only this permission is required to play the video) and some expiry date (depending on the length of the video). Your backend service will return the SAS URL for the blob (which would be something like blob-url?sas-token) which will be used by the video player to play the video.
You can find more information about Shared Access Signature here: https://learn.microsoft.com/en-us/rest/api/storageservices/delegate-access-with-shared-access-signature. You will need to create a Service SAS for your blob.