Post on 25-May-2020
transcript
Introduction to Smart TV Development
Manikantan K
Manikantan.k@samsung.com@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
• 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.
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
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 & Multiscreensupport.
• 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
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
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
CAPH library(2014 only)
http://www.samsungdforum.com/Guide/d41/index.html
BU
TTO
N
BOX
GRIDWIDGET
CAROUSEL
INPUTBOX
PANEL
LISTWIDGET
SCENE
PROGRESSBAR
IMAGE
VIEW
SPINNER
IMAG
EG
ALLER
Y
NAVIGATOR
CAPH library(2014 only)
http://www.samsungdforum.com/Guide/d41/index.html
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();
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
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.
Outline The TV ecosystem
CAPH library
PNaCl for Smart TV
• Multiscreen APIs
• Smart Home APIs
• Smart Interaction
• Monetization
Multiscreen SDK (2014 only)
www.multiscreen.samsung.com
Easily connect your TV apps with Android, iOS or HTML mobile apps.
Download SDKs at
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);
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
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 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
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 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> <!-- make it as button --><div id="div0“></div> <!-- make it as trial element -->
• 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
<script type="text/javascript" src="$MANAGER_WIDGET/Common/webapi/1.0/webapis.js"></script>
• 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
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
<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 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;
}};
Outline The TV ecosystem
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
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.
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