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:
-
Remove the existing "config.xml" file from the application.
ImportantThe Tizen "config.xml" file is not compatible with TOAST. -
Create a TOAST application, using the existing Tizen project as a template.
Use thecreate
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
-
Make modifications to the code to use the TOAST API functionalities in the migrated application:
-
Remove the following code from the "index.html" file:
<script type="text/javascript" src="$WEBAPIS/webapis/webapis.js"></script>
-
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. -
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"); }
-
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.
-
-
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.
setScreenSaver()
method of the AVPlay API.-
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();
- Before:
-
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
- Before:
-
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 thetoast.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();
- Before:
-
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);
- Before: