Tizen WASM Player Sample

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

---

Related Info

• Tizen WASM Player API Documentation
• Getting Started with WebAssembly

---

Samples

• 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.
      NoteFor details on Emscripten configuration in Tizen Studio, see Configuring the Samsung Emscripten SDK.

3. Click "Finish".

4. 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".

5. 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/

6. 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:
         1. Append the following flags: -s ENVIRONMENT_MAY_BE_TIZEN -pthread -s USE_PTHREADS=1 -s PTHREAD_POOL_SIZE=1
            NoteThese flags are explained below, in the Required Samsung Emscripten SDK Flags section.
         2. Remove -s EXPORT_NAME=EMSSSampleModule -s MODULARIZE=1.
            NoteThis 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.
      3. click "Apply and Close".

7. Build the project:

   1. Right-click the EMSSSample project in "Project Explorer".
   2. Click "Build Project" in the context menu.
   3. 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:

Flag	Description
-s ENVIRONMENT_MAY_BE_TIZEN	Enables usage of Samsung Emscripten SDK extensions available on Tizen devices. This flag is required to use Elementary Media Stream Source.
-pthread -s USE_PTHREADS=1	Enables usage of threads in WebAssembly module.
-s PTHREAD_POOL_SIZE=1	Prepares the WebAssembly module to start the indicated number of threads. It is important to set this parameter to the maximum number of threads that an application uses; otherwise starting new threads can fail. For more information, see pthreads in the Emscripten documentation.

Table 1. Required Samsung Emscripten SDK Flags