How to play an HLS stream with encryption ClearKey+JWT in Safari Browser

How to play an HLS stream with encryption ClearKey+JWT in Safari Browser

When a user trying to play an HLS stream with encryption ClearKey+JWT in Safari Browser it returns an error 401 -"message": "Missing authorization token in request".
It is due to the Safari browser by default using its native player that, for some reason, it does not include an authentication token with the request URL.


To make it work, we suggest to force the player to use html5 player instead of native on safari browser and use a clearkey stream, see below for code snippets: -

     
Idea
  // Step 2: Prepare the player configuration
const playerConfig = {
            key: "Put your License Key here",
            ui: true, // you must include `mkplayer-ui.css` in your HTML for the default UI to work!
            log: {
                level: "debug", // Other options are "info" | "error" | "warn" | "off"
            },
            playback: {
                muted: true,
                autoplay: true,   // browsers do not allow autoplay if audio is not muted, so when enabling autoplay set `muted: true`
preferredTech: [{ player: 'html5', streaming: 'hls'}]   // to force the player to use html5 player instead of native on safari
            },
        }

Note: This solution is only applicable for MacOS. It will not work for iOS/iPad OS.

For this combination to work on iOS/iPadOS you will need to implement a proxy as described here: https://azure.microsoft.com/fr-fr/blog/how-to-make-token-authorized-aes-encrypted-hls-stream-working-in-safari/