Publishing to Samsung Smart 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
Developer
Samsung Apps
Outline
 The TV ecosystem
•
•
• CAPH library
• PNaCl for Smart TV
• Multiscreen APIs
• Smart Home APIs
• Smart Interaction
• Monetization
What is a Smart TV app ?
Smart TV Apps are based on HTML, JS and CSS.
Smart Hub
Enhanced Web Kit
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++.
Smart Hub
Web Kit
What is a Smart TV app ?
An app is a ZIP package in this format
App content
All meta-data about the app
Web Device API
List 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 etc
http://www.samsungdforum.com/Guide/ref00008/index.html
Outline
 The TV ecosystem

•
• CAPH library
• PNaCl for Smart TV
• Multiscreen APIs
• Smart Home APIs
• Smart Interaction
• 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 & Multiscreen
support.
• Improved WebEngine, WebGL and NaCl support.
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
WEB WORKERS
SVG
WEBFONT
XHR2
GEOLOCATION
INDEXED DB
WEBSOCKET
FULLSCREEN
VIDEO
FILESYSTEM
Improved HTML5 support
AUDIO
FILE
CANVAS
WEBGL
WEB MESSAGING
APPLICATION CACHE
http://www.samsungdforum.com/Guide/art00066/index.html
Outline
 The TV ecosystem


• CAPH library
• PNaCl for Smart TV
• Multiscreen APIs
• Smart Home APIs
• Smart Interaction
• Monetization
CAPH library(2014 only)
http://www.samsungdforum.com/Guide/d41/index.html
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.
http://www.samsungdforum.com/Guide/d41/index.html
BUTTON
IMAGE
CAROUSEL
GRIDWIDGET
BOX
SPINNER
VIEW
INPUTBOX
NAVIGATOR
PROGRESSBAR
IMAGEGALLERY
CAPH library(2014 only)
PANEL
SCENE
LISTWIDGET
http://www.samsungdforum.com/Guide/d41/index.html
CAPH library(2014 only)
Navigator
Carousel
ProgressBar
GridWidget
http://www.samsungdforum.com/Guide/d41/index.html
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">
Initialize
var 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();
Outline
 The TV ecosystem


 CAPH library
• PNaCl for Smart TV
• Multiscreen APIs
• Smart Home APIs
• Smart Interaction
• 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.
http://www.samsungdforum.com/Guide/d19/index.html
PNaCl for Smart TV
Smart TV HTML App
Native Client
Module
Pepper API
HTML / JS
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
Pepper API
HTML / JS
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.
Outline
 The TV ecosystem


 CAPH library
 PNaCl for Smart TV
• Multiscreen APIs
• Smart Home APIs
• Smart Interaction
• Monetization
Multiscreen SDK (2014 only)
Easily connect your TV apps with
Android, iOS or HTML mobile apps.
Download SDKs at
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
http://www.samsungdforum.com/Guide/d30/index.html
Flow diagram
Get Current
Device
Open
Channel
Connect to
TV
Connect to
Channel
Flow diagram
Get Current
Device
Open
Channel
Connect to
TV
Connect to
Channel
Flow diagram
Get Current
Device
Open
Channel
Connect to
TV
Connect to
Channel
Flow diagram
Get Current
Device
Open
Channel
Connect to
TV
Connect to
Channel
Two way messaging
channel.send(“Hello”, clientID);
public class MyListener implements IChannelListener {
public void onClient Message( ChannelClient c, String msg) { }
public void onClientConnected(ChannelClient client) {}
…
}
channel.sendToHost(“Hello TV”);
channel.on(“message”, function(msg, client) { .. });
channel.on(“clientConnect”, function(msg, client) { .. });
Why you should think Multiscreen ?
• 85% of Americans use both TV and Mobile simultaneously.
Source : Business Insider
Why you should think Multiscreen ?
• Multiscreen gaming is also rapidly growing.
Why you should think Multiscreen ?
• New revenue models possible.
Game is free
Charge mobile user if you want to play on TV,
and control from phone.
Outline
 The TV ecosystem


 CAPH library
 PNaCl for Smart TV
 Multiscreen APIs
• Smart Home APIs
• Smart Interaction
• Monetization
Smart Home API (2014 only)
Connect and control Air conditioner, Washing machine etc from the Smart TV.
http://www.samsungdforum.com/Guide/d54/index.html
Smart Home features
• Include webapis
<script type="text/javascript"
src="$MANAGER_WIDGET/Common/webapi/1.0/webapis.js"></script>
Check for support
if (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
Outline
 The TV ecosystem


 CAPH library
 PNaCl for Smart TV
 Multiscreen APIs
 Smart Home APIs
• Smart Interaction
• 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 Recognition
http://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 listener
document.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
<script type="text/javascript"
src="$MANAGER_WIDGET/Common/webapi/1.0/webapis.js"></script>
• Usage.
• Check for support and enabled
if (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 events
webapis.recognition.SubscribeExEvent(webapis.recognition.PL_RECOGNITION_T
YPE_GESTURE, “returnID", function (evt) { that.handleRecognitionEvent.call(that,
evt); });
EVENT_GESTURE_2HAND_ZOOM , EVENT_GESTURE_2HAND_ROTATE etc
Voice Recognition
http://samsungdforum.com/Guide/tut000001/index.html
Voice Recognition
• Embedded Mode
Predefined voice commands.
The engine does more of comparison than recognition
Does NOT require internet.
Limited to comparing between 7 items.
• Server Guide Mode
Free- 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
<script type="text/javascript"
src="$MANAGER_WIDGET/Common/webapi/1.0/webapis.js
"></script>
<voice>y</voice> in config.xml
• Check for support and if enabled
deviceapis.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 events
Main.onVoiceEvent = function(evt){
switch (evt.eventtype){
case 'EVENT_VOICE_RECOG_RESULT':
alert('The user say ' + evt.result);
break;
}
};
Outline
 The TV ecosystem


 CAPH library
 PNaCl for Smart TV
 Multiscreen APIs
 Smart Home APIs
 Smart Interaction
• Monetization
Monetizing TV apps
Two broad ways to monetize from your TV apps
• Advertising
Developers can use Samsung AdHub to integrate
in-app ads into their Smart TV apps
http://www.samsungadhub.com/
• In-app purchase
Use third party solutions like smartpay.tv to
generate revenue from in-app contents.
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.tv
Smartpay.tv allows TV developers to create iAP
items 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.
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
Important TV vs SDK
• Performance
• Viewing Distance
• Usage with remote control /
Interaction
Thank You
www.facebook.com/SamsungDevs

Download Report