[2011][sdk2.0]flash video tutorial[v.100]

@Samsung Electronics Copyright All Rights Reserved 1

Flash Video App Creation Tutorial

[SDK 2.0]

Year 2011

Version 1.00

Samsung Smart TV



1. Overview ................................................................................................................................... 4

2. Introduction ................................................................................................................................ 5

2.1 Development environment .......................................................................................................... 5

2.2 How to Setup Flash Media Server .................................................................................................. 5

2.3 Files needed for a Flash Player App ................................................................................................ 6

3. Overall structure .......................................................................................................................... 7

3.1 The App‟s design ..................................................................................................................... 7

App project components description ................................................................................................... 7

3.2 App project directory structure ...................................................................................................... 8

4. App Creation .............................................................................................................................. 9

4.1 Stage 1 - Creating the Basic App ................................................................................................... 9

4.2 Stage 2 - Creating the Flash Player Applet ....................................................................................... 15

4.3 Stage 3 – Accessing Flash Player from the JavaScript .......................................................................... 21

5. Concluding remarks ..................................................................................................................... 25



Preface

Purpose of Document

This document is a tutorial that is aimed at App developers for Samsung Smart TV, and is written to help developers

understand how to use the Adobe Flash Player features of the Samsung App service. These features are needed to create VOD

(Video on Demand) Apps based on RTMP and RTMPe protocols. It is recommended that you read “Development Guide for

Samsung Smart TV” (hereinafter referred to as "the Guide") first. This document provides references to the Guide tutorial for

your understanding.

Target Readers

This document is aimed at programmers who have used web development languages such as HTML, CSS, JavaScript and

ActionScript, and will be even more helpful for those who have web development experience. This document has been written

on the assumption that readers have already read the Guide tutorial.



1. Overview

This tutorial will go step by step through the development of a App that features video playback over the RTMP and RTMPe

protocols. The main goal for this tutorial is to present basic ideas in clear and possibly simple way. It focuses on providing

basic code that needs to take place in any App application that uses Adobe Flash Player as well as brief description of using

streaming media over the RTMP/RTMPe protocols. The FMS (Flash Media Server) installation and configuration won‟t be

discussed in here. It‟s been assumed that the complete environment have been set up and only the FMS instance address and

video media file name need to be provided. At the time of writing the Samsung Smart TV engine is supporting version 8 of the

Adobe Flash Player. The player however has been extended with RTMP and RTMPe as well as with h.264 video codec. The

RTMPe implementation with its streaming data encryption capability is especially interesting since it enables Content

Providers to build VOD applications.



2. Introduction

In order to develop the Adobe Flash Player App, developers are required to have background knowledge such as HTML,

JavaScript, ActionScript and CSS. In general, there will be no explanation about HTML, JavaScript, ActionScript or CSS

provided in this document. However some aspects including cooperation between JavaScript and ActionScript will be

discussed as they are crucial for good understanding of the idea. Developing Apps suited for TVs is different from developing

Apps on PCs in several aspects. You can get more information on this from the Guide.

2.1 Development environment

You are going to use the Samsung Smart TV SDK ("SWDK") version 1.100 made by Samsung to create your App. With use of

the emulator provided with the SWDK, you can operate your App before actually putting it in your TV.

It is also possible to run the App on a TV using the "User App" feature. For details of this process please see the document

"User App for Samsung Apps Into a TV Set". Please note that the performance of the video playback may be better when using

the TV than when using the emulator. Therefore uploading to a TV is recommended as a test method.

2.2 How to Setup Flash Media Server

0. Why you have to install Adobe Flash Media Server

In order to develop a Flash VoD App with RTMP(RTMPE), you need to have Adobe Flash Media Server, which can provide

progressive download services and streaming services with RTMP(RTMPE) for Flash Player. Especially, RTMPE is the

encrypted RTMP protocol for securing the stream data between clients and a server. For more details of Flash Media Server,

please visite the Adobe website (http://www.adobe.com).

http://www.adobe.com/



1. How to download Adobe Flash Media Server

You can download a trial copy of Adobe Flash Media Server from the Adobe website

(http://www.adobe.com/downloads/). If you have an Adobe membership, it‟s free, you can have access to trial

downloads and special community areas.

2. How to install Adobe Flash Media Server

To install and get started Adobe Flash Media Server, you can use the online documentation, Adobe Flash Media

Server Installation Guide. This manual explains information about system requirements, installing, upgrading,

getting started streaming media and so on. see

http://www.adobe.com/livedocs/flashmediaserver/3.0/docs/help.html?content=08_xmlref_031.html.

2.3 Files needed for a Flash Player App

You will be provided with sample modules code and images. Unzip the zip files, and refer to section 0 to locate them in the

appropriate places.

Please note that this tutorial does not supply video files for playback for copyright reasons. At the time of writing (January

2010) it is recommended that FLV format video is used. The video file has to be put on the Flash Media Server instance

accessible from the TV set device.

RTMP Playback Sample

RTMP_Playback_Sample.zip

http://www.adobe.com/downloads/

http://www.adobe.com/livedocs/flashmediaserver/3.0/docs/help.html?content=08_xmlref_031.html



3. Overall structure

In this section, we‟re going to examine the structure of the App that we will create.

3.1 The App’s design

Our Flash Player App will be composed of the following parts:

1. JavaScript based application:

a. Main module with the basic players functionality

b. Utils module containing library of reusable functionalities.

2. ActionScript based application:

a. RTMP_Playback.swf file - generated by the Flash application and played by Flash Player.

b. RTMP_Playback.fla file – contains ActionScript code to control the playback.

App project components description

Component Description

Main Object handling all playback related functions

Utils Object handling auxiliary functions

Common.API.TVKeyValue Remote control key codes wrapper class

Common.API.Widget Widget API class, in this tutorial we will use Player plugin functions



3.2 App project directory structure

The following picture presents the App project directory structure:

Directory Description

RTMP_Playback_Sample The main folder of the App. It contains the index.html, config.xml and RTMP_Playback

fla and swf files.

fplayer Parent directory for all the App‟s subdirectories

scripts Directory containing main.js, utils.js javascript files.

styles Directory with fplayer.css cascade style sheet

images Directory containing all the bitmap images used by App



4. App Creation

This section will briefly show the initial configuration of the App. It assumes that basic App creation is already understood by

the reader. For more detail on this part, please see the Guide tutorial.

4.1 Stage 1 - Creating the Basic App

Start the SWDK for Samsung TV Apps. Create a new App using the following config.xml file:

<?xml version="1.0"?>

<widget>

<widgetname>Flash VoD Widget</widgetname>

<type>user</type>

<fullwidget>y</fullwidget>

<category>video</category>

<ver>106</ver>

<ThumbIcon>fplayer/images/icons/fplayer_106.png</ThumbIcon>

<BigThumbIcon>fplayer/images/icons/fplayer_115.png</BigThumbIcon>

<ListIcon>fplayer/images/icons/fplayer_85.png</ListIcon>

<BigListIcon>fplayer/images/icons/fplayer_95.png</BigListIcon>

<description>

The Adobe Flash Player RTMPe Test Widget

</description>

<width>960</width>

<height>540</height>

<author>

<name>Pawel Buczynski, Wojciech Deneka</name>

<email></email>

<link>http://www.rd.samsung.pl</link>

<organization>Samsung Electronics Poland R&D Center</organization>

</author>

</widget>

Please note the following settings that we have used:

<fullwidget>y</fullwidget> - this means that the App will run in full screen mode. This affects what keys are

registered by default.

<type>user</type> - this enables the user App feature for testing on a real TV set. This tag has no effect on the

emulator.

<category>video</category> - tells the App manager to keep the App in video category and display video category

icon in App listings.

Add a file index.html as follows:

<html>

<head>



<script language="javascript" type="text/javascript" src="$MANAGER_WIDGET/Common/API/Widget.js">

</script>

<script language="javascript" type="text/javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js">

</script>



<script language="javascript" type="text/javascript" src="fplayer/scripts/main.js">

</script>

<script language="javascript" type="text/javascript" src="fplayer/scripts/utils.js">

</script>

<link rel="stylesheet" href="fplayer/styles/fplayer.css" type="text/css">



<object id="pluginTVMW" border=0 classid="clsid:SAMSUNG-INFOLINK-TVMW">

</object>

<object id="pluginAudio" classid="clsid:SAMSUNG-INFOLINK-AUDIO">

</object>

<object type="application/x-shockwave-flash" id="flvplayer" class="fullscreen">

<param name="movie" value="RTMP_Playback.swf">

<param name="quality" value="high">

<param name="bgcolor" value="black">

</object>

</head>

<body id="fplayerBody" >

<div id="container" class="widget">

<div id="statusPad" style="position: absolute;top: 20;left: 20;width: 250px;padding: 0px;height: 400px;color: #444;font-size: 14px;"></div>



<div id="ctrlPad">

<div id="btnBar">

<img id="rewBtn" class="ctrlBtn" src="fplayer/images/btn/rew.png">

<img id="stopBtn" class="ctrlBtn" src="fplayer/images/btn/stop.png">

<img id="playBtn" class="ctrlBtn" src="fplayer/images/btn/play.png">

<img id="pauseBtn" class="ctrlBtn" src="fplayer/images/btn/pause.png">

<img id="fwdBtn" class="ctrlBtn" src="fplayer/images/btn/ff.png">

</div>

<div id="volBar">

<img id="volBtn" class="ctrlBtn" src="fplayer/images/btn/vol.png">

<div id="volVal"></div>

</div>

</div>

<div id="nav" class="widget">

<img src="fplayer/images/btn/krew.png"> Rewind

<img src="fplayer/images/btn/kstop.png"> Stop

<img src="fplayer/images/btn/kplay.png"> Play

<img src="fplayer/images/btn/kpause.png"> Pause

<img src="fplayer/images/btn/kfwd.png"> Forward

<img src="fplayer/images/btn/return.png"> Return

</div>

</div>

<body>

</html>



Then add main.js in the „scripts‟ folder, with contents as follows:

var Main =

{

pluginAPI : null,

pluginAudio : null,

player: null,

originalSource: null,

fullScreen: false

}

Main.onLoad = function()

{

Utils.init();

Utils.debug("Main.onLoad");

Utils.widgetAPI.sendReadyEvent();

/* If something went wrong just return to the Widget Manager */

if (!Main.init()) Utils.widgetAPI.sendReturnEvent();

Main.displayVolValue();

//Setting the buttons apparance

$('playBtn').style.opacity = '0.8';

$('stopBtn').style.opacity = '0.5';

$('pauseBtn').style.opacity = '0.5';

}

Main.keyDown = function()

{

//TODO – The content of this function will be provided in another section of this document.

}

//TODO – Here the volume controlling functions will be added.

//TODO – Here the wrapper functions will be added



Main.init = function()

{

var success = true;

Main.pluginAPI = $("pluginTVMW");

Main.pluginAudio = $("pluginAudio");

if (!Main.pluginAPI)

{

success = false;

}

else

{

/* Save current TV Source */

Main.originalSource = Main.pluginAPI.GetSource();

/* Set TV source to media player plugin */

Main.pluginAPI.SetMediaSource();

/* initialize Flash Player Object*/

Main.player = window["flvplayer"];

}

return success;

}

/**

* displays current audio volume value

*/

Main.displayVolValue = function() {

var vol = Main.pluginAudio.GetVolume();

$('volVal').replaceContent(vol);

}



Main.displayMuteStatus = function(muted) {

if(!muted) {

$('volBtn').src='fplayer/images/btn/mute.png';

var vol = Main.pluginAudio.GetVolume();

$('volVal').replaceContent('MUTE');

} else {

$('volBtn').src='fplayer/images/btn/vol.png';


}

}

window.onload = Main.onLoad;

window.onunload = Main.onUnload;

window.onkeydown = Main.keyDown;

As you can see there are two javascript functions that are of the highest importance here. The Main.onLoad() function is called

when the DOM window.onload event appears. First of all, the Main.onLoad event handler sends information to the Samsung

Smart TV that the App is about to start. Next is the Main.init() function call. In it the App sets references to the plugin objects

that are responsible for managing both: the middleware and audio. If the middleware plugin object has been successfully

created then the media source is being changed to the App and the original source is being stored in an auxiliary object. The

original source will be needed during unloading the App simply to restore the video that was previously watched by the user.

The Samsung Smart TV Flash Player implementation is not capable to control sound volume since this task is dedicated to

another plugin which deals with the TV set‟s middleware. The Main.pluginAudio object stores the reference to this plugin and

allows App to manipulate sound by calling SetVolumeWithKey(0) when increase and SetVolumeWithKey(1) when decrease

the volume. This feature will be discussed later in another section of this document. Now, start the SDK emulator. If you see

the message of „alert() : Main.onLoad(),‟ in the log manager, that means you have successfully created the App.



4.2 Stage 2 - Creating the Flash Player Applet

This section will describe how to make a basic ActionScript application that can communicate with a App written in JavaScript.

Since that some practical experience in programming ActionScript with FL Adobe Flash CS 3 (4) development environments is

here mandatory. First, insert the AS code below into the RTMP_Playback.fla (or RTMP_Playback.swf) file opened with the FL

Adobe Flash CS 3 (4) editor.

import flash.external.ExternalInterface;

var flagPause = 0;

var volumeValue = 10;

var my_nc:NetConnection = new NetConnection();

function debug(message)

{

text1.text = text1.text + message + " \n";

text1.scroll = text1.scroll + 1;

} // End of the function

// Create a local streaming connection

my_nc.connect("rtmpe://106.116.10.2/vod");

// Create a NetStream object and define an onStatus() function

var my_ns:NetStream = new NetStream(my_nc);

// Attach the NetStream video feed to the Video object

my_video.attachVideo(my_ns);

// Set the buffer time to two seconds

my_ns.setBufferTime(2);

// Begin playing the FLV file

my_ns.play("theMovieFileName");



// Wire up JS external interface - exposing functions

if(ExternalInterface.available){

info("onLoad: External Interface available, exposing callbacks to enclosing JavaScript");

ExternalInterface.addCallback("VideoPause", null, _externalPause);

ExternalInterface.addCallback("VideoPlay", null, _externalResume);

ExternalInterface.addCallback("VideoSkip", null, _externalSkip);

ExternalInterface.addCallback("VideoStop", null, _externalStop);

}else{

warn("onLoad: External Interface is not available - no methods exposed");

}

/*

* Pause playback

*/

function _externalPause(params:Object) :Void{

if(flagPause == 0)

{

my_ns.pause();

flagPause = 1;

}

}

/**

* Resume playback

*/

function _externalResume(params:Object) :Void{

if(flagPause == 1)

{

my_ns.pause();

flagPause = 0;

}

}

/**

* Seek to the given time offset from the current playheadtime

*/



{

clearInterval(fps_interval);

bar._width = 0;

progresscounter.text = "0:00 / 0:00";

delete this.onStatus;

} // end if

};

my_ns.onMetaData = function (infoObject)

{

movieduration = parseInt(infoObject.duration);

ratio = 800 / movieduration;

};

And define all the functions that stand the interface:

function _externalPause(params)

{

if (flagPause == 0)

{


my_ns.pause();

flagPause = 1;

} // end if


function _externalResume(params)

{

fps_interval = setInterval(_displayFPS, 1000, my_ns);

if (flagPause != 1)

{

my_ns.play(videoname);

}

else

{

my_ns.pause();

flagPause = 0;

} // end else if




function _externalSkip(params)

{

var _loc1 = params;

_updateProgressValue();

my_ns.seek(my_ns.time + _loc1);


function _externalStop(params)

{


if (flagPause == 0)

{

my_ns.pause();

my_ns.seek(0);

flagPause = 1;

}

else

{

my_ns.seek(0);

} // end else if

progresscounter.text = "0:00 / 0:00";


function _updateProgressValue()

{

bar._width = my_ns.time * ratio;


function _displayFPS(ns)

{

_updateProgressValue();

progresscounter.text = "Now playing: " + url + "/" + videoname + " " +

_convertPlaybackTime(my_ns.time / movieduration * movieduration) + " / " + _convertPlaybackTime(movieduration);


function _convertPlaybackTime(s)

{

var minDivFactor = 60;



var secDivFactor = 1;

return (Math.floor(s / minDivFactor) + (Math.floor(s % minDivFactor / secDivFactor) > 9 ? (":") : (":0")) + Math.floor(s % minDivFactor /

secDivFactor));


At the very end of the code writing (modification) we can‟t forgot to update the related swf file (here RTMP_Playback.swf) by

selecting „Publish‟ option available in the FL Adobe Flash CS 3 (4) „File‟ menu. That‟s enough to start using the interface from

the JavaScript level of the App. This will be discussed in the next section.

4.3 Stage 3 – Accessing Flash Player from the JavaScript

If you saw the Stage 1 of this tutorial you would notice that we‟ve already declared the onkeydown event handler function

named Main.keyDown(). But till now the function‟s body was empty. After finishing the Flash Player part we are ready to

implement all the event handling procedures we need.

Main.keyDown = function()

{

var keyCode = event.keyCode;

Utils.debug("Key pressed: " + keyCode);

switch(keyCode)

{

case Utils.key.KEY_PLAY:

Utils.debug("KEY PLAY");

Main.play();

break;

case Utils.key.KEY_PAUSE:

Utils.debug("KEY PAUSE");

Main.pause();

break;

case Utils.key.KEY_STOP:

Utils.debug("KEY STOP");

Main.stop();

break;

case Utils.key.KEY_FF:

Utils.debug("KEY FF");

Main.skip(10);



break;

case Utils.key.KEY_RW:

Utils.debug("KEY RW");

Main.skip(-10);

break;

case Utils.key.KEY_VOL_UP:

Utils.debug("KEY VOL UP");

Main.volUp();

break;

case Utils.key.KEY_VOL_DOWN:

Utils.debug("KEY VOL DOWN");

Main.volDown();

break;

case Utils.key.KEY_MUTE: // MUTE key

Utils.debug('handleKey MUTE');

Main.toggleMuteVol();

break;

case Utils.key.KEY_RETURN: // RETURN key

Utils.debug('handleKey RETURN');

Main.stop();

Utils.widgetAPI.sendReturnEvent();

break;

default:

Utils.debug("Unhandled key");

break;

}

}

The code above needs some comment to be clearly understood. First of all the Main.keyDown() function retrieves the pressed

key value from the global „event‟ object that is provided by the MAPLE browser. All the event.keyCode values are being



compared with the enumeration constants defined in the, common for all the Apps, library file provided by the „tvKey‟ object

which has been defined globally. The object could be created in any place of the code in the following form: var tvKey = new

Common.API.TVKeyValue(). It is true with the assumption that there is an html reference to its source file within the

index.html page. And finally we need the wrapper functions to execute Flash Player‟s commands. To do this we add the

following:

Main.play = function()

{

try {

Utils.debug("playing...: ");

Main.player.play();




} catch (e) {

Utils.debug("Error in Main.play() function: " + e);

}

}

Main.pause = function()

{

try {

Utils.debug("pausing...: ");

Main.player.pause();




} catch (e) {

Utils.debug("Error in Main.pause() function: " + e);

}

}



Main.stop = function()

{

try {

Utils.debug("stopping...: ");

Main.player.stop();




} catch (e) {

Utils.debug("Error in Main.stop() function: " + e);

}

}

Main.skip = function(time)

{

try {

Utils.debug("skip...: " + time + " sec.");

Main.player.skip(time);

} catch (e) {

Utils.debug("Error in Main.skip() function: " + e);

}

}

And that‟s all about the basic playback. We are ready to start the App and see the video. It‟s possible to stop the playback, skip

some scenes by pressing FFW or rewind it with REW, PAUSE and then resume by pressing the PLAY button on the remote

controller. You‟ve probably noticed the $('playBtn') which is an abbreviation of document.getElementById(„playBtn‟). The

$ function definition as well as another auxiliary function have been defined in a separate JS file named utils.js.

The very last thing is adding the volume control to our App. Since the hardware specific of the TV set it had been decided to

not use the Flash Player as the sound volume controller. That‟s why there exists another specialized web browser‟s plugin,

which is responsible for managing audio adjustment tasks. As it was mentioned in the stage one section of this tutorial, we

have to use standard interface functions of the audio plugin like here:

Main.volUp = function()



{

Main.pluginAudio.SetSystemMute(0);

Main.pluginAudio.SetVolumeWithKey(0);


}

Main.volDown = function()

{

Main.pluginAudio.SetSystemMute(0);

Main.pluginAudio.SetVolumeWithKey(1);

Main.displayVolValue()

}

Main.toggleMuteVol = function() {

var muted = Main.pluginAudio.GetSystemMute();

Main.pluginAudio.SetSystemMute(muted?0:1);

Main.displayMuteStatus(muted);

}

From now all the sources are complete. We can start the App on the TV set. Of course first we have to deploy it there but this

topic has been explained in details by the “User App for Samsung Apps

Into a TV Set” tutorial published on www.samsungdforum.com web site and it is beyond the scope of this document.

5. Concluding remarks

This tutorial has explored the main functions of the Flash Player plugin used to play video stream over RTMP/RTMPe. It has

also shown how to control volume using the audio plugin. Other API functions are available from the video and audio plugins,

and it is recommended that you read the full API description for each plugin, which you can find in the Guide.

http://www.samsungdforum.com/

[2011][sdk2.0]flash video tutorial[v.100]

Documents