Arc XP Video Reference App for Tizen

The Arc XP Video Reference App for Tizen

The Arc Video Reference App is a reference app we built and tested to help you more efficiently create your own Samsung Tizen Smart TV application that allows for the streaming of video content.

We’re delivering a set of HTML and Javascript source files for the Tizen Reference App. You can customize the reference app itself, or reuse bits of the code in your own Tizen apps. Since the core of the Reference App is our existing web player, all the existing documentation for the web player still applies as well.

Reference app features

The Arc Video Reference App for Tizen supports most features of our Video SDKs and web player:

Adaptive-bitrate delivery
Live Streams
VOD
Playlists
Simple integration with Arc’s Video API
Open Measurement Certification for mid-roll ads
Server-side inserted mid-roll ads
Support for embedded and sidecar closed captions
Geographic restrictions
Event tracking for custom analytics
Prebuilt analytics packages:
Customizable look and feel
Remote control support
TV-based UI elements

Prerequisites

Have Tizen Studio Downloaded and installed
Samsung Tizen Smart TV set to Developer mode
Development environment connected to a Samsung Tizen Smart TV
A provisioned Video Center Player

Getting started (setup)

Start a new Tizen Studio project
Choose Template project
Choose TV
Choose Web Application (leave unchecked)
Choose Basic Project
Project Name (fill-in whatever you prefer)
Finish
The Tizen Editor window should load automatically
Not required to change any Settings
Start building

Replace the below will provide a reference app that we built as a base for you to start:

Replace index.html

     <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="PoWa Player on Tizen SmartTV"/>
    <title>PoWa on Tizen</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script></script>
    <script>.video-player.arcpublishing.com/<env>/powaBoot.js"></script>
  </head>
  <body>
    <div
      class="powa"
      id="powa-player"
      data-org="<org>"
      data-uuid="<UUID>"
      data-autoplay="true">
    </div>
  </body>
</html>

Replace <org> with your organization’s org ID. Replace <UUID> with the UUID of the live stream you would like to test. Replace <env> with the appropriate environment (prod or sandbox).

Note: currently the only environment supporting modifications for the Tizen platform is tizen. i.e. You should not yet point to the prod or sandbox environments but, rather,tizen.

Replace main.js

     const styleDefaults = {
  zIndex: 100,
  position: 'absolute',
  top: '20px',
  left: '20px',
  color: 'cornflowerblue',
  fontSize: '24px',
  textShadow: '0px 0px 3px rgba(237,188,100)',
  display: 'flex',
  flexDirection: 'column',
};

const forEach = (obj, iteratee) => {
  for (let key in obj) {
    iteratee(obj[key], key, obj);
  }
};

const createElement = (style = {}, type = 'div') => {
  const el = document.createElement(type);
  forEach(style, (value, attr) => el.style[attr] = value);
  return el;
}

const meta = createElement(Object.assign({}, styleDefaults, {
  top: '20px',
  left: '20px',
}));

const track = createElement(Object.assign({}, styleDefaults, {
  right: '20px',
  flexDirection: 'column-reverse',
  alignItems: 'flex-end',
}));

const log = (el, message) => {
  const entry = document.createElement('div');
  entry.innerHTML = message;
  el.append(entry);
};

const logObj = (el, obj) => {
  forEach(obj, (val, key) => {
    log(el, `${ key }: ${ val }`);
  });

  log(el, '-=-=-=-=-=-=-=-');
};

window.addEventListener('powaReady', ({detail: {id, powa}}) => {
  powa.getElement().append(meta);
  powa.getElement().append(track);

  const logMeta = () => {
    const mtSession = powas[id].powaTrack.find(event => event.event === 'mtSession');

    meta.innerHTML = '';

    log(meta, PoWa.BUILD);
    log(meta, `CC: ${ tizen.tvinfo.getCaptionValue('CAPTION_ONOFF_KEY') === 'CAPTION_ON' }`);
    log(meta, `Muted: ${ tizen.tvaudiocontrol.isMute() }`);
    log(meta, `Volume: ${ tizen.tvaudiocontrol.getVolume() }`);
    log(meta, `PoWa Muted: ${ powa.muted() }`);
    log(meta, `PoWa Volume: ${ powa.volume() }`);
    log(meta, `mtID: ${ mtSession.data.mtID }`);
    log(meta, `UUID: ${ powa.getDataset().uuid }`);
  };

  const logError = (event) => log(track, `${ event.type }: ${ event.mediaError || event.message || event.error || 'ERROR' }`);

  // initial display of metadata
  logMeta();

  // update metadata on volume change
  tizen.tvaudiocontrol.setVolumeChangeListener(logMeta);

  // update metadata on Caption state change
  tizen.tvinfo.addCaptionValueChangeListener('CAPTION_ONOFF_KEY', logMeta);

  // log powa events that have happened so far to the screen
  powas[id].powaTrack
  .map(event => event.data || {type: event.event})
  .forEach(event => {
    if (['adError', 'error', 'powaError'].includes(event.type)) logError(event);
    else log(track, `${ event.type }`);
  });

  log(track, '-=-=-=-=-=-=-=-');

  // listen for all ('*') PoWa events
  powa.on('*', event => {
    switch(event.type) {
      case 'adError':
        logError(event);
        break;

      case 'adMute':
        // Tizen does not support a 'muted' listener
        // PoWa reports 'adMute' during ads
        logMeta();
        log(track, `adMute: ${ event.muted }`);
        break;

      case 'adTime': break;

      case 'error':
        logError(event);
        break;

      case 'meta': break;

      case 'muted':
        // Tizen does not support a 'muted' listener
        logMeta();
        log(track, `muted: ${ event.muted }`);
        break;

      case 'powaError':
        logError(event);
        break;

      case 'time': break;

      default: log(track, event.type);
    }
  });

  // listen for remote control events
  document.addEventListener('keydown', event => {
    switch(event.keyCode) {
      case 37:
        log(track, 'Remote: LEFT');
        powa.jump(-10);
        break;
      case 38:
        log(track, 'Remote: UP');
        break;
      case 39:
        log(track, 'Remote: RIGHT');
        powa.jump(15);
        break;
      case 40:
        log(track, 'Remote: DOWN');
        break;
      case 13:
        log(track, 'Remote: OK');
        powa.togglePlay();
        break;
      case 10009:
        log(track, 'Remote: RETURN');
        tizen.application.getCurrentApplication().exit();
        break;
      default:
        log(track, `Remote: ${ event.keyCode }`);
        break;
    }
  });
});

Replace style.css
```
     body {
  margin: 0;
  padding: 0;
}
```
Connect the development machine to a Samsung Tizen Smart TV (if not connected you will be running the build on Tizen simulator)
Right-click on your project > Run as > Tizen Web Application
You should see the Arc Video reference app load on the connected TV

Voila! Now you have successfully built a Samsung Tizen Smart TV application for streaming videos using the Arc Video reference app. Moving forward you can further customize the experience for your brand and your users.