Overview

This section introduces WebAssembly and its application in Samsung Smart TVs..

Related Info

Introduction

WebAssembly provides a way to run code written in (among others) C and C++ on the web at near native speed.

WebAssembly is designed to complement and run alongside JavaScript - using the WebAssembly JavaScript APIs, you can load WebAssembly modules into a JavaScript Smart TV app and share functionality between the two.

WebAssembly is being developed as a web standard via the W3C WebAssembly Working Group and Community Group with active participation from all major browser vendors.

Samsung Smart TVs support WebAssembly from Tizen5.5 (2020 year's models) onwards.

Typical WebAssembly TV Application Composition

Application Contents

A WebAssembly TV application is composed of at least the following files:

  • An "index.html" file - defines the Web page that the WebAssembly modules run on. You can include other HTML5 and JavaScript elements, such as additional HTML files, CSS styles, and JavaScript code.
  • A "config.xml" file - contains the configuration for a Samsung TV application. This file is automatically generated by the Tizen Studio, but can be omitted when testing the application in a Web browser.
  • At least 1 ".wasm" file: a binary compiled using a WebAssembly toolchain.

Fig. 1. WebAssembly TV Application

HTML Web Page

The "index.html" file is a standard HTML file. To implement WebAssembly modules in the application, you need to use one of the methods presented on Loading and running WebAssembly code page. Tizen Studio generates required HTML and JavaScript code snippets that wrap one of those methods automatically when sample WebAssembly modules are added (see Adding WebAssembly Modules).

Generated HTML snippet:

<script src="wasm_modules/scripts/wasm_tools.js"></script>
...
<!-- WASM MODULE START: wasm_module1 -->
<div class="wasm_module1_class">
   <h1>WebAssembly Module: wasm_module1</h1>
   <canvas class="wasm_module1_class" id="wasm_module1_canvas"oncontextmenu="event.preventDefault()" tabindex="-1" width="400" height="200"></canvas>
   <textarea class="wasm_module1_class" id="wasm_module1_output" rows="24" cols="80"></textarea>
   <script src="wasm_modules/wasm_module1/CurrentBin/wasm_module1.js"></script>
   <script>
        var wasm_module1 = new Proxy(
            new ModuleLoader(
                'wasm_modules/wasm_module1/CurrentBin/wasm_module1.wasm',
                wasm_module1,
                document.getElementById('wasm_module1_canvas'),
                document.getElementById('wasm_module1_output')),
            ModuleLoaderProxyHandler);
    </script>
</div>
<!-- WASM MODULE END: wasm_module1 -->

The ModuleLoader JavaScript class of the generated helper code supports passing canvas and textarea objects to it, so that the loaded WebAssembly module may work with both graphics and text output elements of the Web page.

Configuration File

The "config.xml" file is a Tizen-specific file that is created for every Tizen application. The file is automatically generated by the Tizen Studio. The following is an example of a "config.xml" file:

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns:tizen="http://tizen.org/ns/widgets" xmlns="http://www.w3.org/ns/widgets" id="http://yourdomain/BasicProject" version="1.0.0" viewmodes="maximized">
    <tizen:application id="2NTxWwsECr.BasicProject" package="2NTxWwsECr" required_version="2.3"/>
    <content src="index.html"/>
    <feature name="http://tizen.org/feature/screen.size.normal.1080.1920"/>
    <icon src="icon.png"/>
    <name>BasicProject</name>
    <tizen:profile name="tv-samsung"/>
    <tizen:setting screen-orientation="landscape" context-menu="enable" background-support="disable" encryption="disable" install-location="auto" hwkey-event="enable"/>
</widget>

For more information on the "config.xml" file structure, see the "Configuration Document" section in the W3C Widget Packaging and XML Configuration specification and Configuring TV Applications.

The Native Code

Usually you will want native code to exchange information with the Web page of your application, which may for example provide the user interface. There are several ways described of how to achieve that in Interacting with code. The document shows how native objects may be used from JavaScript code and vice versa.

It is also possible that the native code does not communicate with the Web page at all and it provides all the application functionality itself.

Application Code in C/C++

There are no specific requirements for the native application code but those regarding accessing native objects from JavaScript code - if needed - as described in Interacting with code.

To get started with some simple example you can therefore try a typical hello world example:

#include <iostream>

int main() {
    std::cout << "Hello from native app" << std::endl;
    return 0;
}

Required Tools

  1. Samsung Emscripten fork
  2. Tizen Studio with TV-Extension

Let's Create a WebAssembly TV App!

For a step-by-step guide showing how to install the required tools and create a working WebAssembly TV application see Getting Started.

For more in-depth description see Advanced.