Introduction to Smart TV Development

Transcription

1 Introduction to Smart TV Development Manikantan K

2 The TV ecosystem CAPH library PNaCl for Smart TV Multiscreen APIs Smart Home APIs Smart Interaction Monetization Outline

3 The TV Ecosystem Devices

4 The TV Ecosystem Content

5 The TV Ecosystem Monetization

6 The TV Ecosystem Advertisements

7 The TV Ecosystem Developer Samsung Apps

9 What is a Smart TV app? Smart TV Apps are based on HTML, JS and CSS. Smart Hub Enhanced Web Kit

10 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

11 What is a Smart TV app? An app is a ZIP package in this format App content All meta-data about the app

12 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

14 Smart TV SDK evolution 2.x 3.x 4.x 5.X Designed for 2011 Devices ( D Model ), HTML5/CSS3 Support. Maple Web Engine Designed for 2012 Devices ( E Model ) Smart Interaction, In-Apps Ads WebKit Web Engine & Convergence support Designed for 2013 Devices ( F Model ) Smart Interaction 2.0 Support Eclipse Based IDE (Linux & Mac OS SDK Available) Designed for 2014 Devices ( G Model). SmartHome & Multiscreen support. Improved WebEngine, WebGL and NaCl support.

15 Smart Home features PNaCl Multiscreen SDK CAPH library

16 Improved Web Inspector in SDK v5 Breakpoints, stepping and debugging support

17 Improved Automatic Test Tool in SDK v5 Create input test sequences, schedule screen captures, record events

18 FILESYSTEM FULLSCREEN Improved HTML5 support VIDEO WEB WORKERS SVG WEBFONT XHR2 GEOLOCATION INDEXED DB WEBSOCKET AUDIO FILE CANVAS WEBGL WEB MESSAGING APPLICATION CACHE

20 CAPH library(2014 only)

21 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.

22 IMAGEGALLERY CAPH library(2014 only) IMAGE INPUTBOX BUTTON CAROUSEL BOX SPINNER GRIDWIDGET PROGRESSBAR VIEW NAVIGATOR PANEL SCENE LISTWIDGET

23 CAPH library(2014 only) Navigator Carousel GridWidget ProgressBar

24 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 : } }; var p1 = new caph.wui.widget.panel(); p1.seturl( image-url ); p1.settext( Item 1 ); gridwidget.additem (p1); gridwidget.render(uicontext); uicontext.show();

26 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.

27 PNaCl for Smart TV Smart TV HTML App Native Client Module Pepper API HTML / JS

28 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.

29 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

30 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.

32 Multiscreen SDK (2014 only) Easily connect your TV apps with Android, ios or HTML mobile apps. Download SDKs at

33 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

34 Flow diagram Get Current Device Open Channel Connect to TV Connect to Channel

38 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) {.. });

39 Why you should think Multiscreen? 85% of Americans use both TV and Mobile simultaneously. Source : Business Insider

40 Why you should think Multiscreen? Multiscreen gaming is also rapidly growing.

41 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.

43 Smart Home API (2014 only) Connect and control Air conditioner, Washing machine etc from the Smart TV.

44 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

46 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

47 Motion Recognition

48 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);

49 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

50 Voice Recognition

51 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.

52 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()

53 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; } };

55 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 In-app purchase Use third party solutions like smartpay.tv to generate revenue from in-app contents.

56 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

57 In App purchase Smartpay.tv Smartpay.tv allows TV developers to create iap items and facilitate Single or One time purchase Recurring payments SmartPay.tv is not a product from Samsung, and we don t directly endorse it.

58 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 For SDK download, technical issues

59 Important TV vs SDK Performance Viewing Distance Usage with remote control / Interaction

60 Thank You

61