TVDemo Integration Guide

This guide describes how to instantiate and use the TV Demo.

Prerequisites

Download the TVDemo pack; see Downloading the Source Code. Extract the following files to a suitable location on a web server; you can use localhost for development and testing purposes. Initially, it is recommended the application is hosted and integrated with a desktop browser for simplicity of debugging.

If not hosted on the same origin, the hosted video must be configured to allow cross-origin resource sharing (CORS), such as a different domain or subdomain. We recommend the SDK is deployed over HTTPS as the CONNECT Player SDK uses cryptographic functions provided by the browser; some browsers inhibit this functionality if not running over HTTPS.

Initial integration steps

HTML

The obvious entry point is the index.html file. This references each of the JavaScript and Cascading Style Sheet files of relevance, so they are ingested into the web engine at load time. This file also sets out the basic layout of the page. Notes on the significant .js and .css files follow below.

JavaScript

File	Synopsis
config.js	This contains several configurable items which can be edited in order to meet your needs. The most likely configurable items are those for DRM setup to enable scrambled stream playback. Click here to view the code. drm config JS `// SSP tenant details and configuration mode const sspTenantId = "UEX3XJ0I"; const sspBaseUrl = "https://uex3xj0i.anycast.nagra.com"; const sspBaseSsmUrl = "https://uex3xj0i-ssm.anycast.nagra.com/UEX3XJ0I/ssm"; const sspUseSsm = false;`
streams.js	This contains the list of streams presented to the user which can be edited in order to meet your needs. Click here to view the code. Stream list JS { name: "Public demo - Big Buck Bunny", videoUrl: "https://d3bqrzf9w11pn3.cloudfront.net/basic_dash_bbb_clear/bbb_public.mpd", tags: ["1080p"], }, { name: "Public demo - Track selection", videoUrl: "https://d3bqrzf9w11pn3.cloudfront.net/sintel/sintel.mpd", tags: ["1080p", "multi-audio", "SUBS"], }, { name: "Scrambled: Key per track", videoUrl: "https://otvplayer.nagra.com/vod/dash/scramble/key-per-track/bbb_audio-sd-hd_keypertrack/manifest.mpd", tags: ["1080p", "DRM", "key-per-track"], drm: "UEX SSP", token: "eyJraWQiOiIy... <snipped>", }, Streams are separated into `vod` and `live` sections for simplicity. This also contains the DRM head end required to support scrambled streams listed. Click here to view the code. drm config JS `drm: { "UEX SSP": { tenantId: "UEX3XJ0I", baseUrl: "https://uex3xj0i.anycast.nagra.com", }, },` Labels correspond to the contents of the `drm` field in the list above.
app.js	This file provides the Player-agnostic operations of the TVDemo application, such as: User input remote control button handling. Player initialisation call `setupPlayer()` provided by the Player specific file. Stream playback/channel change function call `loadAndPlayVideo()` provided by the Player specific file.
adaptConnect.js	This file provides the CONNECT Player SDK5 for Browsers and ConnectedTV specific integrations to support the file above, i.e. the implementation of the respective `setupPlayer()` and `loadAndPlayVideo()` functions.
	setupPlayer() function Click here to view the code. setupPlayer JS function setupPlayer() { const player = otvplayer( "videoPlayer", // options { html5: { nativeCaptions: false, nativeAudioTracks: false, }, autoplay: true, nativeControlsForTouch: false, plugins: { otvtoolkit: { drm: { system: "nagra-ssp", config: { mode: "token", tenantId: sspTenantId, licenceServer: sspBaseUrl, ssmServer: sspUseSsm ? sspBaseSsmUrl : "", widevineServerCertificate: "...<snipped>...", // Optional: If `persistentState` is not set to `"required"` then the DRM device identifier // allocated will be unique for every zap. "com.widevine.alpha": { persistentState: "required", }, }, }, }, }, }, // loaded callback () => { OTV.eventTimeline.enableTimeline(true); } ); window.player = player; }
	loadAndPlayVideo() function The most significant step in this is the setting of the source (the stream) along with its DRM Token, `mimeType` plus any zap time configuration parameters. Click here to view the code. stream playback JS `async function loadAndPlayVideo(videoData, allowLowLatency) { ... const source = { src: videoData.videoUrl, type: "application/dash+xml", token: videoData.token, lowLatencyEnabled: allowLowLatency && videoData.lowLatency, }; window.player.src(source); ...`

CSS

File	Synopsis
`app.css`	CSS used to construct and control the styling of the UI.
`lib/opy-sdk-js.min.css`	CSS from CONNECT Player SDK 5 for Browsers and ConnectedTV.

Smart TV

We recommend you complete the integration of TVDemo for Browsers before taking steps to move that working solution to Smart TVs. You then later have the option to:

Take the same source code and embed it within the payload of a Samsung Tizen Widget .wgt (small web application) file or the equivalent LG webOS .ipk file. Or:
Let the Smart TV environments have an even smaller web application that refers to the code on a hosted web server.

Hosted is the only option available to Hisense VIDAA.

You can design, build, install and debug applications for these platforms with the Integrated Development Environment (IDE), SDKs and supporting tools.

	https://webostv.developer.lge.com/ LG WebOS TV IDE/SDK
	https://developer.tizen.org/ Tizen Studio IDE/SDK
	https://www.vidaa.com/partners/ to find out more about becoming a partner with a Store listing

HbbTV

NAGRA's CONNECT Player provides support for Samsung Tizen TVs working in HbbTV mode.

Some Samsung Smart TV models from 2020 onwards can work in HbbTV mode and integrate the TVkeyCloud DRM system (see TVkeyCloud integration. Although the models supporting this are considered Tizen TVs, the Tizen tools are not applicable in this mode, requiring a different set of tools.