Migrating Tizen to TOAST

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

---

Related Info

• toast.Media Constructor
• toast.MediaPlugin Constructor
• TOAST Wiki

---

Samples

• TOAST

---

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.

   ImportantThe Tizen "config.xml" file is not compatible with TOAST.

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>
      

      NoteThe "cordova.js" library must be included before the "toast.js" library.

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