Tizen WASM Player Sample

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


Related Info


Samples


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:

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:

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.
  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
        2. Remove -s EXPORT_NAME=EMSSSampleModule -s MODULARIZE=1.
      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