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.
Request URL: https://ottapp-appgw-amp.prodc.mkio.tv3cloud.com/drm/clear-key?ownerUid=azuki&key_id=<primary verification key>
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: -
// 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
},
}
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/
Related Articles
Generating HTTP Archive format (HAR) file for browser network requests troubleshooting
This article explains how to generate HAR file from developer tools of major browsers for troubleshooting network requests. A HAR file includes users browser history with contents of cookies, downloaded pages, personal data, passwords and other ...How to use DRM to playback MK.IO assets encrypted
Intro Currently, MK.IO solution supports only MediaKind's DRM solution as the unique provider of DRM encryption keys. External 3PP Key Management System solutions will be considered. In MK.IO there are the following groups of encryptions: 1. ...How to migrate all your content from AMS into MK.IO using MK.IO bulk migration tool
In this article we will describe in detail the process to migrate all your assets, asset filters, streaming locators, content key policies, streaming endpoints from AMS into MK.IO. The idea is that if today you have a playback URL in the following ...Subscription is Pending Approval
When a Subscription is created and you log into your MK.IO subscription you see your subscription is still pending as such: When a subscription is opened it requires to go through an approval process prior to activation, to ensure that the purchasing ...How to find MK.IO Customer ID and Subscription ID
This article will describe the step by step on how to find the Customer ID and Subscription ID Below are the instructions to find the customer id: Login to the MK.IO portal https://app.mk.io/ Choose your subscription. Once logged, open another tab in ...