Migrating Tizen to TOAST

This topic describes how to convert applications from Tizen to TOAST.


Related Info


Samples


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

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

Creating a TOAST Application

To migrate a Tizen application to TOAST:

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

  2. Configure the development environment.

  3. Create a TOAST application, using the existing Tizen project as a template.

    Use the create command with the --template flag:

    # Create TOAST application using an existing Tizen project
    cordova create MyTOASTApp --template=../../MyTizenApp
    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:

    1. Remove the following code from the "index.html" file:

      <script type="text/javascript" src="$WEBAPIS/webapis/webapis.js"></script>
      
    2. Include the "cordova.js" and "toast.js" libraries in the "index.html" file:

      <script src="cordova.js"></script>
      <script src="toast.js"></script>
      
    3. 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");
      }
      
    4. Migrate functionality from Tizen 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 Tizen API modules, see the TOAST Wiki.

  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.

  • To open media for playback:

    • Before:

      webapis.avplay.open('url');
      
    • After:

      var media = toast.Media.getInstance();
      media.open('url');
      
  • To start media playback:

    • Before:

      webapis.avplay.prepare();
      webapis.avplay.setDisplayRect(x, y, width, height);
      webapis.avplay.play();
      var status = webapis.appcommon.AppCommonScreenSaverState.SCREEN_SAVER_OFF;
      webapis.appcommon.setScreenSaver(status, function() {}, function() {});
      
    • After:

      var elContainer = media.getContainerElement();
      elContainer.style.position = 'fixed';
      elContainer.style.left = 0 + 'px'; // 'x'
      elContainer.style.top = 0 + 'px'; // 'y'
      elContainer.style.width = 1920 + 'px'; // 'width'
      elContainer.style.height = 1080 + 'px'; // 'height'
      document.body.appendChild(elContainer);
      
      media.play();
      
  • To stop media playback:

    • Before:

      webapis.avplay.stop();
      var status = webapis.appcommon.AppCommonScreenSaverState.SCREEN_SAVER_ON;
      webapis.appcommon.setScreenSaver(status, function() {}, function() {});
      
    • After:

      media.stop();
      
  • To pause media playback:

    • Before:
      webapis.avplay.pause();
      var status = webapis.appcommon.AppCommonScreenSaverState.SCREEN_SAVER_ON;
      webapis.appcommon.setScreenSaver(status, function() {}, function() {});
      
    • After:
      media.pause();
      
  • To jump forward during media playback:

    • Before:

      webapis.avplay.jumpForward(10000); // Number of milliseconds 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:
      webapis.avplay.jumpBackward(10000); // Number of milliseconds to move backward
      
    • After:
      var curPos = media.getCurrentPosition();
      media.seekTo(curPos - 10000); // Position to seek to in milliseconds
      
  • To implement event listeners:

    • Before:

      var listener = {
        onbufferingstart: function() {
          console.log('Buffering start.');
        },
        onbufferingprogress: function(percent) {
          console.log('Buffering progress data : ' + data1);
        },
        onbufferingcomplete: function() {
          console.log('Buffering complete.');
        },
        oncurrentplaytime: function(currentTime) {
          console.log('Current Playtime : ' + data1);
        },
        onbufferingcomplete: function() {
          console.log('Buffering complete.');
        },
        onevent: function(eventType, eventData) {
          console.log('event type error : ' + eventType + ', data: ' + eventData);
        },
        onerror: function(eventType) {
          console.log('event type error : ' + eventType);
        },
        onsubtitlechange: function(duration, text, data3, data4) {
          console.log('Subtitle Changed.');
        },  
        ondrmevent: function(drmEvent, drmData) {
          console.log('DRM callback: ' + drmEvent + ', data: ' + drmData);
        },
        onstreamcompleted: function() {
          console.log('Stream Completed');
        }
      }
      webapis.avplay.setListener(listener);
      
    • 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:

      webapis.avplay.setStreamingProperty('ADAPTIVE_INFO', 'BITRATES=yourBitRates|STARTBITRATE=yourStartBitRate|SKIPBITRATE=yourSkipBitRate');
      
    • After:

      var HLSData = {
        BITRATES : 'yourBitRates',
        STARTBITRATE : 'yourStartBitRate',
        SKIPBITRATE : 'yourSkipBitRate'
      };
      var mediaPlugin = new toast.MediaPluginHLS(HLSData); 
      
  • To play 4K (UHD) video:

    • Before:
      webapis.avplay.setStreamingProperty('SET_MODE_4K', 'TRUE');
      
    • After:
      var mediaPlugin = new toast.MediaPluginUHD();
      
  • To play content with Widevine DRM:

    • Before:

      webapis.avplay.open('url');
      
      var widevineData = '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'
      webapis.avplay.setStreamingProperty('WIDEVINE', wideVineData);
      
      webapis.avplay.prepare();
      
    • 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:
      var playReadyData = {
        LicenseServer  : 'myLicenseServer',
        CustomData  : 'myCustomData'
      };
      webapis.avplay.setDrm('PLAYREADY', 'SetProperties', JSON.stringify(playReadyData));
      
    • After:
      var playReadyData = {
        LicenseServer  : 'myLicenseServer',
        CustomData  : 'myCustomData'
      };
      var mediaPlugin = new toast.MediaPluginPlayReady(playReadyData);