TVDemo Integration Guide

This guide describes how to instantiate and use the TVDemo.

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 relevant JavaScript and Cascading Style Sheet files, so they are ingested into the web engine at load time. This file also sets out the basic layout of the page.

Variants of the HTML file named dashjs.index.html, shaka-player.index.html, tizen-avplayer.index.html provide the equivalent entry point for the other embedded Players.

Notes on the significant .js and .css files follow below.

JavaScript

File	Synopsis
bundle.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. The player-specific file provides the stream playback/channel change function call `loadAndPlayVideo()`. This file is built by the Webpack tool, so editing it by hand afterwards needs to be undertaken with extreme caution.
adaptConnect.js	This file provides the CONNECT Player SDK5 for Browsers and Connected TV 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(streamsList) { const player = otvplayer( "videoPlayer", // options { html5: { nativeCaptions: false, nativeAudioTracks: false, }, autoplay: true, nativeControlsForTouch: false, plugins: { otvtoolkit: { drm: { system: "nagra-ssp", config: { mode: "token", tenantId: streamsList.drm.tenantId, licenceServer: streamsList.drm.baseUrl, ssmServer: streamsList.drm.sspUseSsm ? streamsList.drm.sspBaseSsmUrl : undefined, widevineServerCertificate: streamsList.drm.widevineServerCertificate, // Optional: If `persistentState` is not set to `"required"` then the DRM device identifier // allocated will be unique for every zap. "com.widevine.alpha": { persistentState: streamsList.drm.widevinePersistentState !== undefined ? streamsList.drm.widevinePersistentState : "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(streamObject, allowLowLatency) { ... const source = { src: streamObject.videoUrl, type: "application/dash+xml", token: streamObject.token, lowLatencyEnabled: allowLowLatency && streamObject.lowLatency, }; window.player.src(source); ...`
adaptShaka.js	The same named functions are implemented in these modules to provide the equivalent implementation for their respective Players. setupPlayer() initialises and configures the Player. loadAndPlayVideo() starts the playback of the chosen stream.
adaptDashjs.js
adaptSagemcom.js
adaptTizenAVPlayer.js

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 Connected TV.

Smart TV

We recommend you complete the integration of TVDemo for Browsers before taking steps to move that working solution to Smart TVs. You 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 supports 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. Although the models supporting this are considered Tizen TVs, the Tizen tools are not applicable in this mode, requiring a different set of tools.