top

Quick-start Guide

This topic is an introduction to developing Web applications for Samsung TV. It describes how to get started with the Samsung TV SDK, the characteristics and structure of TV Web applications, some useful APIs and features, and ways you can test your applications.

This topic is intended for developers with experience in creating Web applications. If you have not developed a Tizen Web application before, first familiarize yourself with Tizen Developers.

To begin application development with the Samsung TV SDK:

  1. Set up the development environment:
    1. Install the Samsung TV SDK.
    2. Create a certificate profile.
      According to the Tizen policy, all applications must be signed with valid certificates before they can be installed or run. The signature verifies the source of the application and makes sure it has not been tampered with since its publication.
      Important

      Keep your certificates backed up in a safe location. When you update your published applications, the update must be signed with the same author certificate as the original application. If the applications are signed with different author certificates, the update can be recognized as a different application and not an update.

  2. Design your application.
  3. Create a project.
    You can select from various predefined templates.
  4. Implement application features.
  5. Test the application.

If you have questions about using the SDK, share them in the community forum.

Designing Applications

When designing a Web application for a Samsung TV, pay attention to the following application characteristics:

  • Remote control functionality
    The remote control is the main way for users to interact with the TV. For more information, see User Interaction.

  • Simple UI
    The TV has a simpler user interface (UI) than a mobile device. You must consider the user experience when designing the UI. For more information, see Design Principles.

  • Scalable application resolution
    On Samsung TV, the screen aspect ratio is 16:9. For the UHD TV model groups, the standard application resolution is 1920x1080 px, and for the FHD TV model groups, it is 1280x720 px.
    To prevent whitespace and scroll bars from appearing when the application screen is scaled, keep the aspect ratio at 16:9 even when the application resolution is different from the standard.

  • Common Web application features
    TV Web applications can have most of the same features as Web applications for other devices. You can use Web standard functions, such as mouse support, video elements, animations, and visibility change notifications. You can also use Tizen Web Device APIs and Samsung Product APIs supported by Samsung TV. For more information, see the API Reference.

Implementing Application Features

A Tizen Web application consists of HTML, CSS, and JS files, and a "config.xml" file.

Figure 1. Application structure

Figure 1. Application structure

All Tizen Web application projects must have a "config.xml" file in the project root directory. The configuration file is composed of XML elements, including the element as its root. These elements represent the application information, such as version, features, and privileges available for the application. The configuration information is used when you install or run the Tizen Web application. For more information, see Configuring TV Applications.

You can implement the following features in your application:

  • Tizen Web Device API and TV features
    The following Tizen APIs are useful for TV service applications:

    • TVWindow API
      You can use Tizen Web Device APIs to show the TV channel screen or external inputs in an application.
      For example, you can implement picture-in-picture (PiP) using the show() function of the TVWindow API:
      tizen.tvwindow.show(function(){}, null, ['0', '0', '50%', '50%'], 'MAIN'); 
      
      For more information, see Implementing PiP.
    • TVChannel API
      When the channel screen is shown, you can simply use the remote control channel keys without registering the keys. You can also control channel changes and retrieve TV program information using the TVChannel API.
      For example, you can use the getChannelList() function to retrieve the channel list:
      tizen.tvchannel.getChannelList( 
        function(channelList){ 
          ... 
        }, 
        null, 'ALL', 0, 10 
      );
      
      tizen.tvchannel.tune( 
        { 
          major:channelList[0].major 
        }, 
        function(){ 
          ... 
        } 
      ); 
      
    • TVAudioControl API
      You can control the volume level or mute status of the TV, using the TVAudioControl API:
      tizen.tvaudiocontrol.setMute(true); 
      tizen.tvaudiocontrol.setVolume(10); 
      
  • Samsung Product API and VOD features
    The Samsung Product API provides additional functionalities beyond those offered by the Tizen Web API, such as retrieving information about the device and platform, displaying subtitles, and playing VODs.
    You can implement VOD playback in 2 ways:

    • Using video elements
      You can use the HTML5 standard video element. For more information, see Using Video Elements.
    • Using the AVPlay API
      VOD playback can be implemented using the AVPlay API, which has additional features, such as support for DRM technologies. For more information, see Using AVPlay.

    The following remote control keys are needed to control VOD playback:

    • Volume control
      To control VOD playback volume levels, you can use the volume keys of the remote control without registering them, because they are handled at the platform level. Volume control can also be implemented using the Tizen API. For more information, see TVAudioControl API.
    • "Play/Pause" key
      The Smart Control "Play/Pause" key combines the functions of the "Play" and the "Pause" keys. Its KeyName is MediaPlayPause and the KeyCode is "10252". VOD service applications must handle this key to toggle between play and pause modes.
  • Screensaver
    To prevent screen burn, the screensaver is shown after a defined amount of time, if the TV screen has been displaying a still image or if there has been no user input. For more information, see Setting Screensaver.

  • Viewport scaling
    If you create an application for resolutions different than the standard resolutions, you can scale the resolution up or down, using the viewport meta element. For more information, see Managing Screen Resolution.

  • Input method editor (IME)
    When an input or textarea element is focused, the virtual keyboard is shown. The virtual keyboard is automatically hidden when a key on a connected external keyboard is pressed. For more information, see Keyboard / IME.

  • Multitasking
    When the user switches from your application to another application or TV channel, your application must save its current state to RAM and enter the hidden state.
    You can receive notifications when an application is shown or hidden by registering a callback for the visibilitychange event:

    document.addEventListener( 
      'visibilitychange', function() { 
        if (document.hidden) { 
          ... 
        } else { 
          ... 
        } 
      } 
    ); 
    

    For more information, see Multitasking.

  • iframe elements
    You can insert remote pages into your application using the Web standard iframe element. For more information, see the W3C recommendation for HTML5.

    <iframe width='960px' height='540' src='https://www.youtube.com/embed/7xBT-UDAHX8'></iframe> 
    
    Note

    When using iframe elements in TV applications, the following limitations apply:

    • Only the following sandbox attributes are available: allow-same-origin, allow-scripts, allow-forms, allow-top-navigation
    • Tizen and Samsung Product APIs cannot be used in iframe elements.
    • The "frame flattening" feature, supported in Tizen mobile Web applications, is not supported in TV applications.
    • On the emulator, iframe elements for remote sources do not work as expected.
  • Web storage and TV file system
    You can store application content and data, such as user information, in Web storage and the TV file system. For more information, see Using Web Storage and Managing File Operations.

    Note

    For your application to be published on Samsung Apps TV, you must make sure that all user login information is deleted when the application is uninstalled. After deleting and reinstalling the application, there must be no user login information available from the previous installation.

  • TLS support
    To transmit encrypted information between Web browsers and Web servers, Samsung TV supports TLS (Transport Layer Security) versions 1.0, 1.1, and 1.2. SSL (Secure Sockets Layer) is not supported.

Testing Applications

To test your application during development, you can use the TV simulator and emulator tools provided in the Samsung TV SDK, or an actual Samsung TV:

  • TV simulator
    The TV simulator is a light-weight tool that simulates Samsung TV APIs using a JavaScript backend. The simulator is useful when quick prototype development is required, such as when developing the UI. You can modify the HTML5, JS, and CSS code, and quickly reload the simulator to view your changes.
    API support on the simulator is limited; the simulator does not support any features that have strict dependencies on TV hardware or core Tizen modules. Some API functions return dummy values.

  • TV emulator
    The TV emulator is a tool that provides an environment similar to a real device. If you do not have the real device, you can test on a virtual device with similar features. The emulator supports most of the device APIs, so it is useful when implementing the features of your application.

  • TV device
    If you have tested your application on the emulator, it is ready for uploading and testing on a TV. Even though it is possible to complete most application testing on the emulator, it is highly recommended that you also test your application on a target device. The emulator and TV environments are very similar, but there are some differences at the hardware level.