@mediakind/wmc

v1.92.0

Published

10 days ago

Mediakind WMC-SDK for Browser Client & Retail devices

0High
0Medium
0Low

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 for Developers

Note you must have npm installed on your machine.

Download the package from the npm repository

    npm install @mediakind/wmc

Open the package container
Expand the example folder and do the following:

    npm start

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" crossOrigin></video>
    <div id="subtitle_element"></div>
</div>

Add wmc.prod.js to the end of the head.

<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
wmcPlayer.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 start AmcManager

// 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();

NB : Additional information required to play Mediakind Assets

During initialization

    var 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);

where,

|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|

Samples values for reference

Live

{
    server_url: "https://ottapp-appgw-amp-a.prodc.nba.tv3cloud.com",
    owner_Uid: "azuki",
    primary_id: "[email protected]",
    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: "[email protected]",
    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%;" id="video_element" poster="" crossOrigin 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 |