Radiant Media Player
Radiant Media Player(https://www.radiantmediaplayer.com) is a cross-device HTML5 video & audio player which allows to play DRM protected content.
The general concept for Axinom DRM integration for DRM-compatible players, is outlined in the video Players document.
Radiant Media player can be easily integrated with Axinom DRM. You can find the specific instructions below.
Integration​
-
Embed the player source file into the HTML file. Add the following script inside the head of the HTML file.
<head>
<script src="https://cdn.radiantmediatechs.com/rmp/9.15.0/js/rmp.debug.js"></script>
</head> -
Create a div container with a unique id. So the video and UI elements will be appended to this container.
<div id="rmp"></div>
-
Pass your media URL.
const src = {
dash: 'https://media.axprod.net/TestVectors/Cmaf/protected_1080p_h264_cbcs/manifest.mpd'
}; -
Acquire a license key from Radiant media player through https://www.radiantmediaplayer.com/free-trial.html
licenseKey: 'Your-Radiant-media-player-license-key',
-
Specify the license server URL.
shakaDrm: {
servers: {
'com.widevine.alpha': 'https://drm-widevine-licensing.axtest.net/AcquireLicense',
'com.microsoft.playready': 'https://drm-playready-licensing.axprod.net/AcquireLicense',
}
}, -
Specify the license token.
shakaRequestConfiguration: {
license: {
headers: {
'X-AxDRM-Message': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.ewogICJ2ZXJzaW9uIjogMSwKICAiY29tX2tleV9pZCI6ICI2OWU1NDA4OC1lOWUwLTQ1MzAtOGMxYS0xZWI2ZGNkMGQxNGUiLAogICJtZXNzYWdlIjogewogICAgInR5cGUiOiAiZW50aXRsZW1lbnRfbWVzc2FnZSIsCiAgICAidmVyc2lvbiI6IDIsCiAgICAibGljZW5zZSI6IHsKICAgICAgImFsbG93X3BlcnNpc3RlbmNlIjogdHJ1ZQogICAgfSwKICAgICJjb250ZW50X2tleXNfc291cmNlIjogewogICAgICAiaW5saW5lIjogWwogICAgICAgIHsKICAgICAgICAgICJpZCI6ICIzMDJmODBkZC00MTFlLTQ4ODYtYmNhNS1iYjFmODAxOGEwMjQiLAogICAgICAgICAgImVuY3J5cHRlZF9rZXkiOiAicm9LQWcwdDdKaTFpNDNmd3YremZ0UT09IiwKICAgICAgICAgICJ1c2FnZV9wb2xpY3kiOiAiUG9saWN5IEEiCiAgICAgICAgfQogICAgICBdCiAgICB9LAogICAgImNvbnRlbnRfa2V5X3VzYWdlX3BvbGljaWVzIjogWwogICAgICB7CiAgICAgICAgIm5hbWUiOiAiUG9saWN5IEEiLAogICAgICAgICJwbGF5cmVhZHkiOiB7CiAgICAgICAgICAibWluX2RldmljZV9zZWN1cml0eV9sZXZlbCI6IDE1MCwKICAgICAgICAgICJwbGF5X2VuYWJsZXJzIjogWwogICAgICAgICAgICAiNzg2NjI3RDgtQzJBNi00NEJFLThGODgtMDhBRTI1NUIwMUE3IgogICAgICAgICAgXQogICAgICAgIH0KICAgICAgfQogICAgXQogIH0KfQ._NfhLVY7S6k8TJDWPeMPhUawhympnrk6WAZHOVjER6M'
}
}
} -
Reference the div container.
const elementID = 'rmp';
-
Create an object based on RadiantMP constructor.
const rmp = new RadiantMP(elementID);
-
Initialize the player.
rmp.init(settings);
Also you can refer to https://www.radiantmediaplayer.com/guides/working-with-axinom-drm.html for further reading.
-
Example code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>RMP</title>
</head>
<body>
<!-- Include Radiant Media Player JavaScript library -->
<script src="https://cdn.radiantmediatechs.com/rmp/9.15.0/js/rmp.debug.js"></script>
<!-- Add a div container with a unique id -->
<div id="rmp"></div>
<!-- Set up player configuration options -->
<script>
const src = {
dash: 'https://media.axprod.net/TestVectors/Cmaf/protected_1080p_h264_cbcs/manifest.mpd'
};
const settings = {
licenseKey: 'Your-Radiant-media-player-license-key',
src: src,
width: 640,
height: 360,
shakaDrm: {
servers: {
'com.widevine.alpha': 'https://drm-widevine-licensing.axtest.net/AcquireLicense',
'com.microsoft.playready': 'https://drm-playready-licensing.axprod.net/AcquireLicense',
}
},
shakaRequestConfiguration: {
license: {
headers: {
'X-AxDRM-Message': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.ewogICJ2ZXJzaW9uIjogMSwKICAiY29tX2tleV9pZCI6ICI2OWU1NDA4OC1lOWUwLTQ1MzAtOGMxYS0xZWI2ZGNkMGQxNGUiLAogICJtZXNzYWdlIjogewogICAgInR5cGUiOiAiZW50aXRsZW1lbnRfbWVzc2FnZSIsCiAgICAidmVyc2lvbiI6IDIsCiAgICAibGljZW5zZSI6IHsKICAgICAgImFsbG93X3BlcnNpc3RlbmNlIjogdHJ1ZQogICAgfSwKICAgICJjb250ZW50X2tleXNfc291cmNlIjogewogICAgICAiaW5saW5lIjogWwogICAgICAgIHsKICAgICAgICAgICJpZCI6ICIzMDJmODBkZC00MTFlLTQ4ODYtYmNhNS1iYjFmODAxOGEwMjQiLAogICAgICAgICAgImVuY3J5cHRlZF9rZXkiOiAicm9LQWcwdDdKaTFpNDNmd3YremZ0UT09IiwKICAgICAgICAgICJ1c2FnZV9wb2xpY3kiOiAiUG9saWN5IEEiCiAgICAgICAgfQogICAgICBdCiAgICB9LAogICAgImNvbnRlbnRfa2V5X3VzYWdlX3BvbGljaWVzIjogWwogICAgICB7CiAgICAgICAgIm5hbWUiOiAiUG9saWN5IEEiLAogICAgICAgICJwbGF5cmVhZHkiOiB7CiAgICAgICAgICAibWluX2RldmljZV9zZWN1cml0eV9sZXZlbCI6IDE1MCwKICAgICAgICAgICJwbGF5X2VuYWJsZXJzIjogWwogICAgICAgICAgICAiNzg2NjI3RDgtQzJBNi00NEJFLThGODgtMDhBRTI1NUIwMUE3IgogICAgICAgICAgXQogICAgICAgIH0KICAgICAgfQogICAgXQogIH0KfQ._NfhLVY7S6k8TJDWPeMPhUawhympnrk6WAZHOVjER6M'
}
}
}
};
<!-- Reference the div container-->
const elementID = 'rmp';
<!-- Create an object based on RadiantMP constructor-->
const rmp = new RadiantMP(elementID);
<!-- Player initialisation only after API events are registered -->
rmp.init(settings);
</script>
</body>
</html>
FairPlay Specifics​
<script src="https://cdn.radiantmediatechs.com/rmp/10.1.1/js/rmp.min.js"></script>
<div id="rmp"></div>
<script>
// Add your FairPlay media URL
const src = {
fps: 'https://fps-hls-url.m3u8'
};
// Axinom DRM FPS configuration
const arrayToString = function (array) {
const uint16array = new Uint16Array(array.buffer);
return String.fromCharCode.apply(null, uint16array);
};
const extractContentId = function (initData) {
return arrayToString(initData).replace(/^.*:\/\//, '');
};
// licenseRequestMessage
const licenseRequestMessage = function (message) {
return message;
};
// licenseRequestLoaded
const licenseRequestLoaded = function (event) {
const request = event.target;
const session = request.session;
const arrayBuffer = request.response;
const key = new Uint8Array(arrayBuffer);
session.update(key);
};
// processSpcPath
const processSpcPath = 'https://drm-fairplay-licensing.axprod.net/AcquireLicense';
// licenseRequestHeaders
const licenseRequestHeaders = [
{
name: 'Content-type',
value: 'application/octet-stream'
},
{
name: 'X-AxDRM-Message',
value: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.ewogICJ2ZXJzaW9uIjogMSwKICAiY29tX2tleV9pZCI6ICI2OWU1NDA4OC1lOWUwLTQ1MzAtOGMxYS0xZWI2ZGNkMGQxNGUiLAogICJtZXNzYWdlIjogewogICAgInR5cGUiOiAiZW50aXRsZW1lbnRfbWVzc2FnZSIsCiAgICAidmVyc2lvbiI6IDIsCiAgICAibGljZW5zZSI6IHsKICAgICAgImFsbG93X3BlcnNpc3RlbmNlIjogdHJ1ZQogICAgfSwKICAgICJjb250ZW50X2tleXNfc291cmNlIjogewogICAgICAiaW5saW5lIjogWwogICAgICAgIHsKICAgICAgICAgICJpZCI6ICIzMDJmODBkZC00MTFlLTQ4ODYtYmNhNS1iYjFmODAxOGEwMjQiLAogICAgICAgICAgImVuY3J5cHRlZF9rZXkiOiAicm9LQWcwdDdKaTFpNDNmd3YremZ0UT09IiwKICAgICAgICAgICJ1c2FnZV9wb2xpY3kiOiAiUG9saWN5IEEiCiAgICAgICAgfQogICAgICBdCiAgICB9LAogICAgImNvbnRlbnRfa2V5X3VzYWdlX3BvbGljaWVzIjogWwogICAgICB7CiAgICAgICAgIm5hbWUiOiAiUG9saWN5IEEiLAogICAgICAgICJwbGF5cmVhZHkiOiB7CiAgICAgICAgICAibWluX2RldmljZV9zZWN1cml0eV9sZXZlbCI6IDE1MCwKICAgICAgICAgICJwbGF5X2VuYWJsZXJzIjogWwogICAgICAgICAgICAiNzg2NjI3RDgtQzJBNi00NEJFLThGODgtMDhBRTI1NUIwMUE3IgogICAgICAgICAgXQogICAgICAgIH0KICAgICAgfQogICAgXQogIH0KfQ._NfhLVY7S6k8TJDWPeMPhUawhympnrk6WAZHOVjER6M'
},
];
const settings = {
licenseKey: 'your-license-key',
src,
// we pass here our FPS settings
fpsDrm: {
certificatePath: '< your fairplay.cer URL>',
processSpcPath: processSpcPath,
licenseResponseType: 'arraybuffer',
licenseRequestHeaders: licenseRequestHeaders,
extractContentId: extractContentId,
licenseRequestMessage: licenseRequestMessage,
licenseRequestLoaded: licenseRequestLoaded
}
};
const rmp = new RadiantMP('rmp');
async function initRmpPlayer() {
try {
await rmp.init(settings);
} catch (error) {
console.error('Radiant Media Player failed to initialize', error);
}
}
initRmpPlayer();
</script>
Test playback​
You can create your own script or use the above sample code. Once you run the script, you will be able to experience the playback of the media you have added.
See also​
- Radiant Media player : https://www.radiantmediaplayer.com/guides/working-with-axinom-drm.html
- Create entitlement message - https://portal.axinom.com/mosaic/videos/tool-entitlement-message/portal-tool-entitlement-message