Radient Media Player

Table of Contents

Integrating Radient Media Player with Axinom DRM

Radiant Media Player(https://www.radiantmediaplayer.com) is a cross-device HTML5 video & audio player which allows to play DRM protected content.

Radient Media player can be easily integrated with Axinom DRM. You can find the specific instructions below.

Integrating Radient Media Player with Axinom DRM

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 Radient media player through https://www.radiantmediaplayer.com/free-trial.html
```
    licenseKey: 'Your-Radient-media-player-license-key',
```

Specify the license server URL.

    shakaDrm: {
        servers: {
            'com.widevine.alpha': 'https://drm-widevine-licensing.axtest.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-Radient-media-player-license-key',
            src: src,
            width: 640,
            height: 360,
            shakaDrm: {
                servers: {
                    'com.widevine.alpha': 'https://drm-widevine-licensing.axtest.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>