Mediakind WMC SDK Documents

Overview

The WMC SDK libraries provide the interfaces that a client application (app) uses to control the HTML5 video playback based on the media player status. These libraries provide the client app with simplified media player interfaces, which enable the client app to be unconcerned about the complexity of the media player implementation.

WMC Reference Application

The WMC Reference Player, is light weight html base web application, which uses and implement all the features of WMC SDK. It is a good place to start.

Quick Start Guide for Developers

Note you must have npm installed on your machine.

  1. Download the package from the npm repository
    npm install @mediakind/wmc
  1. Open the package container
  2. Expand the example folder and do the following:
    npm install
    npm start
  1. Open a browser and enter the following url:
    http://localhost:9080

For MK specific content:

    http://localhost:9080/index_mk.html

For MK specific content with React Html Page:

    http://localhost:9080/index_react.html

Quick Guide for SDK integration

Initial Html Layout

Create a video element somewhere in your html. For our purposes, make sure the controls attribute is present.

<div id="player_container">
    <video id="video_element" poster="poster.svg" controls></video>
    <div id="subtitle_element"></div>
</div>

Include wmc.prod.js to the end of the head tag.

<head>
    ...
    <script src="node_modules/@mediakind/wmc/dist/wmc.prod.js"></script>
</head>

Initialize WMC-SDK by creating the media player

// Creating the AmcManager instance from amc module
var wmcMgr = new amc.AmcManager();
var wmcEvents = amc.AmcEvents;
var wmcConstants = amc.AmcConstants;
// Setup the logger level to DEBUG
wmcMgr.setLogLevel(wmcConstants.IMC_LOG_DEBUG);

Define Video and Subtitle HTML-DOM elements

var video = document.getElementById("video_element");
var subtitle = document.getElementById("subtitle_element");

Register the basic playback events

wmcMgr.addEventListener(wmcEvents.AMC_EVENT_ERROR, processEvent);
wmcMgr.addEventListener(wmcEvents.AMC_EVENT_STATE_CHANGED, processEvent);
wmcMgr.addEventListener(wmcEvents.AMC_EVENT_VIDEO_POSITION_CHANGED, processEvent);
wmcMgr.addEventListener(wmcEvents.AMC_EVENT_SEEK_COMPLETE, processEvent);
wmcMgr.addEventListener(wmcEvents.AMC_EVENT_DEVICE_REGISTERED, processEvent);
wmcMgr.addEventListener(wmcEvents.AMC_EVENT_INIT_COMPLETE, processEvent);
wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAY_READY, processEvent);

Processing the Events

function processEvent(eventObj) {
    switch (eventObj.eventType) {
        case wmcEvents.AMC_EVENT_PLAY_READY:
            //setup the video and subtitle containers
            wmcMgr.setContainer(video, subtitle);
            // initialize the playback with given parameters to be followed by events AMC_EVENT_DEVICE_REGISTERED (first time) and AMC_EVENT_INIT_COMPLETE ( 2nd time onwards)
            wmcMgr.start();
            break;
        case wmcEvents.AMC_EVENT_DEVICE_REGISTERED:
        case wmcEvents.AMC_EVENT_INIT_COMPLETE:
            // start the VOD/LIVE playback passing the as argument the Playback Mode as:
            // wmcConstants.IMC_MODE_ADAPTIVE: For VOD, wmcConstants.IMC_MODE_LIVE: For Live
            wmcMgr.createPlayer(wmcConstants.IMC_MODE_ADAPTIVE);
            break;
        case wmcEvents.AMC_EVENT_ERROR:
            console.error(eventObj.code + ":" + ((eventObj.message) ? eventObj.message : eventObj.message.error));
            break;
        default:
    }
}

Set Playback URL and Instantiate the playback

// setExternalSourceParams() is an api which is needed only when external source is added in to the WMC SDK.
// This API has only one mandatory parameter, name :sourceUrl, other optional parameter is licenseUrl, which is needed for encrypted content.
wmcMgr.setExternalSourceParams({ sourceUrl: "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd", licenseUrl: "" });
// Use this function to set the unique player license key on the player
wmcMgr.setPlayerKey("***************");
wmcMgr.setPlayerAnalyticsConfig("***************");
// Initializes the WMC SDK, to be followed by event AMC_EVENT_PLAY_READY
wmcMgr.init();

Note : Additional information required to play Mediakind Assets

Parameters

Parameter Meaning
server_url Home URL of the environment
owner_Uid Owner identification of the environment
primary_id Login name of the user for the environment
media_id Identifier of the media in the environment
app_id Identifier of the media in the environment required only for live playback
authorization_token Authorization Token corresponding the login name for the environment
mkp_api true for MKP server and false is the default

Note : All above parameters are mandatory

During initialization

    wmcMgr = new amc.AmcManager(server_url, owner_Uid, primary_id);

During player creation

    wmcMgr.createPlayer(playback_mode, media_id, app_id);

Configure authorization token

    wmcMgr.setSTSToken(authorization_token);

Configure MKP endpoints

    wmcMgr.enableMKPApi(mkp_api);

Set the AccountId

    wmcMgr.setPrimary(primary_id);

Samples values for reference

Live

{
    server_url: "https://ottapp-appgw-amp-a.prodc.nba.tv3cloud.com",
    owner_Uid: "azuki",
    primary_id: "user@mediakind.com",
    playback_mode: wmcConstants.IMC_MODE_LIVE,
    media_id: "NBATVD",
    app_id: "1098",
    authorization_token: "AuthToken...",
}

VOD

{
    server_url: "https://ottapp-appgw-amp-a.prodc.nba.tv3cloud.com",
    owner_Uid: "azuki",
    primary_id: "user@mediakind.com",
    playback_mode: wmcConstants.IMC_MODE_ADAPTIVE,
    media_id: "NBA_CMPA0671616623679614_Jitp_Reach_HD",
    authorization_token: "AuthToken...",
}

Final HTML Layout

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WMC-SDK Player</title>
    <!-- Setting the source for WMC-SDK from npm Private MK Repository -->
    <script src="node_modules/@mediakind/wmc/dist/wmc.prod.js"></script>
</head>

<body>
    <div id="player_container">
        <video style="width: 100%;height: 100%;" controls id="video_element" poster="poster.svg" controls></video>
        <div id="subtitle_element"></div>
    </div>
    <script src="script/main.js"></script>
</body>

</html>

(Web SDK) DRM Support on Desktop Devices

The following table contains details for the Browser and corresponding DRM support by WMC:

Browser Minimum OS Version DASH ClearKey DASH Widevine DASH/SMOOTH/HLS PlayReady HLS AES128 HLS Widevine HLS FairPlay
Chrome (last 3 major versions) OS versions supported by Chrome true true null true true null
Firefox (last 3 major versions) OS versions supported by Firefox true true null true true null
Safari 10+ macOS Sierra false null null true null true
MS Edge (last 3 major versions) Windows 10 true null true true null true
MS Edge (Chromium) (last 3 major versions) Windows 7 / macOS 10.12 true true null true true null
MS Edge (Chromium) (last 3 major versions) Windows 8.1 true true true true true null

Detailed Documents

  1. API Reference
  2. Events
  3. Constant
  4. Platform

Player Key

Operators have to contact the MediaKind Service Centre to get valid player license keys.
Operators should also whitelist their domains on the Bitmovin dashboard with the help of MediaKind Service Centre.

Player Analytics Key

Operators have to contact the MediaKind Service Centre to get valid player analytics keys.
Operators should also whitelist their domains on the Bitmovin dashboard with the help of MediaKind Service Centre.

Player Domain White-list

Default player works with only TV3 domain. For custom domains, it needs to be registered for white-listing.
Please get in touch with MediaKind service centre for any assistance on white-listing custom domains.

Tutorials

  1. Playback of External Assets
  2. Playback of MK Encrypted Assets
  3. Playback of Windows UWP Application

License

wmc-sdk is released under BSD license

index.js