This topic describes how to convert applications from Tizen to 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.
To migrate a Tizen application to TOAST:
The Tizen "config.xml" file is not compatible with TOAST.
Configure the development environment.
Create a TOAST application, using the existing Tizen project as a template. Use the create command with the --template flag:
create
--template
# 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>
The "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):
deviceready
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.
In TOAST, media playback functionalities are handled using the toast.Media and toast.MediaPlugin constructors.
TOAST automatically manages the screensaver. It does not need to be explicitly managed, such as with the setScreenSaver() method of the AVPlay API.
setScreenSaver()
To open media for playback:
Before:
webapis.avplay.open('url');
After:
var media = toast.Media.getInstance(); media.open('url');
To start media playback:
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() {});
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:
webapis.avplay.stop(); var status = webapis.appcommon.AppCommonScreenSaverState.SCREEN_SAVER_ON; webapis.appcommon.setScreenSaver(status, function() {}, function() {});
media.stop();
To pause media playback:
webapis.avplay.pause(); var status = webapis.appcommon.AppCommonScreenSaverState.SCREEN_SAVER_ON; webapis.appcommon.setScreenSaver(status, function() {}, function() {});
media.pause();
To jump forward during media playback:
webapis.avplay.jumpForward(10000); // Number of milliseconds to move forward
var curPos = media.getCurrentPosition(); media.seekTo(curPos + 10000); // Position to seek to in milliseconds
To jump backward during media playback:
webapis.avplay.jumpBackward(10000); // Number of milliseconds to move backward
var curPos = media.getCurrentPosition(); media.seekTo(curPos - 10000); // Position to seek to in milliseconds
To implement event listeners:
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);
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:
toast.MediaPlugin
toast.Media
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:
webapis.avplay.setStreamingProperty('ADAPTIVE_INFO', 'BITRATES=yourBitRates|STARTBITRATE=yourStartBitRate|SKIPBITRATE=yourSkipBitRate');
var HLSData = { BITRATES : 'yourBitRates', STARTBITRATE : 'yourStartBitRate', SKIPBITRATE : 'yourSkipBitRate' }; var mediaPlugin = new toast.MediaPluginHLS(HLSData);
To play 4K (UHD) video:
webapis.avplay.setStreamingProperty('SET_MODE_4K', 'TRUE');
var mediaPlugin = new toast.MediaPluginUHD();
To play content with Widevine DRM:
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();
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:
var playReadyData = { LicenseServer : 'myLicenseServer', CustomData : 'myCustomData' }; webapis.avplay.setDrm('PLAYREADY', 'SetProperties', JSON.stringify(playReadyData));
var playReadyData = { LicenseServer : 'myLicenseServer', CustomData : 'myCustomData' }; var mediaPlugin = new toast.MediaPluginPlayReady(playReadyData);