Sample WASM Player Application

This section shows how to use Tizen WASM Player sample application.

---

Related Info

• Tizen WASM Player API Documentation
• Tizen WASM Player Sample (Normal Latency)
• Getting Started with WebAssembly

---

Tizen WASM Player - Sample Application

This sample application shows how to use Tizen WASM Player to play media on a TizenTV device using HTMLMediaElement with ElementaryMediaStreamSource as a data source in a WebAssembly module.

The sample application's features are:

• elementary media stream playback using HTMLMediaElement with an ElementaryMediaStreamSource data source (Normal Latency mode),
• looping video,
• implementation of Seeking and Multitasking.

Packetized data is hardcoded in the app to maximize data access simplicity.

Building the sample widget with Tizen Studio

Prerequisites

• Sample WASM Player Application source code, which can be cloned from the repository on GitHub.
• Emscripten SDK with Samsung extensions and Tizen Studio are required to build Sample WASM Player Application. Please follow the Downloading and Installing guide to learn more about their installation and setup.

Step-by-step guide

1. Launch Tizen Studio.

2. Create a new WebAssembly-enabled project in Tizen Studio:

• File -> New -> Tizen Project,
• select 'Template' and click 'Next',
• select 'TV' and click 'Next',
• select 'Web Application', check 'WebAssembly (C/C++)' box and click 'Next',
• select 'Empty' application template and click 'Next',
• name the project EMSSSample and click 'Next',
• enter paths to the Emscripten configuration file and cache directory,
  Note :

  Please refer to the Creating "Hello WebAssembly" TV Application guide for details on Emscripten configuration in Tizen Studio.

• click 'Finish'.

3. Add a new WebAssembly module to the project:

• click right mouse button on the project in 'Project Explorer',
• click 'New' -> 'WebAssembly Module' in the context menu,
• select 'Empty module' and click 'Next',
• name the module EMSSSampleModule (name is important, as this is the name used to load the module),
• click 'Finish'.

4. Replace default HTML5 and C++ files generated by Tizen Studio with the files from this sample:

1. Remove generated HTML5 and C++ files:

   • EMSSSample/index.html
   • EMSSSample/main.js
   • EMSSSample/css/style.css
   • EMSSSampleModule/inc/empty.hpp
   • EMSSSampleModule/src/empty.cpp

2. Copy sample widget's files to the projects in Tizen Studio:

   • elementary_media_stream_source_sample/widget/* -> EMSSSample/
   • elementary_media_stream_source_sample/src/* -> EMSSSampleModule/

5. Add necessary compiler and linker flags to the WebAssembly module:

• click right mouse button on the EMSSSampleModule project in 'Project Explorer',
• select 'Properties' from the context menu,
• select 'C/C++ Build' -> 'Settings',
• on 'Tool Settings' tab:

  • select 'Emscripten C++ Compiler' -> 'Miscellaneous' and edit 'Other flags', changing -std=gnu++11 to -std=gnu++14,

  • select 'Emscripten C++ Linker' -> 'Miscellaneous':

    • append following flags to 'Linker flags':

    -s ENVIRONMENT_MAY_BE_TIZEN -pthread -s USE_PTHREADS=1 -s PTHREAD_POOL_SIZE=1
    

    Flags are explained below, in Required Emscripten flags section.

    • remove -s EXPORT_NAME=EMSSSampleModule -s MODULARIZE=1 from 'Linker flags'.
      Note :

      This step is required, because code loading modularized and non-modularized WebAssembly modules differ slightly.
      This sample is prepared to load modules that doesn't use MODULARIZE option.

• click 'Apply and Close'.

6. Build the project:

• click right mouse button on the EMSSSample project in 'Project Explorer',
• click 'Build Project' in context menu.

7. Create a widget package:

• click right mouse button on the EMSSSample project in 'Project Explorer',
• click 'Build Signed Package' in context menu.

8. The widget is ready to use!

Required Emscripten flags

The table below explains Emscripten-specific build flags required to build the EMSS Sample application:

Flag	Description
-s ENVIRONMENT_MAY_BE_TIZEN	Enables usage of Samsung Tizen Emscripten extensions available on Samsung Tizen TVs. This flag is necessary to use Elementary Media Stream Source.
-pthread -s USE_PTHREADS=1	Enables usage of threads in WebAssembly module.
-s PTHREAD_POOL_SIZE=1	WebAssembly module will be prepared to start indicated number of threads. It's important to set this parameter to a maximum number of threads that an application uses; otherwise star ting new threads may fail! See pthreads in Emscripten documentation for more information.