top

Migrating Legacy Platform to TOAST

This topic describes how to convert applications from Samsung Legacy Platform to 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:

  1. Remove the existing “config.xml” file from the application.

    Important

    The Samsung Legacy Platform “config.xml” file is not compatible with TOAST.

  2. Configure the development environment.

  3. 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
    
  4. Make modifications to the code to use the TOAST API functionalities in the migrated application:
    a. Include the “cordova.js” and “toast.js” libraries in the “index.html” file:

    <script src="cordova.js"></script>
    <script src="toast.js"></script> 
    
    Note

    The “cordova.js” library must be included before the “toast.js” library.

    b. 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"); 
    } 
    

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

    Note

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

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

Note

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