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.

Integration​

FairPlay Specifics​

Test playback​

See also​

Integration

FairPlay Specifics

Test playback

See also