Migrating Legacy Platform to TOAST

This topic describes how to convert applications from Samsung Legacy Platform to TOAST.

Related Info

Samples

TOAST

To migrate an application from Samsung Legacy Platform to TOAST, you must create a TOAST application using the Samsung Legacy Platform application as a template, and make the necessary changes in the code.

Some Samsung Legacy Platform APIs do not have a TOAST equivalent. To detect when the application is run on a Samsung TV and can use Samsung Legacy Platform-specific APIs, see How to detect platform.

Creating a TOAST Application

To migrate a Samsung Legacy Platform application to TOAST:

Remove the existing "config.xml" file from the application.

ImportantThe Samsung Legacy Platform "config.xml" file is not compatible with TOAST.
Configure the development environment.

Create a TOAST application, using the existing Samsung Legacy Platform project as a template.

Use the create command with the --template flag:

# Create TOASTApp cordova application using your Legacy project
cordova create MyTOASTApp --template=../../MyLegacyApp
cd MyTOASTApp 
npm install ../grunt-cordova-sectv
cp -rf ../grunt-cordova-sectv/sample/* ./
npm install
cordova platform add browser
cordova plugin add ../cordova-plugin-toast

# Run on browser platform
cordova build browser
cordova emulate browser

# Prepare for sectv-orsay platform
grunt sectv-prepare:sectv-orsay

# Prepare for sectv-tizen platform
grunt sectv-prepare:sectv-tizen

Make modifications to the code to use the TOAST API functionalities in the migrated application:
1. Include the "cordova.js" and "toast.js" libraries in the "index.html" file:
```
<script src="cordova.js"></script>
<script src="toast.js"></script> 
```
  NoteThe "cordova.js" library must be included before the "toast.js" library.
2. Before using the TOAST APIs, you must wait until Cordova is fully set up (the deviceready event occurs):
```
document.addEventListener("deviceready", onDeviceReady, false); 
function onDeviceReady() { 
  console.log("start the app"); 
} 
```
3. Migrate functionality from Samsung Legacy Platform API modules.
  
  The following section presents examples of how to migrate media playback functionalities to TOAST. For information on how to migrate functionality from other Samsung Legacy Platform API modules, see the TOAST Wiki.
  
  NoteYou must also make sure to migrate deprecated Samsung Legacy Platform code to HTML5- and W3C-standard code. For more information, see Migrating Legacy Platform to Tizen.
When you are ready to test the TOAST application, build and package it.

Migrating Media Playback Features

In TOAST, media playback functionalities are handled using the toast.Media and toast.MediaPlugin constructors.

NoteTOAST automatically manages the screensaver. It does not need to be explicitly managed, such as with the setScreenSaver() method.

To start media playback:

Before:

/* plugin */
var pluginVideoObj = document.getElementById('pluginPlayer');
var top = 0;
var left = 0;
var width = 100;
var height = 100;
pluginVideoObj.SetDisplayArea(top, left, width, height);
pluginVideoObj.Play('url');

/* SEF */
var sef = document.getElementById('sef');
var top = 0;
var left = 0;
var width = 100;
var height = 100;
sef.Open('Player', '1.0', 'Player');
sef.Execute('InitPlayer', url);
sef.Execute('SetDisplayArea', top, left, width, height);
sef.Execute('StartPlayback', 0); // Seconds at which playback starts

/* webapis */
webapis.avplay.getAVPlay(successCB, errorCB);

function successCB(webapisVideoObj) {
  var options = {
    displayRect: { // SRect instance [init()]
      top: 0,
      left : 0,
      width : 100,
      height : 100
    }
  };

  webapisVideoObj.init(options);
  webapisVideoObj.open('url');
  webapisVideoObj.play(successCallback, errorCallback, 0);
  // Seconds at which playback starts
}

After:

var media = toast.Media.getInstance();
media.open('url');

var elContainer = media.getContainerElement();
elContainer.style.position = 'fixed';
elContainer.style.left = 0 + 'px';
elContainer.style.top = 0 + 'px';
elContainer.style.width = 100 + 'px';
elContainer.style.height = 100 + 'px';
document.body.appendChild(elContainer);

media.play();

To stop media playback:

Before:

/* plugin */
pluginVideoObj.Stop();

/* SEF */
sef.Execute('Stop');

/* webapis */
webapisVideoObj.stop();

After:
```
media.stop();
```

To pause media playback:

Before:

/* plugin */
pluginVideoObj.Pause();

/* SEF */
sef.Execute('Pause');

/* webapis */
webapisVideoObj.pause();

After:
```
media.pause();
```

To jump forward during media playback:

Before:

/* plugin */
pluginVideoObj.JumpForward(10); // Number of seconds to move forward

/* SEF */
sef.Execute('JumpForward', 10); // Number of seconds to move forward

/* webapis */
webapisVideoObj.jumpForward(10); // Number of seconds to move forward

After:

var curPos = media.getCurrentPosition();
media.seekTo(curPos + 10000);   // Position to seek to in milliseconds

To jump backward during media playback:

Before:

/* plugin */
pluginVideoObj.JumpBackward(10); // Number of seconds to move backward

/* SEF */
sef.Execute('JumpBackward', 10); // Number of seconds to move backward

/* webapis */
webapisVideoObj.jumpBackward(10); // Number of seconds to move backward

After:

var curPos = media.getCurrentPosition();
media.seekTo(curPos - 10000);   // Position to seek to in milliseconds

To implement event listeners:

Before:

/* plugin */
pluginVideoObj.OnCurrentPlayTime = Player.OnCurrentPlayTime;
pluginVideoObj.OnBufferingStart = Player.OnBufferingStart;
pluginVideoObj.OnBufferingComplete = Player.OnBufferingComplete;
pluginVideoObj.OnRenderingComplete = Player.OnRenderingComplete;     
pluginVideoObj.OnConnectionFailed = Player.OnConnectionFailed;

/* SEF */
VideoElem.OnEvent = function (event1,data1,data2) {
  switch (event1) {
    webapis.avplay.CURRENT_PLAYBACK_TIME :
      break;
    webapis.avplay.BUFFERING_START :
      break;
    webapis.avplay.BUFFERING_COMPLETE :
      break;            
    webapis.avplay.RENDERING_COMPLETE :
      break;
    webapis.avplay.CONNECTION_FAILED :
      break;
  }
}

/* webapi */
webapis.avplay.getAVPlay(successCB, errorCB);

function successCB(webapisVideoObj) {
  var options = {
    bufferingCallback: {
      onbufferingstart : onBufferingStart,
      onbufferingprogress : onBufferingProgress,
      onbufferingcomplete : onBufferingComplete
    },
    playCallback: {
      oncurrentplaytime : onCurrentPlayTime,
      onresolutionchanged : onResolutionChange,
      onstreamcompleted : onStreamComplete,
      onerror : onRederingError
    }
  };
  webapisVideoObj.init(options);
  ...
}

After:

media.setListener({
  onevent: function(evt) {
    switch (evt.type) {
      case "STATE":
        console.log("Media State changed: " + evt.data.oldState + " -> " + evt.data.state);
        break;
      case "DURATION":
        console.log("Media duration updated: " + evt.data.duration + "ms");
        break;
      case "POSITION":
        console.log("Media position updated: " + evt.data.position + "ms");
        break;
      case "BUFFERINGPROGRESS":
        console.log("Media buffering in progress: " + evt.data.bufferingPercentage + "%");
        if (evt.data.bufferingPercentage >= 100) {
          console.log("Buffering completed");
        }
        break;
      case "ENDED":
        console.log("Media ended");
        break;
    }
  },
  onerror: function(err) {
    console.error("MediaError occured: " + JSON.stringify(err));
  }
});

To play streaming, 4K, and DRM-enabled content, the toast.MediaPlugin constructor binds to the toast.Media constructor with specific configuration data. For example:

  var media= toast.Media.getInstance();
  var mediaPlugin = new toast.MediaPluginHLS();
  media.resetPlugin();
  media.attachPlugin(mediaPlugin);
  media.open('http://mydomain.com/video.m3u8');

To play HTTP Live Streaming (HLS) content:

Before:

/* plugin */
pluginVideoObj.Play('url|BITRATES=yourBitRates|STARTBITRATE=yourStartBitRate|SKIPBITRATE=yourSkipBitRate|COMPONENT=HLS');

/* SEF */
sef.Execute('InitPlayer', url|BITRATES=yourBitRates|STARTBITRATE=yourStartBitRate|SKIPBITRATE=yourSkipBitRate|COMPONENT=HLS);

/* webapis */    
webapis.avplay.getAVPlay(successCB, errorCB);

function successCB(webapisVideoObj) {
  webapisVideoObj.init();
  webapisVideoObj.open("url", {
    adaptive : {
      type : 'HLS',
    }
  });
  webapisVideoObj.play(successCallback, errorCallback, 0);
  // Seconds at which playback starts
}

After:

var HLSData = {
  BITRATES : 'yourBitRates',
  STARTBITRATE : "yourStartBitRate",
  SKIPBITRATE : "yourSkipBitRate"
};
var mediaPlugin = new toast.MediaPluginHLS(HLSData);

To play 4K (UHD) video:

Before:

/* SEF */
sef.Execute('InitPlayer', 'url');
sef.Execute('SetUHDResolution', true);
sef.Execute('StartPlayback', 0); // Seconds at which playback starts

/* webapis */
webapis.avplay.getAVPlay(successCB, errorCB);

function successCB(webapisVideoObj) {
  webapisVideoObj.init();
  webapisVideoObj.open('url');
  webapisVideoObj.setUHDResolution(true);
  webapisVideoObj.play(successCallback, errorCallback, 0);
  // Seconds at which playback starts
}

After:

var mediaPlugin = new toast.MediaPluginUHD();

To play content with Widevine DRM:

Before:

/* plugin */
pluginVideoObj.Play('url|DEVICE_ID=myDeviceId|DEVICET_TYPE_ID=myDeviceTypeId|STREAM_ID=myStreamId|DRM_URL=http://yourDrmUrl.com|I_SEEK=yourI\_SEEK|CUR_TIME=yourCurTime|PORTAL=yourPortal|USER_DATA=yourUserData|COMPONENT=WV');

/* SEF */
sef.Execute('InitPlayer', 'url|DEVICE_ID=myDeviceId|DEVICET_TYPE_ID=myDeviceTypeId|STREAM_ID=myStreamId|DRM_URL=http://yourDrmUrl.com|I_SEEK=yourI\_SEEK|CUR_TIME=yourCurTime|PORTAL=yourPortal|USER_DATA=yourUserData|COMPONENT=WV');

/* webapis */    
webapis.avplay.getAVPlay(successCB, errorCB);

function successCB(webapisVideoObj) {
  webapisVideoObj.init();
  webapisVideoObj.open('url', {
    adaptive : {
      type : 'WV',
    }
  });
  webapisVideoObj.play(successCallback, errorCallback, 0);
  // Seconds at which playback starts
}

After:

var wideVineData = {
  DEVICE_ID : 'yourDeviceId', 
  DEVICET_TYPE_ID : 'yourDeviceTypeId', // for example, '60'
  STREAM_ID : 'yourStreamId',
  DRM_URL : 'http://yourDrmUrl.com',
  I_SEEK : 'yourI\_SEEK', // for example, 'TIME'
  CUR_TIME : 'yourCurTime', // for example, 'PTS'
  PORTAL : 'yourPortal',
  USER_DATA : 'yourUserData',
};
var mediaPlugin = new toast.MediaPluginWideVine(wideVineData);
media.attachPlugin(mediaPlugin);

// Widevine data must be set before calling the "open()" method
media.open('url');

To play content with PlayReady DRM:

Before:

/* plugin */
var PROPERTY_TYPE_PLAY_READY_CUSTOM_DATA = 3;
var PROPERTY_TYPE_PLAY_READY_LICENSE_SERVER = 4;
pluginVideoObj.SetPlayerProperty(PROPERTY_TYPE_PLAY_READY_CUSTOM_DATA, myCustomData, myCustomData.length);
pluginVideoObj.SetPlayerProperty(PROPERTY_TYPE_PLAY_READY_LICENSE_SERVER , myLicenseServer, myLicenseServer.length);

/* SEF */
var PROPERTY_TYPE_PLAY_READY_CUSTOM_DATA = 3;
var PROPERTY_TYPE_PLAY_READY_LICENSE_SERVER = 4;
sef.Execute('InitPlayer', 'url');
sef.Execute('SetPlayerProperty', PROPERTY_TYPE_PLAY_READY_CUSTOM_DATA, myCustomData, myCustomData.length);
sef.Execute('SetPlayerProperty', PROPERTY_TYPE_PLAY_READY_LICENSE_SERVER, myLicenseServer, myLicenseServer.length);
sef.Execute('playbackstart');

/* webapis */
webapis.avplay.getAVPlay(successCB, errorCB);

function successCB(webapisVideoObj) {
  webapisVideoObj.init();
  webapisVideoObj.open('url', {
    HEVC : {
      'customData' : myCustomData, 
      'licenseURL' : myLicenseServer
    }
  });
  webapisVideoObj.play(successCallback, errorCallback, 0);
  // Seconds at which playback starts
}

After:

var playReadyData = {
  LicenseServer  : 'myLicenseServer',
  CustomData  : 'myCustomData'
};
var mediaPlugin = new toast.MediaPluginPlayReady(playReadyData);