Sample WASM Player Application
This section shows how to use Tizen WASM Player sample application.
Related Info
- Tizen WASM Player API Documentation
- Tizen WASM Player Sample (Normal Latency)
- Getting Started with WebAssembly
Tizen WASM Player - Sample Application
This sample application shows how to use Tizen WASM Player to play media on a TizenTV 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 anElementaryMediaStreamSource
data source (Normal Latency mode), - looping video,
- implementation of Seeking and Multitasking.
Packetized data is hardcoded in the 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
EMSSSample
and click 'Next', - enter paths to the Emscripten configuration file and cache directory,Note :
Please refer to the Creating "Hello WebAssembly" TV Application guide for details on Emscripten configuration in Tizen Studio.
- 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
EMSSSampleModule
(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:
-
Remove generated HTML5 and C++ files:
EMSSSample/index.html
EMSSSample/main.js
EMSSSample/css/style.css
EMSSSampleModule/inc/empty.hpp
EMSSSampleModule/src/empty.cpp
-
Copy sample widget's files to the projects in Tizen Studio:
elementary_media_stream_source_sample/widget/*
->EMSSSample/
elementary_media_stream_source_sample/src/*
->EMSSSampleModule/
5. Add necessary compiler and linker flags to the WebAssembly module:
- click right mouse button on the
EMSSSampleModule
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
Flags are explained below, in Required Emscripten flags section.
- remove
-s EXPORT_NAME=EMSSSampleModule -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 useMODULARIZE
option.
-
- click 'Apply and Close'.
6. Build the project:
- click right mouse button on the
EMSSSample
project in 'Project Explorer', - click 'Build Project' in context menu.
7. Create a widget package:
- click right mouse button on the
EMSSSample
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 the EMSS Sample application:
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 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 star ting new threads may fail! See pthreads in Emscripten documentation for more information. |