• Tizen WASM Player API Documentation

• Getting Started with WebAssembly

• Tizen WASM Player Sample (Normal Latency)

The Tizen WASM Player sample application shows how to use the Tizen WASM Player to play media on a Tizen 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)
• Implementation of Seeking and Multitasking

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

Building the Sample With Tizen Studio

This section covers how to build the sample application in Tizen Studio, including prerequisites and a step by step guide to the build process.

Prerequisites

To build the sample application, you need the following:

• Sample WASM Player Application source code, which can be cloned from the repository on GitHub.
• Samsung Emscripten SDK and Tizen Studio. Follow the Setting Up Samsung Emscripten SDK guide to learn more about their installation and setup.

Building the Application

To build the sample application:

1. Launch Tizen Studio.

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

   1. Select "File > New > Tizen Project".
   2. Select "Template" and click "Next".
   3. Select "TV" and click "Next".
   4. Select "Web Application," check the "WebAssembly (C/C++)" checkbox, and click "Next".
   5. Select the "Empty" application template and click "Next".
   6. Name the project EMSSSample and click "Next".
   7. Enter the directory paths to the Samsung Emscripten SDK configuration file and cache directory.

      Note

      For details on Emscripten configuration in Tizen Studio, see Configuring the Samsung Emscripten SDK.

   8. Click "Finish".

3. Add a new WebAssembly module to the project:

   1. Right click the project in "Project Explorer".
   2. Click "New > WebAssembly Module" in the context menu.
   3. Select "Empty module" and click "Next".
   4. Name the module EMSSSampleModule (the name is important, as this is the name used to load the module).
   5. Click "Finish".

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

   1. Remove the following HTML5 and C++ files:

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

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

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

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

   1. Right-click the EMSSSampleModule project in "Project Explorer".
   2. Select "Properties" from the context menu.
   3. Select "C/C++ Build" > "Settings".
   4. On the "Tool Settings" tab:
      1. Select "Emscripten C++ Compiler > Miscellaneous" and edit the "Other flags" field, changing -std=gnu++11 to -std=gnu++14.
      2. Select "EEmscripten C++ Linker > Miscellaneous" and make the following changes to the "Linker flags" field:
         • Append the following flags:

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

           Note

           These flags are explained below, in the Required Samsung Emscripten SDK Flags section.

         • Remove -s EXPORT_NAME=EMSSSampleModule -s MODULARIZE=1.

           Note

           This step is required, because code loading for modularized and non-modularized WebAssembly modules differs slightly. The EMSS Sample application is prepared to load modules that do not use the MODULARIZE option.

   5. click "Apply and Close".

6. Build the project:

   1. Right-click the EMSSSample project in "Project Explorer".
   2. Click "Build Project" in the context menu.

7. Create an application package:

   1. Right click on the EMSSSample project in "Project Explorer".
   2. Click "Build Signed Package" in the context menu.

The application is ready to use!

Required Samsung Emscripten SDK Flags

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