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 anElementaryMediaStreamSource
data source andkVideoTexture
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
-
Launch Tizen Studio.
-
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'.
-
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'.
-
Replace default HTML5 and C++ files generated by Tizen Studio with the files from this sample:
-
Remove generated HTML5 and C++ files:
VideoDecoderSample/index.html
VideoDecoderSample/main.js
VideoDecoderSample/css/style.css
VideoDecoderSampleModule/inc/empty.hpp
VideoDecoderSampleModule/src/empty.cpp
-
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/
-
-
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':
(flags are explained below, in Required Emscripten flags section)-s ENVIRONMENT_MAY_BE_TIZEN -pthread -s USE_PTHREADS=1 -s PTHREAD_POOL_SIZE=1 -s USE_SDL2=1
- 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.
- append following flags to 'Linker flags':
- select 'Emscripten C++ Compiler' -> 'Miscellaneous' and edit 'Other flags', changing
- click right mouse button on the
-
Build the project:
- click right mouse button on the
VideoDecoderSample
project in 'Project Explorer', - click 'Build Project' in context menu.
- click right mouse button on the
-
Create a widget package:
- click right mouse button on the
VideoDecoderSample
project in 'Project Explorer', - click 'Build Signed Package' in context menu.
- click right mouse button on the
-
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. |