• Tizen WASM Player API Documentation

• 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 either cloned from the repository on GitHub or downloaded here.
• 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:

      • EMSSSsample/index.html
      • EMSSSsample/main.js
      • EMSSSsample/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/* -> EMSSSsample/
      • elementary_media_stream_source_sample/src/* -> EMSSSsampleModule/

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

   • click right mouse button on the EMSSSsampleModule 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
         

         Note

         Flags are explained below, in Required Emscripten flags section.

       • remove -s EXPORT_NAME=EMSSSsampleModule -s MODULARIZE=1 from 'Linker flags'.

         Note

         This step is required, because code loading modularized and non-modularized WebAssembly modules differ slightly. The EMSS Sample application 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: