Sample WASM Video Decoder Application

This section shows how to use Tizen WASM Video Decoder sample application.

---

Related Info

• Tizen WASM Player API Documentation
• Getting Started with WebAssembly
• Tizen WASM Video Decoder Sample

---

Tizen WASM Video Decoder - Sample Application

This is a sample application showing how to use Tizen WASM Video Decoder to play media on a Samsung Smart TV device using a WebAssembly module.

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

emss_sdf_sample.h and emss_sdf_sample.cc files have been copied from wasm_player_sample application and are used only to manage playback in media player.

Video Decoder logic is located in 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,
• looping video,
• implementation of Seeking and Multitasking.

Packetized data is hardcoded in app to maximize data access simplicity.

Building the sample widget with Tizen Studio

Prerequisites

• Sample WASM Player Application source code which can be cloned from the repository on GitHub.
• 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 VideoDecoderSample and click 'Next',
   • enter paths to the Emscripten configuration file and cache directory (please refer to a guide for details),
   • 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 VideoDecoderSampleModule (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:

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

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

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

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

   • click right mouse button on the VideoDecoderSampleModule 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 -s USE_SDL2=1
         

         (flags are explained below, in Required Emscripten flags section)
       • remove -s EXPORT_NAME=VideoDecoderSampleModule -s MODULARIZE=1 from 'Linker flags'.
         Note :

         This step is required, because code loading modularized and non-modularized WebAssembly modules differ slightly.

This sample 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 VideoDecoderSample project in 'Project Explorer',
   • click 'Build Project' in context menu.

7. Create a widget package:

   • click right mouse button on the VideoDecoderSample 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 this sample:

Flag	Description
-s ENVIRONMENT_MAY_BE_TIZEN	Enables usage of Samsung Tizen Emscripten extensions available on Samsung Tizen TVs. This flag is necessary to use Elementary Media Stream Source.
-pthread -s USE_PTHREADS=1	Enables usage of threads in WebAssembly module.
-s USE_SDL=2	Flag enabling SDL2 library (libsdl2).
-s PTHREAD_POOL_SIZE=1	WebAssembly module will be prepared to start indicated number of threads. It's important to set this parameter to a maximum number of threads that an application uses; otherwise starting new threads may fail! See pthreads in Emscripten documentation for more information.