• Tizen WASM Player API Documentation

• WebAssembly Getting Started

• Tizen WASM Video Decoder Sample

The Tizen WASM Video Decoder sample application shows how to use Tizen WASM Video Decoder to play media on a Samsung device using a WebAssembly module.

This application is an extension to the Tizen WASM Player Sample Application. It illustrates how to extend an existing WASM Player application to achieve decoding video frames to GL texture functionality.

The emss_sdf_sample.h and emss_sdf_sample.cc files have been copied from the wasm_player_sample application and are used only to manage playback in media player.
Video Decoder logic is located in the video_decoder_sdf_sample.h and video_decoder_sdf_sample.cc files.

The sample application's features are:

• Elementary media stream playback using HTMLMediaElement with an ElementaryMediaStreamSource data source and kVideoTexture rendering 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 widget 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 VideoDecoderSample 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 on 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 VideoDecoderSampleModule (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 this sample:

   1. Remove generated HTML5 and C++ files:

      • VideoDecoderSample/index.html
      • VideoDecoderSample/main.js
      • VideoDecoderSample/css/style.css
      • VideoDecoderSampleModule/inc/empty.hpp
      • VideoDecoderSampleModule/src/empty.cpp

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

      • elementary_media_stream_source_sample/widget/* -> VideoDecoderSample/
      • elementary_media_stream_source_sample/src/* -> VideoDecoderSampleModule/

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

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

7. Create an application package:

   1. Right-click the VideoDecoderSampleModule 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 Emscripten-specific build flags required to build this sample: