Publishing to Samsung Smart TVThe TV Ecosystem Monetization. The TV Ecosystem Advertisements. The TV...

Introduction to Smart TV Development

Manikantan K

[email protected]@manikantan_k

Outline • The TV ecosystem

•

•

• CAPH library

• PNaCl for Smart TV

• Multiscreen APIs

• Smart Home APIs

• Smart Interaction

• Monetization

The TV Ecosystem

Devices

The TV Ecosystem

Content

The TV Ecosystem

Monetization

The TV Ecosystem

Advertisements

The TV Ecosystem

Samsung Apps

Developer

Outline The TV ecosystem

•

•

• CAPH library



• Smart Home APIs


• Monetization

What is a Smart TV app ?Smart TV Apps are based on HTML, JS and CSS.

Enhanced Web Kit

Smart Hub

What is a Smart TV app ?3 Types of applications

Basic application

- Created using Visual editor in IDE

Javascript Application

- Written completely in HTML, JS, CSS.

NaCl Application

- Integrate HTML with C/C++.

Web KitSmart Hub

What is a Smart TV app ?

An app is a ZIP package in this format

All meta-data about the app

App content

Web Device APIList of APIs to access low level functionalities of the Smart TV like

• Network capabilities

• TV channels

• Gamepad connectivity

• Camera support

• Microphone

• Filesystem

• Voice recognition

• MIDI etchttp://www.samsungdforum.com/Guide/ref00008/index.html

http://www.samsungdforum.com/Guide/ref00008/index.html


•

• CAPH library



• Smart Home APIs


• Monetization

Smart TV SDK evolution

2.x

• Designed for 2011 Devices ( D Model ) , HTML5/CSS3 Support.

• Maple Web Engine

3.x

• Designed for 2012 Devices ( E Model ) Smart Interaction, In-Apps Ads

• WebKit Web Engine & Convergence support

4.x

• Designed for 2013 Devices ( F Model ) Smart Interaction 2.0 Support

• Eclipse Based IDE (Linux & Mac OS SDK Available)

5.X

• Designed for 2014 Devices ( G Model). SmartHome & Multiscreensupport.

• Improved WebEngine, WebGL and NaCl support.

http://www.samsungdforum.com

http://www.samsungdforum.com/

• Smart Home features

• PNaCl

• Multiscreen SDK

• CAPH library

http://www.samsungdforum.com/Guide/d57/index.html


Improved Web Inspector in SDK v5

Breakpoints, stepping and debugging support

Improved Automatic Test Tool in SDK v5

Create input test sequences, schedule screen captures, record events

Improved HTML5 support

http://www.samsungdforum.com/Guide/art00066/index.html

VID

EO

WEBGL

WEBFONT

WEB WORKERS

XHR2

AUDIO

WEB MESSAGING

CANVAS

WEBSOCKET

FILE

APPLICATION CACHE

GEOLOCATION

FU

LLS

CR

EEN

INDEXED DB

SVGFIL

ESYS

TEM

http://www.samsungdforum.com/Guide/art00066/index.html


• CAPH library



• Smart Home APIs


• Monetization

CAPH library(2014 only)




• Easy to use, made-for-TV UI components

• Uses GPU compositing techniques that enable smooth animation & rendering.

• Works easily with jQuery too.

• Also, provides related Event Handling and Data caching mechanisms.





BU

TTO

N

BOX

GRIDWIDGET

CAROUSEL

INPUTBOX

PANEL

LISTWIDGET

SCENE

PROGRESSBAR

IMAGE

VIEW

SPINNER

IMAG

EG

ALLER

Y

NAVIGATOR




ProgressBar

CarouselNavigator

GridWidget


Gridwidget example

Include CAPH JS & CSS<script src="$CAPH/1.0.0/caph-level1-unified.min.js"></script>

<link href="$CAPH/1.0.0/caph.css" rel="stylesheet" type="text/stylesheet">

Initializevar uiContext = new caph.wui.widget.UIContext ();

var gridWidget = new caph.wui.widget.GridWidget ();

var grid_options = {‘frame’ : { ‘width’ : 1000, ‘height’ : 600, ‘layout’ : { ‘row’ : 2, ‘column’ : 2 },

‘cycle’: false, },‘item’ : { ‘item_width’ : 240, ‘item_height’ : 200, ‘margin’ : ‘10 10’ }

};var p1 = new caph.wui.widget.Panel(); p1.setURL(‘image-URL’); p1.setText(“Item 1”);gridWidget.addItem (p1);

gridWidget.render(uiContext);uiContext.show();


CAPH library



• Smart Home APIs


• Monetization

PNaCl for Smart TV

• PNaCl or Portable Native Client helps you run Native (C/C++) code in your Smart TV web applications.

• Thus, allows you to create smoother and graphic rich applications or games for the TV.

• PNaCl is open sourced by Google.



PNaCl for Smart TV

Smart TV HTML App

Native Client Module

HTML / JSPepper API

PNaCl for Smart TV

• The native code is compiled into the target platform (ARM) into a file with extension (.nexe/.pexe)

• This .nexe file is embed into the HTML, through .nmf or Manifest file.

PNaCl Pepper API

• Pepper APIs allow bi-directional communication between HTML/JS and native module (.nexe).

• Pepper APIs also restrict Native code to web-safe operations only Sandboxing.

Native Client Module HTML / JS

Pepper API

PNaCl benefits

• Graphics, smoother background audio.

• Easy migration from desktop to the TV.

• Use existing C/C++ libraries in web apps.

• Easy to debug use Google Chrome.


CAPH library

PNaCl for Smart TV


• Smart Home APIs


• Monetization

Multiscreen SDK (2014 only)

www.multiscreen.samsung.com

Easily connect your TV apps with Android, iOS or HTML mobile apps.

Download SDKs at

http://www.multiscreen.samsung.com/

Multiscreen SDK

Creates new possibilities and user experiences by connecting mobile and TV.

You can • Bi-directional communication between TV and Mobile

• Control TV apps from Mobile.

• Launch TV apps from the mobile. - available later 2014

• Overlay content from Mobile onto TV. - available later 2014



Flow diagram

Get Current Device

Open Channel

Connect to TV

Connect to Channel

Two way messaging

channel.send(“Hello”, clientID);

channel.sendToHost(“Hello TV”);

channel.on(“message”, function(msg, client) { .. });channel.on(“clientConnect”, function(msg, client) { .. });

public class MyListener implements IChannelListener {public void onClient Message( ChannelClient c, String msg) { }public void onClientConnected(ChannelClient client) {}…}

Why you should think Multiscreen ?

• 85% of Americans use both TV and Mobile simultaneously.

Source : Business Insider

http://www.businessinsider.com/bii-mobile-insights-50-million-shoppers-to-use-smartphones-this-holiday-2012-11


• Multiscreen gaming is also rapidly growing.


• New revenue models possible.

Game is free Charge mobile user if you want to play on TV,and control from phone.


CAPH library

PNaCl for Smart TV

Multiscreen APIs

• Smart Home APIs


• Monetization

Smart Home API (2014 only)

Connect and control Air conditioner, Washing machine etc from the Smart TV.



Smart Home features• Include webapis

<script type="text/javascript" src="$MANAGER_WIDGET/Common/webapi/1.0/webapis.js"></script>

Check for supportif (webapis.smarthome.init() == false) {

alert("Fail to init SmartHome API"); }

var deviceIdList = webapis.smarthome.getDevices();var deviceType = webapis.smarthome.getDeviceType(deviceId);

var success = webapis.smarthome.setDeviceStatus(deviceId, webapis.smarthome.SMART_HOME_CMD.CMD_OPERATION, webapis.smarthome.OPERATION_VALUE.POWER_ON);

setDeviceStatus is currently available only for Air Conditioners


CAPH library

PNaCl for Smart TV

Multiscreen APIs

Smart Home APIs


• Monetization

Smart Interaction

Two hand gestures to pinch/zoom and like, available in 2013 models.Basic voice recognition support and one hand gestures are available in 2012 models

Motion Recognitionhttp://www.samsungdforum.com/Guide/d01/index.html


Single Handed Gestures• You need to include mouse support in

config.xml<mouse>y</mouse>

• Mouse listener like the web.• Create a div in scene1.html<div id="button0">Button</div> <div id="div0“></div> 

• Adding listenerdocument.getElementById('div0').addEventListener('mouseover', function(){

document.getElementById('div0').style.backgroundColor = 'lime';}, false);

document.getElementById('div0').addEventListener('mouseout', function(){document.getElementById('div0').style.backgroundColor = 'yellow';}, false);

document.getElementById('div0').addEventListener('click', function(){alert("clicked");}, false);

Double Handed Gestures• Include webapis


• Usage.• Check for support and enabledif (webapis.recognition.IsRecognitionSupported()) {

if (webapis.recognition.IsGestureRecognitionEnabled()) {// perform Recognition related actions here, e.g. subscribe } else { alert("ERROR: Gesture recognition is not enabled"); }

} else { alert("ERROR: Gesture recognition not supported"); }

Subscribe to eventswebapis.recognition.SubscribeExEvent(webapis.recognition.PL_RECOGNITION_TYPE_GESTURE, “returnID", function (evt) { that.handleRecognitionEvent.call(that, evt); });

EVENT_GESTURE_2HAND_ZOOM , EVENT_GESTURE_2HAND_ROTATE etc

Voice Recognitionhttp://samsungdforum.com/Guide/tut000001/index.html

http://samsungdforum.com/Guide/tut000001/index.html

Voice Recognition• Embedded Mode

Predefined voice commands.The engine does more of comparison than recognitionDoes NOT require internet.Limited to comparing between 7 items.

• Server Guide ModeFree- form speech.Depends heavily on user’s linguistics and pronunciation.Voice Data is sent to internet to recognize user’s speech.No limits.

Voice Recognition• Include webapis and in config.xml


<voice>y</voice> in config.xml

• Check for support and if enableddeviceapis.recognition.IsRecognitionSupported()deviceapis.recognition.IsVoiceRecognitionEnabled()deviceapis.recognition.IsVoiceServerLanguageSupported()

Voice Recognition• Subscribe to Voice Events

deviceapis.recognition.SubscribeExEvent(deviceapis.recognition.PL_RECOGNITION_TYPE_VOICE, "VoiceEvt", Main.onVoiceEvent

);

deviceapis.recognition.UnsubscribeExEvent(deviceapis.recognition.PL_RECOGNITION_TYPE_VOICE, "VoiceEvt”

);

• Handle voice eventsMain.onVoiceEvent = function(evt){

switch (evt.eventtype){case 'EVENT_VOICE_RECOG_RESULT':

alert('The user say ' + evt.result);break;

}};


CAPH library

PNaCl for Smart TV

Multiscreen APIs

Smart Home APIs

Smart Interaction

• Monetization

Monetizing TV appsTwo broad ways to monetize from your TV apps

• Advertising

Developers can use Samsung AdHub to integrate in-app ads into their Smart TV apps

• In-app purchase

Use third party solutions like smartpay.tv to generate revenue from in-app contents.

http://www.samsungadhub.com/

http://www.smartpay.tv

http://www.samsungadhub.com/

http://www.smartpay.tv/

Advertising using Samsung AdHub

1. TV In-App Banner Ad (Vertical or horizontal) → 2. Interactive landing page → 3. Full-screen video Ad playback

1. Video contents from the application → 2. Full-screen video Ad playback → 3. Selected video content playback

1. Click on the application → 2. Full-screen video Ad playback → 3. Entering into the application

In App purchase Smartpay.tvSmartpay.tv allows TV developers to create iAPitems and facilitate

• Single or One time purchase

• Recurring payments

www.smartpay.tv

SmartPay.tv is not a product from Samsung, and we don’t directly endorse it.

http://www.smartpay.tv/

Quick Recap• Smart TV apps are built using HTML/JS/CSS

• SDKv5 brings SmartHome, Multiscreen & CAPH to Smart TV developers.

• Multiscreen APIs make it easier to connect Smartphone and TV.

• CAPH UI components are tailored for TV interaction.

• To sell Smart TV apps goto www.seller.samsungapps.com

• For SDK download, technical issues www.samsungdforum.com

http://www.seller.samsungapps.com/

http://www.samsungdforum.com/

Important TV vs SDK

• Performance

• Viewing Distance

• Usage with remote control / Interaction

Thank You

www.facebook.com/SamsungDevs

Publishing to Samsung Smart TVThe TV Ecosystem Monetization. The TV Ecosystem Advertisements. The TV...

Documents

Transcript of Publishing to Samsung Smart TVThe TV Ecosystem Monetization. The TV Ecosystem Advertisements. The TV...