WebApp Development Technical Guide

This document contains information that is confidential and proprietary to VIDAA and may not be
reproduced in any form without express written consent of VIDAA. No transfer or licensing of technology
is implied by this document.

Revision 2.3.5

VIDAA USA Inc.

 Web App Development Technical Guide CONFIDENTIAL

Revision History
Revisio Changes Issued
n Date

0.1 Initial version 11/15/2016

1.0 Change for MSD6586 platform 02/10/2018

1. check the ability of 6886 and update
1.1 04/16/2019
2. add the method of setup new app
1. Add the method of enable the remote debug function
1.4 05/16/2019
2. Add the media ability and DRM system version
3. Add difference CPU architecture
1. Highlight platform ability
2.0 24/10/2019
2. Adjust tables of contents
3. Add multi-platform contents
1. Add 5655/57 webengine
2.2 11/11/2019
2. Add CPU/GPU/Memory and other data of each platform
3. Add new support key
4. Modify DRM version
1. Adjust HDR interface
2.3 02/12/2020
2. Modify 5658/5659 debug mode
3. Add useragent specification for VIDAA U4
4. Modify latest system architecture
5. Add MT9602 Platform
1. Modify how to enable debug mode on 5658/5659 platform
2.3.1 03/02/2020
2. Add webengine & UA on MT9602 platform
3. Add how to enable debug mode on MSD6886U4 platform
4. Modify how to enable debug mode on MSD6886EU U3 platform
5. Add buttons that suggest APP to enhance user experience
6. Remove the requirement for APP access to API
1. Modified the method of opening debug tools on the U4 platform (applicable to MSD6886EU
2.3.2 03/16/2020
and 9602),now you can open devtools without serial cable.
2. Modified the keymap, added recommended keys
3. Added the security content in the DRM spec to the performance optimization section and
the user experience section.
4. Modified API of hisense_getdeviceid, The return value is more accurate.
5. MT9602 platform hardware parameters are now accurate.
1. Added two new keys, OTT Apps can use them.
2.3.3 04/16/2020
2. Added Playready+DASH examples.
3. Modified the keymap added keys that MUST be implemented.
4. Added feature guide to close the app using the back key.
5. Added flash drive requirements for firmware upgrade.
6. Modified the firmware name of the MSD6886 platform for unifying with the MSD6886 U4
platform.
1. Modified and Added recommended video profiles.
2.3.4 05/22/2020
2. Modified DRM spec.
3.Added 4k&hdr support.
4.Added Exit feature demand.
5.Added H5 feature online search website.

1/61
 Web App Development Technical Guide CONFIDENTIAL

6.Updated WebGL requirements.

1.Added VKB control feature.
2.3.5 06/23/2020
2.Modified how to enable devtools on U4 mass production

CONTENTS
System Overview 4
Introduction 4
Architecture Overview 4

Quick Deploying 6

Web Engine 8
Features 8
Cookies 9
Temporary and Persistent storage 9
User Agent 9

Multimedia Player 12
Streaming Protocol 12
DRM System 12
ClearKey 12
PlayReady 13
Widevine 13
AES-128 13
Supported Video Codec 14
Supported Audio Codec 14
Supported Image 15
Supported Container 16
Subtitles and Closed Captioning 16
4K Video & HDR 17

User Interface and Experience 18

IR remote 18
Key Mapping 18
Navigation Example 20
Exit 20
Virtual Keyboard 20
External Input Devices 21
UI Resolution 21
Fonts 22

Performance & Optimization 23

Memory Consumption 23
Graphics requirements and animations 23
Hardware Accelerated Features 23
Transport Layer Security 23
Same-Origin Policy 24
Mixed Content 24

2/61
 Web App Development Technical Guide CONFIDENTIAL
Tips 24

VIDAA System API 25

System Information 25
Parental Control 28

Demo Code & Tutorials 33

Navigation Demo 33
HTML+MSE 33
HLS 35
HTML5 + MSS/DASH + PlayReady (post-delivery method) 35
HTML5 + MSS + PlayReady (WebInitiator) 36
Widevine supported with EME/MPEG-DASH/CENC 37
HTML + MPEG-DASH + CENC + DrmAgent + PlayReady 38

Debugging and Deployment 40

Overview 40
How to enable serial debug 41
How to flash debug firmware on MSD6586/6886 41
How to flash debug firmware on MTK5658/5659 42
How to debugging apps on MT5658/5659 42
How to debugging apps on MSD6586 42
How to debugging apps on MSD6886AU U3 42
How to debugging apps on MSD6886EU U3 42
How to debugging apps on VIDAA U4(MSD6886EU U4/MT9602 U4) 43

W3C/HTML5 standard for VIDAA Platform 44

HTML5 Video Audio 44
HTML5 Track & Media 45
Communication 47
Graphic 48
Web Applications 51
User Interaction 53
Supporteder 53
Files 53
History 54
Static CSS 54
Dynamic CSS 58
iframe element 59
WebSocket 59
Text-To-Speech (TTS) 59
WebGL 60

3/61
 Web App Development Technical Guide CONFIDENTIAL

1 System Overview
1.1 Introduction
This document provides a detailed technical introduction on HTML5 application (app) development for the VIDAA TV.

This document outlines the platform functionalities and provides guidelines on how to develop Web APP for VIDAA TV.

This document is targeted for an audience who are interested in understanding the technical details surrounding web app
development for VIDAA TV. It is assumed that the target audience is familiar with basic HTML5 technologies.

The keywords "MUST", "MUST NOT", "SHOULD", "SHOULD NOT", and "MAY" in this specification are to be interpreted as
described in RFC2119. An abridged list is included below for reference:

❖ MUST - This word, or the terms "REQUIRED" or "SHALL", mean that the definition is an absolute requirement of the
specification.

❖ SHOULD - This word, or the adjective "RECOMMENDED", mean that there may exist valid reasons in particular
circumstances to ignore a particular item, but the full implications must be understood and carefully weighed against
the negative impact on the end-user experience.

❖ MAY - This word, or the adjective "OPTIONAL", mean that an item may or may not be implemented at the discretion of
the implementer.

1.2 Architecture Overview

The following figure illustrates the architecture of VIDAA Platform. VIDAA platform is a Linux based system that is divided
into several architectural layers. The supporting layers include the operating system (OS), driver and middleware layers.
The upper layer consists of the application and application framework layer. This document will discuss the upper layers in
further detail.
VIDAA platform provides rich media playback functionalities including play, pause, stop and scaling. Various streaming
protocols including HTTP\HLS\DASH\MSS are supported by the media player plugin module. It also has a DRM manager to
manage digital rights and a streaming manager to control the stream.

1) Web App Framework

The web application (app) framework allows developers to use HTML5 and related web technologies to develop apps that
run on the VIDAA platform.

4/61
 Web App Development Technical Guide CONFIDENTIAL
It is a browser-based environment that supports standard HTML5, CSS, Javascript, Javascript Library(e.g., jQuery), UI
Framework(e.g., Bootstrap), Javascript Framework(e.g., Vue, Angular) as well as some VIDAA proprietary System API that
enables developers to enrich their app’s functionality. These proprietary Javascript APIs are described in section VIDAA
System API.

2)Apps

VIDAA platform supports two types of applications; web-based applications(hosted app, recommended) and native
applications.

The hosted app is executed by the URL with the web app framework on your TV. The hosted app downloads app resources
from a remote server and displays them on your TV.

Because hosted (server hosted) web apps reside on a web server, you need to consider connectivity to a remote webserver
to serve the content of the apps successfully. However, you can update them at any time without having to worry about
pushing updates to the TV.

3)Launcher

The Launcher Screen provides information about access to apps, connected devices, content search, and recommendation.

When the Web APP is developed and submitted, your app will be preset to the VIDAA system or stored in the APP Store,
according to different cooperation agreements. Users can install APPs from the APP Store to the Launcher. Users can
choose to launcher your APP from Launcher, search or according to the recommended content provided by the system.
For more information about the recommendation and deep-link, please refer to Metadata Integration Specification.

5/61
 Web App Development Technical Guide CONFIDENTIAL

2 Quick Deploying
This section just shows how to quickly deploy the web app to the real TV for validation under existing web app, for more
instructions on how to developing and debugging, please refer to Chapter 9. Debugging and Deployment.

1) Open the browser and input: hisense://debug in address bar, then enter

2) Input the name, URL and icon(optional), then click install. A keyboard here is recommended to make your operation
convenient. Once the “INSTALL” button is clicked, the information above is submitted and the application is installed,
The right area as bellow shows some information of the debug platform that may be critical to the developer, you can
operate more correctly with it.

a) The “Installed Apps” selector shows the items of the apps one has installed by the debug platform. If one has
never installed some apps, this item shows null. You could not input anything in this section.

b) The “App Name” item indicates that one must input the app’s name he has developed, which is necessary for
installation. So one should not leave this input null.

c) The “Thumbnail” (optional)represents the icon of an app on the launcher of the TV. It must be filled in the format
of a URL like www.hisense.com/logo.png which shows the source of the image used as the icon.

d) This “IconSmall” (optional)and “IconLarge”(optional) items also needs an “URL-format” input individually for the
use of some interactive scenario. When one of these items is neglected, a default image (as the illustration below)
is provided to finish the installation, which is as same as the “Thumbnail” item.

e) The “App Url” input box is also necessary and must be input in the format of a URL. More importantly, this URL
should start with “http” or “https” which, once violated, could not start an application. The developer should
believe in this rule and recognize it as the most important. The “App Url” indicates the location of the application
the developer will install, so this input box should be filled inaccurately.

f) The "Resolution"(720 default) item indicates that the resolution of an app, if your app is designed for FHD
resolution, please select 1080, otherwise 720(HD).

3) Press the 'Exit' button on remote and press the 'apps' button to the apps page and enter the application at the
bottom.

4) If everything is ok, you can see your Web APP on the TV screen.

5) You can find the web app installed on the launcher-apps,also you can uninstall the application by pressing the red key
of remote controller.

6/61
Web App Development Technical Guide CONFIDENTIAL

7/61
 Web App Development Technical Guide CONFIDENTIAL

3 Web Engine
A web app on the VIDAA platform runs within a browser engine based on Chromium. Almost all Chromium features and
Chromium supported web standards are available to app developers. The developer should keep in mind, a TV will have
limitations, normally without a keyboard, mouse and/or touch screen support. TVs also tend to have a slower CPU and less
memory (RAM) compared to a typical PC, tablet or handset.

The following table shows web engine versions depending on VIDAA chipset versions:

SoC version Region Release Year Web Engine

MT5655/5657 ALL 2015~2016 Opera core(Presto 2.12)

MT5658 ALL 2016-2017 Opera core(OMI/4.9 Martell-2.312 Chromium 53)

MT5659 ALL 2017-2018 Opera core(OMI/4.11 Martell-3.103 Chromium 53)

MSD6586 ALL 2017-2018 Opera core(OMI/4.9 Martell-2.312 Chromium 53)

MSD6886 AU 2019-2020 Odin core(Chromium 57)

MSD6886 EU 2019 Sraf core (Chromium 47)

MSD6886 EU 2020 Opera core(OMI/4.20 Chromium 77)

MT9602 ALL 2020 Opera core(OMI/4.20 Chromium 77)

3.1 Features
VIDAA Platform implements the VIDAA browser engine, which is based on WebKit as an application programming
environment for content providers and content aggregators. The supported features are listed in the following list.

❖ HTTP,HTTPS
❖ HTML 4.01 5.0
❖ XML\XSLT\XPath\XHTML 1.0/1.1
❖ CSS 2.1 3
❖ Video & Audio
❖ Track & Media
❖ Web Messaging & WebSocket
❖ Canvas & SVG
❖ Javascript 1.6 and above
❖ AJAX
❖ JSON
❖ History
❖ Cookies & Storage
❖ offline web applications
❖ WebRTC (software decoding)
Below is a list of browser features that are not supported by VIDAA platform and apps for the VIDAA platform MUST NOT
rely on. This list is not intended to be exhaustive or exact but highlights some important exclusions. There may be other
features that are unavailable or have limited functionality compared to a desktop or mobile browser.

❖ Adobe Flash
❖ Audio Output Device API

8/61
 Web App Development Technical Guide CONFIDENTIAL

❖ Device Orientation
❖ Downloaded Plug-ins (including NPAPI and PPAPI)
❖ Drag and Drop Directories
❖ Extensions
❖ FTP
❖ Geolocation
❖ High-Resolution Timestamp
❖ JavaScript dialogs
❖ Password manager
❖ Pointer Events
❖ Touch Events
❖ Vibration API
❖ Web Audio
❖ Web Notifications
❖ WebRTC (hardware decoding)
❖ JAVA
❖ Files
Any use of pop-ups windows or dialogs is prohibited for VIDAA TV WebApp and are blocked by the VIDAA.
To assess web standards compliance and the availability of a particular feature you can check these online resources:

● "Can I Use" (http://caniuse.com/)

● "Chromium Platform Status" (http://chromestatus.com/)
Look for the Chrome (Chromium) version in Specification and Software versions above.

Refer to Chapter 10. W3C/HTML5 standard for VIDAA Platform for detailed instructions.

3.2 Cookies
The maximum number of cookies stored in the MSD6586/6886 platform database is set to 2000, each using a maximum of
4096 bytes. An app MAY use up to 180 cookies per domain and each cookie will be available for minimum 30 days.

3.3 Temporary and Persistent storage

App developers must be aware that VIDAA TVs have very limited storage capacity.
An app SHALL NOT rely on Persistent Storage Quota request when using the Quota Management API.
Note that the Chrome ‘unlimited storage’ permission is not available to VIDAA TV apps.

3.4 User Agent

For VIDAA platforms, there are at least one “Hisense”(2019 or earlier) or "VIDAA"(2020 or later) keywords. The rest is
changing, such as the SDK version of the chrome kernel version, model, and software version.
JavaScript application can get the string from the HTML DOM property, navigator.userAgent. The same string will be
included in the HTTP request User-Agent header.
The following is an example of the User Agent strings Example,
2019 or earlier:

9/61
 Web App Development Technical Guide CONFIDENTIAL

Mozilla/5.0 (Linux armv7l) AppleWebKit/537.36 (KHTML, like Gecko)

Chrome/57.0.2987.133 Odin/3.2987.2.10 Safari/537.36 Model/Hisense-$Platform ($Brand;$modelName;$softVersion)

2020 or later:
Mozilla/5.0 (Linux armv7l) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.65 Safari/537.36 OPR/46.0.2207.0
OMI/4.20.0.378.Catcher2.28
Model/Hisense-$chip
VIDAA/4.0($BrandName;SmartTV;$modelname;$chipset/$firmware;$Resolution)

Model/Hisense-$chip is a constant strings, identify the manufacturer information.The 6886U4 is Model/Hisense-MSD6886,

and the 9602 platform is Model/Hisense-MT9602
The following table illustrates the fields in User Agent string and User-Agent HTTP header.
● Brandname: brand name
● SmartTV: constant strings
● modelName: TV model name
● $chipset: The 6886U4 is mstar6886, the 9602 platform is mt9602
● firmware: firmware version
● $Resolution:’UHD’ if platform support UHD, else FHD for 1080p and HD for 720p
User Agent strings may be different for different chips.

Chips User Agent strings

MT5658 Mozilla/5.0 (Linux armv7l) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36
OPR/40.0.2207.0 OMI/4.9.0.237.Martell-2.312 Model/Hisense-MT5658-SDK4-9
(;Hisense;SmartTV;V0000.01.00a.J0727;HE55A6500UWTS)

MT5659 Mozilla/5.0 (Linux armv7l) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36
OPR/46.0.2207.0 OMI/4.11.3.57.Martell-3.103 Model/Hisense-MT5659-SDK4-11
(;Hisense;SmartTV;V0000.01.00A.J0802;HE39A5600FWTS)

MSD6586 Mozilla/5.0 (Linux armv7l) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36
OPR/40.0.2207.0 OMI/4.9.0.183.CATCH-412.26 Model

MSD6886AU Mozilla/5.0 (X11; Linux armv7l) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133
U3 Odin/3.2987.2.10 Safari/537.36 (Hisense;55A6502EA;V0000.01.00a.I1214) MSD6886

MSD6886EU Mozilla/5.0 (X11; Linux x86_64;) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.106
U3 Safari/537.36 SRAF/4.0 Hisense-MSD6886(Hisense;HE55A7000EUWTS;V0000.01.00A.J0828)

MSD6886EU Mozilla/5.0 (Linux armv7l) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.65 Safari/537.36
U4 OPR/46.0.2207.0 OMI/4.20.0.378.Catcher2.28 Model/Hisense-MSD6886
VIDAA/4.0(Hisense;SmartTV;HE55A6900FUWTS;mstar6886/V0000.01.00a.J1105;UHD)

MSD6886AU Mozilla/5.0 (X11; Linux armv7l) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133
U4 Odin/3.2987.2.10 Safari/537.36 Model/Hisense-MSD6886
VIDAA/4.0(Hisense;SmartTV;HA65U6F2UWTG;mstar6886/V0000.01.00B.J1230;UHD)

10/61
 Web App Development Technical Guide CONFIDENTIAL

MT9602 Mozilla/5.0 (Linux armv7l) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.120 Safari/537.36
OPR/46.0.2207.0 OMI/4.20.2.31.Catcher3.21 Model/Hisense-MT9602
VIDAA/4.0(Hisense;SmartTV;HU40E5600FFWV;MTK9602/V0000.01.00F.K0106;HD)

Apps SHOULD NOT associate specific User Agent strings with device feature sets. Apps should test for the presence of
specific features whenever possible.Apps can get platform information from the System API.

11/61
 Web App Development Technical Guide CONFIDENTIAL

4 Multimedia Player
4.1 Streaming Protocol
The video player on VIDAA supports various standards and formats. It conforms to the MSE/ DVB-DASH/HLS/MSS
specifications. The HTML5 based applications can use video tag to provide the streaming services to the end user.

However there are recommendations for the video and streaming formats on VIDAA, since those profiles are widely used
and well tested already.

The following tables lists the recommended video formats used on VIDAA platform.

Protocol Version or Profile MIME-Type Comments

Http Live Streaming HLS Version 3 application/vnd.apple.mpegurl Only support basic features for VOD
streaming and live streaming.
application/x-mpegURL

MPEG-DASH ISO/IEC 23009-1 2014 application/dash+xml Recommended. Conform to the DVB-

，Version 4. DASH specifications.
application/vnd.ms-
playready.initiator+xml

Microsoft Smooth Version 2 application/vnd.ms-sstr+xml

Streaming
application/vnd.ms-
playready.initiator+xml

HTTP/HTTPS HTTP1.1 Recommended.

Apps MAY rely on Media Source Extensions to be supported according to the MSE specification.
The following combinations of containers and codecs are supported:

Container Audio codecs Video codecs Comments

MP4 AAC / MP3 H.264 / H.265 Recommended

MP4 AAC / MP3 <no video>

MP4 <no audio> H.264 / H.265

WebM Opus / Vorbis VP8 / VP9

WebM <no audio> VP8 / VP9

WebM Opus / Vorbis <no video>

4.2 DRM System

VIDAA platform provides Digital Rights Management (DRM) service to support DRM protected content playback.
Microsoft PlayReady and Google Widevine (Modular) are the two DRM systems currently integrated on all VIDAA platform.
Because of the different browser solutions, some DRM system rely on Opera SDK, some rely on Mstreamer of MTK solution
such as 6886 platform, which separates EME type and non-EME type.

4.2.1 ClearKey
● Supported with EME

12/61
 Web App Development Technical Guide CONFIDENTIAL

4.2.2 PlayReady

● Supported with EME

● Supported with Web Initiator
● PlayReady Header Object v4.0.0.0 is supported
● Supported for security level "2000" or higher

4.2.3 Widevine

● Supported if the platform has Widevine DRM installed

● supported with EME
● supported with security level “L1” or lower
● MAY support "server certificate" and "privacy mode" features
● MAY support persistent licences

4.2.4 AES-128

● Supported for HLS

EME can only be used on secure contexts, it can not be used on any pages served over HTTP. App developers MUST use a
secure origin (HTTPS).
The more details as following:

Chips Browser SDK Ver DRM Supported

MT5655 Opera3.6 Playready 2.0

MT5657 Opera3.6 Playready 2.5

MT5658 Opera4.9 Playready2.5 + SL2000

Widevine3.2.2 + Level 1 (YouTube)

MT5659 Opera4.11 Playready2.5 + SL2000(Other apps)

Playready3.0 + SL3000(Netflix5.0 only)

Widevine3.2.2 + Level 1 (YouTube)

MSD6586 Opera4.9 Playready2.5 + SL2000

Widevine 3.2.1 + Level (YouTube)

MSD6886AU Odin Non-EME: Playready2.5 + SL2000

EME: Playready3.0 + SL 3000

Widevine3.2.2 + Level 1 (YouTube)

MSD6886EU U3 Sraf Non-EME: Playready2.5 + SL2000

EME: Playready3.0 + SL 3000

Widevine3.2.2 + Level 1 (YouTube)

MSD6886EU U4 Opera4.20 PlayRead4.0 + SL3000

13/61
 Web App Development Technical Guide CONFIDENTIAL

Widevine 3.2.2 +Level1

MT9602 U4 Opera4.20 PlayRead4.0 + SL3000

Widevine 3.2.2 +Level1

4.3 Supported Video Codec

Video codecs Resolution Bit Rate Comments

MPEG 1/2 1080P@60fps 80Mbps Recommended.

MPEG4 1080P@60fps 40Mbps Recommended.

Divx 3.11 1080P@60fps 40Mbps

Divx 4.12

Divx 5.x

Divx 6, XviD

Sorenson H.263 1080P@60fps 40Mbps

H.263 1080P@60fps 40Mbps Recommended.

H.264 4096*2160@30fps 135Mbps Recommended.

1080P@60fps

HEVC/H.265 4096*2176@60fps 100Mbps Recommended.

MVC 1080P@30fps 80Mbps

AVS 1080P@60fps 40Mbps

AVS+ 1080P@60fps 50Mbps

WMV3 1080P@60fps 40Mbps

VC1 1080P@60fps 40Mbps

Motion JPEG 1080P@60fps 10Mbps

VP8 1080P@60fps 20Mbps

VP9 4096*2176@60fps 100Mbps

RV30/RV40 1080P@60fps 40Mbps

4.4 Supported Audio Codec

Audio codecs Sample rate Bit Rate Comments

AAC-LC, HEAAC 8KHz~48KHz -

AC3 32KHz,44.1KHz, 48KHz 32Kbps~640Kbps Recommended.

DRA 8KHz~48KHz < 1533Kbps

14/61
 Web App Development Technical Guide CONFIDENTIAL

DTS Up to 48KHz < 1.5Mbps

DTS LBR 12KHz, 22KHz, 24KHz, 44.1KHz, 48KHz, Up to 2Mbps

DTS XLL Up to 96KHz -

EAC3 32KHz,44.1KHz, 48KHz 32Kbps~640Kbps

FLAC 8KHz~96KHz < 1.6Mbps

G711 A/mu-law 8KHz 64Kbps~128Kbps

IMA-ADPCM 8KHz~48KHz 384Kbps

MS-ADPCM

LBR(cook) 8KHz, 11.025KHz, 6Kbps~128Kbps

22.05KHz, 44.1KHz

LPCM 8KHz~48KHz 64Kbps~1.5Mbps

MPEG1/2 Layer1 16KHz~48KHz 32Kbps~448Kbps Recommended.

MPEG1/2 Layer2 16KHz~48KHz 8Kbps~384Kbps Recommended.

MPEG1/2 Layer3 16KHz~48KHz 8Kbps~320Kbps Recommended.

VORBIS Up to 48KHz -

WMA 8KHz~48KHz 128bps~320Kbps

WMA 10 Pro M0 48KHz < 192kbps

WMA 10 Pro M1 48KHz < 192kbps

WMA 10 Pro M2 96KHz < 768kbps

4.5 Supported Image

Imgae Photo Resolution(suggests)

JPEG Base-line 15360*8640 (1920*8 * 1080*8)

Progressive 1024*768

PNG non-interlace 9600*6400

interlace 1200*800

BMP - 9600*6400

MPO Base-line 15360*8640 (1920*8 * 1080*8)

Progressive 1024*768

GIF - 6400*4800 (800*8 * 600*8)

15/61
 Web App Development Technical Guide CONFIDENTIAL

4.6 Supported Container

Container Audio codec Video codecs

ISO AAC-LC H.264

BMFF(MPEG4)
HE-AAC v1 H.265

HE-AAC v2

MP3

Dolby AC3

Dolby E-AC-3

MPEG2-TS AAC-LC h.264

HE-AAC v1

HE-AAC v2

MP3

Dolby AC3

Dolby E-AC-3

ADTS / AAC AAC-LC None

MP3 HE-AAC v1

HE-AAC v2

MP3

4.7 Subtitles and Closed Captioning

Apps MAY rely on support for in-band and out-of-band text tracks according to the table below

Media delivery In-band Out-of-band

method Subtitles Subtitles

Progressive Not supported supported

playback

HLS Not supported supported

MPEG-DASH supported supported

Smooth Streaming supported supported

MSE Not supported supported

1) Internal subtitle

Both
File Extention Container Subtitle Codec
6586/6886
dat, mpg, mpeg,
MPG. MPEG DVD Subtitle Yes
vob
ts, trp, tp TS DVB Subtitle Yes
mp4 MP4 DVB Subtitle Yes

16/61
 Web App Development Technical Guide CONFIDENTIAL
UTF-8 Plain Text
ASS, SSA,
UTF-8 Plain Text
mkv MKV Yes
VobSub
DVD Subtitle
AVI(1.0, 2.0), XSUB,
divx, avi Yes
DMF0,1,2 XSUB+

2) External subtitle

Both
File Extention Subtitle Parser
6586/6886

.srt SubRip Yes

.ssa/,ass SubStation Alpha Yes

.smi SAMI Yes

SubViewer

MicroDVD
.sub Yes
DVDSubtitleSystem

SubIx(VobSub)

.txt TMPlayer Yes

4.8 4K Video & HDR

most VIDAA platforms supports 4K video resolution & HDR, the developer can get HDR support from system API, all
platform(except MT5659 & 9602 2K platform) supports 4K video resolution.

17/61
 Web App Development Technical Guide CONFIDENTIAL

5 User Interface and Experience

5.1 IR remote

All VIDAA TV models support IR Remote. APP should be fully navigable with the remote control using the following keys:4
ways(Up/Down/Left/Right), OK, and Back.
VIDAA Platform apps MUST NOT rely on platform specific spatial navigation mechanisms and SHOULD provide such
navigation implemented by Application (e.g. in JavaScript) instead. Spatial navigation SHOULD be explicitly blocked (by
calling preventDefault) if the Applications implements its own navigation mechanism. The use of directional keys and the
select key are mandatory and allow the user to navigate through the app. If the directional keys are not handled by the
application, this MAY trigger automatic (spatial) navigation, but the result of this is undefined.
Once an application is launched, it is opened full screen in a new window and it runs completely “chromeless”, with no
address bar or user interface controls. Users will be able to close the application and return to the main TV screen (or
dashboard) via the remote control’s “Exit / Close” and/or “Back / Return” key (as mentioned above). Developers SHOULD
nonetheless provide an explicit option or button in their in-frame layouts to close the app, with a simple call to the
window.close() method. Note that again, Any use of pop-ups windows or dialogs is prohibited for VIDAA TV WebApps.
The Back/Return key is available on the remote control with the purpose of performing the back operation or closing of the
app. The Back/Return key is passed to the app, so it can be handled by it. On the remote control, the key may be marked
with "Back", "Return", or something similar. The Back/Return key should provide the user with typical back navigation and
an exit path via window.close() to leave the application and return to the previous screen (i.e. the TV Store, if the
application was launched from there). Optionally, the developer may add an exit confirmation dialog to prevent the user
from closing the application accidentally.
To enhance the user experience during streaming media playback, we strongly recommend that users implement the PLAY,
PAUSE, PLAY_PAUSE, STOP, NEXT, PREV, FF, REWIND, and other buttons.

5.2 Key Mapping

VIDAA TV Devices provide standardized key codes to be used in apps. Note that system Key is not distributed to the app,
Apps MUST NOT use these keys.

✧ Application developers can use them directly by keycode constant.

On VIDAA Platform, Browser has mapped these keys.

18/61
 Web App Development Technical Guide CONFIDENTIAL

Remote key Keycode constant Keycode Availability Implementati

value on

↑ VK_UP 38 Always present Mandatory

→ VK_RIGHT 39 Always present Mandatory

↓ VK_DOWN 40 Always present Mandatory

← VK_LEFT 37 Always present Mandatory

Confirm/Select/OK VK_ENTER 13 Always present Mandatory

Back/Return VK_BACK_SPACE 8 Always present Mandatory

BLUE VK_BLUE 406 Usually present Recommended

RED VK_ RED 403 Usually present Recommended

GREEN VK_GREEN 404 Usually present Recommended

YELLOW VK_YELLOW 405 Usually present Recommended

0 VK_0 48 Usually present Recommended

1 VK_1 49 Usually present Recommended

2 VK_2 50 Usually present Recommended

3 VK_3 51 Usually present Recommended

4 VK_4 52 Usually present Recommended

5 VK_5 53 Usually present Recommended

6 VK_6 54 Usually present Recommended

7 VK_7 55 Usually present Recommended

8 VK_8 56 Usually present Recommended

9 VK_9 57 Usually present Recommended

PLAY VK_PLAY 415 Two independent keys (Play \ Pause) or Mandatory

one key (Play_Pause)

PAUSE VK_PAUSE 19 Two independent keys (Play \ Pause) or Mandatory

one key (Play_Pause)

PLAY_PAUSE VK_PLAY_PAUSE 463 Two independent keys (Play \ Pause) or Mandatory

one key (Play_Pause)

STOP VK_STOP 413 Usually present Mandatory

FF (Fast-Forward) VK_FAST_FWD 417 Usually present Recommended

REWIND VK_REWIND 412 Usually present Recommended

NEXT VK_TRACK_NEXT NULL Not available in some remote controllers Recommended

PREV VK_TRACK_PREV NULL Not available in some remote controllers Recommended

CHANNEL UP VK_CHANNEL_UP 427 Experimental features Recommended

19/61
 Web App Development Technical Guide CONFIDENTIAL

CHANNEL DOWN VK_CHANNEL_DOWN 428 Experimental features Recommended

SUBTITLE VK_SUBTITLE System key Not available in some remote controllers Unavailable

INFORMATION VK_INFO System key Not available in some remote controllers Unavailable

Exit N/A System key Always present Unavailable

Menu VK_MENU System key Usually present Unavailable

5.3 Navigation Example

Below is an example of handling navigation with JavaScript.Application Developers can also implement navigation using a
common framework.
document.addEventListener("keydown", function(ev) {
switch (ev.keyCode) {
case VK_LEFT:
// Handle mandatory key ←
break;
case VK_RIGHT:
// Handle mandatory key →
break;
case VK_UP:
// Handle mandatory key ↑
break;
case VK_DOWN:
// Handle mandatory key ↓
break;
case VK_ENTER:
// Handle mandatory key Confirm / Select / OK
break;
case VK_BACK_SPACE:
// Handle mandatory key Back / Return
break;
}
// Block the browser from handling the keydown event.
ev.preventDefault();
}, false);

5.4 Exit
Because when an app is launched, it opens in a full screen in a new window on the TV, it runs completely “chromeless”,
with no address bar or user interface controls. The Developer MUST provide the ability to exit the app by pressing the
remote control’s Back key on the homepage with a simple call to the window.close() method.
Since some platform’s remote don’t have an Exit key, users will be able to close the app and return to the main TV screen
or source(eg. VIDAA Free) via the remote control’s Back/Return” key.

5.5 Virtual Keyboard

Even though VIDAA Platform Devices support input elements and forms, and also provide a “Virtual Keyboard” (“On-

20/61
 Web App Development Technical Guide CONFIDENTIAL
Screen Keyboard”) it is NOT RECOMMENDED to use input elements in Applications. Any use of <input>, all types,
<textarea>, <form>, <fieldset>, <select>, <option>, <optgroup>, <datalist>, <keygen> elements SHOULD be avoided since
these don’t provide a great user experience on a TV.
VIDAA TV Devices provide an “On-Screen Keyboard” or “Virtual Keyboard”. Applications MAY rely on this to allow the user
to enter text. Application developers cannot make any assumptions about the visual appearance of this keyboard since this
is dependent on the make and model of the device. Application developers should be aware that, when activated, the
“Virtual Keyboard” covers part of the TV screen. Note that this sometimes leads to design inconsistencies in the
application.
If the developers prefer the application to look according to their specific design for text inputs, they MAY implement their
own text input mechanism in JavaScript (for example using contenteditable divs instead of text fields).
It is also important to note that on some VIDAA TVs the “Virtual Keyboard” supports only a few languages, (e.g. English,
Spanish, French), some languages may be missing.
The following is an example to trigger the on screen keyboard with the <input> element:
<input type=”text” id=”user” placeholder=”Enter your user name”></input>
Input can be hidden from the screen by using the password value:
<input type=”password” id=”user” placeholder=”Enter your password”></input>

5.6 External Input Devices

Although VIDAA TV Devices support external input devices such as pointer remote, USB keyboard and mouse, Application
developers MUST NOT rely on these.

5.7 UI Resolution
App developers should be aware of possible overscan issues and should ensure that the app works and displays correctly
with margins applied within the visible area.
VIDAA Platforms may have a certain amount of overscan. This means that margins in your app may be shown outside the
visible area of the TV display. While it is possible for users to turn off overscan, it is recommended that your app is
designed with this invisible margin in mind, as most users are likely unaware of this option. The overscan amount varies
between VIDAA Platforms but it is advisable to assume that a 5% margin might not be visible to the user. Background
image or none critical graphics may be placed in over-scan area.All clickable items, text and company branding shall be
placed within the safe area, only part of clickable elements may be placed in the overscan area as long as a large part is
also in the safe area so it can be safely activated.
Although VIDAA Platforms may support different screen resolutions, apps MUST be designed for HD resolution (1280x720)
and SHOULD BE scalable to Full HD (1920x1080). The MSD6586/6886 platform only supports HD resolution for apps. In
addition, apps MAY be designed to be scalable to other resolutions for future-proofing. Apps SHOULD define the viewport
META tag specifying the viewport resolution of the app. If the viewport size is not specified, the viewport will be set to HD
resolution.
Apps designed to automatically adapt to different resolutions, either by responsive design or otherwise, MUST explicitly
define the viewport to match the device resolution with the following META tag:
<meta name="viewport" content="width=device-width, height=device-height">
Apps specifically designed for Full HD (1920x1080) must define this with the following META tag:
<meta name="viewport" content="width=1920">
Note that VIDAA Platform does not set the physical screen size or pixel sizes in the firmware, so this information is not
available from JavaScript.
Note that the Media Player of a device has its own capabilities and may be able to play video in other resolutions than the

21/61
 Web App Development Technical Guide CONFIDENTIAL
application is rendered in. This can be detected in JavaScript by using the canPlayType method on the HTML5 video
element.
Text size MUST be large enough to be seen on TV screen from 3m (10 feet), the average distance that a user sits from the
TV. The minimum text size RECOMMENDED for VIDAA Platform apps is 3/100 of the screen height or ”3vh” in CSS (this
gives approximately 32px for a screen resolution of 1920x1080px)

5.8 Fonts
VIDAA Platforms provide Sans Serif fonts containing all the characters required to properly render the text in the languages
available on the device. Right-to-left text rendering is also supported if required by any language available on the device.
However, the identity looks and language coverage of these fonts cannot be guaranteed across all devices. Therefore, app
developers SHOULD NOT rely on built-in fonts but instead use downloadable web fonts. The following should be
considered while using web fonts:

❖ Font resources MUST be in the WOFF / WOFF2 (Web Open Font Format) or TTF (TrueType Font) file format

❖ Font resources SHOULD NOT be large, otherwise they can take a long time to download and also consume a lot of
memory and CPU power

❖ The Font Loading API can be used to improve text rendering performance.

22/61
 Web App Development Technical Guide CONFIDENTIAL

6 Performance & Optimization

Performance requirements for VIDAA TV apps are significantly stricter compared to web apps for PC or mobile.
Performance considerations, recommendations for enhancements, and optimization approaches are similar across devices
and can be applied to all VIDAA TV apps.
It is important to understand that even high-end TV devices have very limited computational, memory and graphics
resources.
The following is the specification of different platform:
Chips CPU GPU RAM Resolution
MT5658 ARM CA53x2; GPU T860 MP2 @ 492MHz ~1.5GB UHD
CPU clock:1.1GHz
MT5659 ARM CA9x2; Mali450-MP2 @450MHZ ~1G(EU)/ FHD
CPU clock:900MHz ~768M(US) Max 2K 2160P
MSD6586 ARM CA9x2; Mali400 MP2 @ 550MHz ~1.5GB UHD
CPU clock:1.2GHz
MSD6886 ARM CA55x4; Mali470 x 3 @ 470MHz ~1.5GB UHD
CPU clock:1.2GHz
MT9602 ARM CA53x4; Mali G52 @ 550MHz ~1G/1.5G FHD
CPU clock:1.15~1.45GHz 1366x768(32 inch
only)
1920x1080
UHD

Large screen with Full HD (1920x1080, 2M pixels), or UHD (3840x2160, 8M pixels), this makes the VIDAA platform much
slower than an average PC. Note that most of these resources are reserved for the platform, operating system, and
browser engine, so apps may see as little as 300MB (may be different for different chips).

6.1 Memory Consumption

Memory consumption is one of the most sensitive parameters for an application in terms of performance. As mentioned
above, the amount of memory available for applications is very limited on the VIDAA platform. Typically, TV devices have a
hard memory limit which means there is a chance that apps will be killed if they use a lot of memory.
Note that in the case of excessive memory use, before being killed, apps may suffer from significant performance
degradation. Therefore, VIDAA TV apps SHOULD NOT use more than 300MB of memory (may be different for different
chips).

6.2 Graphics requirements and animations

VIDAA TV apps SHOULD NOT use heavy graphics and complex animations.
Even though modern TV devices are now using specialized GPU chipsets, their graphics performance is usually still quite
modest.

6.3 Hardware Accelerated Features

Unfortunately, not all TV devices support OpenGL ES 2.0, so app developers MAY NOT rely on CSS 3D transforms and
WebGL features.

6.4 Transport Layer Security

Apps should be protected with HTTPS, even if there is no sensitive communication. HTTPS provides critical security and

23/61
 Web App Development Technical Guide CONFIDENTIAL
data integrity both for the Application and for the people that entrust the Application with their personal information.

6.5 Same-Origin Policy

VIDAA Smart TV Devices apply the Same-Origin policy. This is sometimes less permissive than other browser engines and
applications may need to adapt if they are porting their applications from such a platform. The straightforward way to fix
applications breaking the Same-Origin policy is to use CrossOrigin Resource Sharing (CORS).

6.6 Mixed Content

All kinds of Active Mixed Content (mixing secure and insecure requests) are serious security vulnerabilities and not allowed
in VIDAA Smart TV Applications. The insecure requests will be blocked by the browser engine.

6.7 Tips
❖ Since TV has lower performance than PC, optimization must be done with JavaScript functions. A time-consuming task
should be separated into several tasks so that it can be implemented with several functions.
❖ If animation and transition features are implemented without considering performance using UI Framework library
which is based on JavaScript and CSS, performance issues can be caused.
❖ Although the Transparent function with the usage of CSS filter is useful for making fancy UI, it may cause performence
issue due to the huge operations.
❖ If you minimize the usage of JavaScript functions in the initial page, the execution time will be reduced. Hence, we
recommend to make the ‘onload’ function simple.
❖ For Web application’s optimization, we recommend to analyze and optimize the contents to the page speed.
(https://developers.google.com/speed/pagespeed/)
❖ The speed of Web application will be significantly different depending on the size of each page and how complex the
Web application is. If a Web application consists of one page implemented with multiple content blocks including hidden
blocks, this may cause performance issues. In this case, the application has to be divided into multiple images, and each
page has to be consists of limited number of content blocks to improve the performance.
❖ It is recommended not to use a redirect page because it deteriorates the performance by increasing the loading time.
❖ Keep pagesize small and limit the number of elements in a page.
❖ Avoid using large size images.
❖ Resources need to be released at the end of streaming.
video.src = ""; // if using source tag, video.children[0].src = ""
video.load();

24/61
 Web App Development Technical Guide CONFIDENTIAL

7 VIDAA System API

7.1 System Information
1) Get DeviceID

Get device ID interface. This interface will retrieve a unique id for the device.

Interface Name

Hisense_GetDeviceID( )

Return Returns a 56bytes(max) string that represents the device id.

Example:

U4: 861003009000006000000641a9ceff9b0d3706276f8712e3d4b793d8

U3: aa:bb:cc:dd:ee:ff

Usage

Var deviceID;//Hisense Unique ID

deviceID= Hisense_GetDeviceID();//Get Hisense unique device ID

2) Get Firmware Version

Get firmware version interface. This interface will retrieve the firmware version for the device.

Interface Name

Hisense_GetFirmWareVersion( )

Return Returns a string that represents the firmware version.

Example: V00.01.00a.F0116
Usage

Var Version;//Hisense FirmWareVersion

Version= Hisense_GetWareVersion();//Get Hisense FirmWareVersion firmware

3) Get Country Code

Get country code interface. This will retrieve the country code for the device.

Interface Name

Hisense_GetCountryCode( )

Return Returns a Country abbreviations string that represents the country code.

Example : CAN—Canada, MEX—Mexico

Usage

var countryId :

countryId = Hisense_GetCountryCode () ;//get the country abbreviations string

25/61
 Web App Development Technical Guide CONFIDENTIAL

comment:
The country abbreviation represents country code as follows
USA—USA ,CAN—Canada, MEX—Mexico, PAN—Panama ,CRI—CostaRica, NIC—Nicaragua , HND—Honduras, SLV—
Salvador, GTM—Guatemala ,DMA—Dominican, CUB—Cuba, TTO—Trinidad , JAM—Jamaica , CUW—Curacao, BRB—
Barbados, MAF—St.Maarten PRI—PuertoRico

4) Get 4K Support Status

Get 4K support status interface. This will retrieve the 4K support status for the device.

Interface Name

Hisense_Get4KSupportState( )

ParamName Description

Return Returns true if 4K is supported otherwise returns false.

Usage

var 4kSupport;

4kSupport = Hisense_Get4KSupportState();//Get 4k support

5) Get TV Brand

Get TV brand interface. This will retrieve the TV brand for the device.

Interface Name

Hisense_GetBrand( )

ParamName Description

Return Returns a brand fullname string that represents the TV brand.

Example: hisense, sharp

Usage

var brand;

brand = Hisense_GetBrand();

6) Get TV Model Name

Get TV model name interface. This will retrieve the TV model name (hardware version) for the device.

Interface Name

Hisense_GetModelName( )

ParamName Description

Return Returns a string that represents the TV model name.

Usage

26/61
 Web App Development Technical Guide CONFIDENTIAL

var modelName;

modelName = Hisense_GetModelName();

7) Get Support for HDR

Get HDR support status interface. This will retrieve the TV brand for the device.

Interface Name

Hisense_GetSupportForHDR( )

ParamName Description

Return Returns a string that is type of HDR, depending on what the platform currently supports.

Example: # 0:NOT support; 1:HDR10; 2:HLG; 3:HDR10+HLG； 4:HDR10+HLG+(HDR10+)

Usage

var hdr;

hdr = Hisense_GetSupportForHDR();

8) Get Picture Mode List

Get picture mode list interface. This will retrieve the list of the picture modes for the device.

Interface Name

Hisense_GetPictureModeList ( )

ParamName Description

Return Returns a string that includes all the picture modes available, including HDR and SDR
picture modes.

Usage

var list;

list = Hisense_GetPictureModeList();

9) Get Picture Mode

Get picture mode interface. This will retrieve the current picture mode for the device.

Interface Name

Hisense_GetPictureMode ( )

ParamName Description

Return Returns a int value that represents the current picture mode, including HDR and SDR
picture mode.

(HDR) Vivid – 0; (HDR) Standard – 1; (HDR) Energy Saving– 2; (HDR) Theater – 3; (HDR)
Game – 4; (HDR) Sport – 5; (HDR) Calibrated – 6;

Usage

27/61
 Web App Development Technical Guide CONFIDENTIAL

var pictureMode;

pictureMode = Hisense_GetPictureMode();

10) Set Picture Mode

Set picture mode interface. This will retrieve true or false of set picture mode for the device.

Interface Name

Hisense_SetPictureMode (pictureMode )

ParamName Description

Return Returns a bool that true represents set picture mode successful, false represents set
picture mode failed.

Usage

var boolean;

boolean = Hisense_SetPictureMode();

11) Get Resolution

Get resolution interface. This will retrieve the resolution information of current input signal.

Interface Name

Hisense_GetResolution ( )

ParamName Description

Return Returns a string that represents the resolution information of current input signal.
Example : 1920,1080,0,0 separately represents framewidth, frameheight, interlaced(0
represents p ,1 represents i) ,framerate.

Usage

var resolution;

resolution = Hisense_GetResolution();

7.2 Parental Control

1) Get Parental Control Lock Status

Get parental control lock status interface. This will get the parental control lock status.

Interface Name

Hisense_GetParentalControlEnabled()

ParamName Description

Return Returns true if parental control lock is enabled otherwise returns false.

Usage

28/61
 Web App Development Technical Guide CONFIDENTIAL

var parentalControlEnabled;

parentalControlEnabled= Hisense_GetParentalControlEnabled();//Get PC lock state

2) Get Parental Controller Status

Get parental controller status interface. This will get the parental controller locker status.

Interface Name

Hisense_GetRatingEnable( )

ParamName Description

Return Returns true if parental control lock is locked otherwise returns false.

Usage

Var ratingEnable;

ratingEnable=Hisense_GetRatingEnalbe(); //Get PC lock status

3) Get TV Rating

Get TV rating interface. This will get the value of the current TV rating set for the parental controller.

Interface Name

Hisense_GetTvRating( )

ParamName Description

Return Returns a string that represents the TV rating. TV rating can be one of the following
strings:

TV-Y, TV-Y7, TV-G, TV-PG, TV-14, TV-MA, OFF.

Usage

var tvRating；

tvRating = Hisense_GetTvRating();//Get the value of TV rating.

4) Get TVChildrenRating

Get TV rating interface. This will get the value of the current TV rating set for the parental controller.

Interface Name

Hisense_GetTvChildrenRating( )

ParamName Description

Return Returns a string that represents the TV rating. TV rating can be one of the following strings:

TV-Y, TV-Y7, OFF.

Usage

var tvChildrenRating;

29/61
 Web App Development Technical Guide CONFIDENTIAL

tvChildrenRating = Hisense_GetTvChildrenRating();//Get the value of TV children rating.

5) Get Movie Rating

Get movie rating interface. This will get the value of the current movie rating set for the parental controller.

Interface Name

Hisense_GetMovieRating( )

ParamName Description

Return Returns a string that represents the movie rating. Movie rating can be one of the following
strings:

G、PG、PG-13、R、NC-17、X、OFF

Usage

var movieRating;

movieRating = Hisense_GetMovieRating();//Get the value of movie rating.

Comment:

If there is no movie rating settings, the default return value is OFF

G:2; PG: 3; PG-13:4; R:5; NC-17:6; X:7.

6) Get Canadian English Rating

Get Canadian English rating interface. This will get the Canadian English rating set for the parental controller.

Interface Name

Hisense_GetCanEngRating( )

ParamName Description

Return Returns a string that represents the Canadian English rating. Canadian English rating can be
one of the following strings:

C、C8+、G、PG、14+、18+、OFF.

Usage

var canEngRating;

canEngRating = Hisense_GetCanEngRating();//Get the value of Canadian English rating.

7) Get Canadian French Rating

Get Canadian French rating interface. This will get the value of Canadian French rating set for the parental controller.

Interface Name

Hisense_GetCanFreRating( )

ParamName Description

30/61
 Web App Development Technical Guide CONFIDENTIAL

Return Returns a string that represents the Canadian French rating. Canadian French rating can be
one of the following strings:

G、8ans+、13ans+、16ans+、18ans+、OFF。

Usage

var canFreRating；

canFreRating = Hisense_GetCanFreRating();//Get the value of Canadian French rating.

Comment:

If there is no Canadia French Ratings settings, the default return value is OFF.

G:1; 8ans+:2; 13ans+:3; 16ans+:4; 18ans:5.

8) Get Parental Control Information

Get parental control information interface. This will get the information of the parental control such as status, TV ratings,
and movie ratings.

Interface Name

Hisense_GetParentControls( )

ParamName Description

Return Returns a JSON string with parental control information such as if it is enabled or not, US TV
and movie ratings and Canadian TV ratings.

Usage

var parentControlInfo；

parentControlInfo = Hisense_GetCanFreRating();//Get the structure with parental control information..

JSON example:

"enable": 0,

"US_TV_Ratings": "TV-Y",

"US_MOVIE_Ratings": "G",

"Canadian_English_Ratings": "G",

"Canadian_French_Ratings": "G"

7.3 Virtual Keyboard Manager

1) Close Virtual Keyboard

Close virtual keyboard interface. This will disable the on screen virtual keyboard
feature.

Interface Name

31/61
 Web App Development Technical Guide CONFIDENTIAL

Hisense_disableVKB( )

ParamName Description

Return Null

Usage

Hisense_disableVKB() ;

Comment:

Please note that the VKB will not auto to disaplay.

If you call the function "Hisense_disableVKB()" on one page,move the focus to input
,press OK key,you can find that the VKB will not show.It indicates that this interface
effects.

2) Open Virtual Keyboard

Open virtual keyboard interface. This will enable the on screen virtual keyboard
feature.

Interface Name

Hisense_enableVKB( )

ParamName Description

Return Null

Usage

Hisense_enableVKB() ;

Comment:

Please note that the VKB will not auto to disaplay.

Call the function "Hisense_enableVKB()",move the focus to input,press OK key,the VKB

will show. It indicates that this interface effects.

32/61
 Web App Development Technical Guide CONFIDENTIAL

8 Demo Code & Tutorials

8.1 Navigation Demo
Below is an example of handling navigation with JavaScript.Application Developers can also implement navigation using a
common framework.
document.addEventListener("keydown", function(ev) {
switch (ev.keyCode) {
case VK_LEFT:
// Handle mandatory key ←
break;
case VK_RIGHT:
// Handle mandatory key →
break;
case VK_UP:
// Handle mandatory key ↑
break;
case VK_DOWN:
// Handle mandatory key ↓
break;
case VK_ENTER:
// Handle mandatory key Confirm / Select / OK
break;
case VK_BACK_SPACE:
// Handle mandatory key Back / Return
break;
}
// Block the browser from handling the keydown event.
ev.preventDefault();
}, false);

8.2 HTML+MSE
This specification extends HTMLMediaElement to allow JavaScript to generate media streams for playback. Allowing
JavaScript to generate streams facilitates a variety of use cases like adaptive streaming and time shifting live streams.
<script>
function onSourceOpen(videoTag, e) {
var mediaSource = e.target;

if (mediaSource.sourceBuffers.length > 0)
return;

var sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');

videoTag.addEventListener('seeking', onSeeking.bind(videoTag, mediaSource));

videoTag.addEventListener('progress', onProgress.bind(videoTag, mediaSource));

var initSegment = GetInitializationSegment();

33/61
 Web App Development Technical Guide CONFIDENTIAL

if (initSegment == null) {
// Error fetching the initialization segment. Signal end of stream with an error.
mediaSource.endOfStream("network");
return;
}

// Append the initialization segment.

var firstAppendHandler = function(e) {
var sourceBuffer = e.target;
sourceBuffer.removeEventListener('updateend', firstAppendHandler);

// Append some initial media data.

appendNextMediaSegment(mediaSource);
};
sourceBuffer.addEventListener('updateend', firstAppendHandler);
sourceBuffer.appendBuffer(initSegment);
}

function appendNextMediaSegment(mediaSource) {
if (mediaSource.readyState == "closed")
return;

// If we have run out of stream data, then signal end of stream.

if (!HaveMoreMediaSegments()) {
mediaSource.endOfStream();
return;
}

// Make sure the previous append is not still pending.

if (mediaSource.sourceBuffers[0].updating)
return;

var mediaSegment = GetNextMediaSegment();

if (!mediaSegment) {
// Error fetching the next media segment.
mediaSource.endOfStream("network");
return;
}

// NOTE: If mediaSource.readyState == “ended”, this appendBuffer() call will

// cause mediaSource.readyState to transition to "open". The web application
// should be prepared to handle multiple “sourceopen” events.
mediaSource.sourceBuffers[0].appendBuffer(mediaSegment);
}

function onSeeking(mediaSource, e) {
var video = e.target;

34/61
 Web App Development Technical Guide CONFIDENTIAL

if (mediaSource.readyState == "open") {
// Abort current segment append.
mediaSource.sourceBuffers[0].abort();
}

// Notify the media segment loading code to start fetching data at the
// new playback position.
SeekToMediaSegmentAt(video.currentTime);

// Append a media segment from the new playback position.

appendNextMediaSegment(mediaSource);
}

function onProgress(mediaSource, e) {
appendNextMediaSegment(mediaSource);
}
</script>

<video id="v" autoplay> </video>

<script>
var video = document.getElementById('v');
var mediaSource = new MediaSource();
mediaSource.addEventListener('sourceopen', onSourceOpen.bind(this, video));
video.src = window.URL.createObjectURL(mediaSource);
</script>

8.3 HLS
<video width="600px" height="400px" id="video1" style="width:100%;visibility:visible;height:100%;" controls="controls"
autoplay="autoplay" ">
<source src="hisense.m3u8" type="application/vnd.apple.mpegurl"/>
</video>
var v = document.getElementsById("video1");
v.play();

8.4 HTML5 + MSS/DASH + PlayReady (post-delivery method)

This is the so called post-delivery method. It is not required for the web application to handle whether the content is
encrypted or not. The media source is set in a similar way to that of playing clear content. The platform media player will
parse the protection header in the manifest file and handle the DRM license acquisition as well as content decryption.
As shown in the figure below, the client application calls the OTT Back End to acquire the URL of the content (the URL of
the Manifest file) to set to the player. The player will connect to the content delivery network or media server to download
it. It will call the License Server to acquire the content license once it parsed the DRM header.
At this point, the license server calls the back end to ensure that the user is allowed to see the content, and finally, if it’s
correct, the player receives a response of the PlayReady License Server with the content license.
The following is the HTML5 example for the playback of PlayReady protected MSS video. Note that the media type should
be set to ‘application/ vnd.ms-sstr+xml’.

35/61
 Web App Development Technical Guide CONFIDENTIAL

<html>
<body bgcolor="FFFFFF">
<video id="player" width="800" height="400" controls="controls" autoplay="autoplay" >
<source src="http://PlayReady.directtaps.net/smoothstreaming/SSWSS720H264PR/SuperSpeedway_720.ism/Manifest"
type="application/ vnd.ms-sstr+xml">
</video>
</body>
</html

The following is the HTML5 example for the playback of PlayReady protected DASH video. Note that the media type should
be set to ‘application/dash+xml’.
<html>
<body bgcolor="FFFFFF">
<video width="720px" height="640px" id="video1" controls="controls" autoplay="autoplay">
<source src="http://mediaservices-samples.s3.amazonaws.com/iplayer_vod/int/uhd_hdr/client_manifest-all.mpd"
type="application/dash+xml"/>
</video> </body>
</html

8.5 HTML5 + MSS + PlayReady (WebInitiator)

To play the PlayReady encrypted and licensed MSS content with this method, the player requires the web-initiator XML file
URL to be set to the tag. The web initiator XML file contains the complete player configuration: Content URL, <video>,
license server URL, custom data, etc.
The XML has to be provided by the OTT backend (it is not possible to create it temporarily in-memory directly on TV). It
contains web-initiator which mainly consists of:

❖ URL with the Smooth Streaming manifest set in XML element <Content>
❖ License server URL set in XML element <LA_URL>
❖ Custom data generated on the server side set in XML element <CustomData>
All other functions, events are same as in standard HTML5 <video> XML element.
Note: To play PlayReady protected MSS content with custom data, this method should be used. And the length of the
custom data string should not exceed 512bytes.
The following is the XML file (webini.xml) and the HTML5 example:
<?xml version="1.0" encoding="utf-8"?>
<PlayReadyInitiator xmlns="http://schemas.microsoft.com/DRM/2007/03/protocols/">
<LicenseAcquisition>
<Header>
<WRMHEADER xmlns="http://schemas.microsoft.com/DRM/2007/03/PlayReadyHeader" version="4.0.0.0">
<DATA>
<PROTECTINFO>
<KEYLEN>16</KEYLEN>
<ALGID>AESCTR</ALGID>
</PROTECTINFO>
<KID>AmfjCTOPbEOl3WD/5mcecA==</KID>
<CHECKSUM>BGw1aYZ1YXM=</CHECKSUM>
<CUSTOMATTRIBUTES>

36/61
 Web App Development Technical Guide CONFIDENTIAL
<IIS_DRM_VERSION>7.1.1064.0</IIS_DRM_VERSION>
</CUSTOMATTRIBUTES>
<LA_URL>http://playready.directtaps.net/pr/svc/rightsmanager.asmx</LA_URL>
<DS_ID>AH+03juKbUGbHl1V/QIwRA==</DS_ID>
</DATA>
</WRMHEADER>
</Header>

<CustomData>PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48S2V5T0F1dGhlbnRpY2F0aW9uWE1MPg==</CustomDat
a>
<Content>http://playready.directtaps.net/smoothstreaming/SSWSS720H264PR/SuperSpeedway_720.ism/Manifest</Content>
</LicenseAcquisition>
</PlayReadyInitiator>

<html>
<body bgcolor="FFFFFF">
<video id="player" width="800" height="400" controls="controls" autoplay="autoplay" >
<source src="./webini.xml" type="application/vnd.ms-playready.initiator+xml">
</video>
</body>
</html>

8.6 Widevine supported with EME/MPEG-DASH/CENC

The following diagram shows the components of the HTML5 Audio/Video playback infrastructure with the Widevine CDM
(Content Decryption Module) which follows the EME specification and supported with security level “L1”. It is intended to
be integrated into a browser, enabling playback of EME-compliant encrypted HTML5 Video streams. A player application
runs within the browser environment.
The application initiates playback of an HTML5 video stream and provides the URL for the specific item to be played. The
incoming stream is processed by the HTML5 parser. If the stream is encrypted and conforms to the CENC stream format, it
will contain one or more ‘pssh’ boxes, each of which uniquely identifies the video stream and contains additional license
request information for a particular key system Widevine is one such key system. The HTML5 parser will extract the ‘pssh’
box information and send it to the application as a NEED_KEY event. It will continue to pass the encrypted stream to the
media stack.
The CDM is responsible for creating a valid license request message. It will pass this message back to the application in a
KEY_MESSAGE event. The application must send this message to the license server and wait for a response. When the
application receives a message from the license server (presumably a license response message for a prior license request),
it sends it to the CDM by calling the CDM’s AddKey() API. The CDM will process the license response, extract the license
and key information, and pass the keys to the OEMCrypto layer. The CDM will signal that the key(s) have been successfully
added by sending the KEY_ADDED event to the application.

37/61
 Web App Development Technical Guide CONFIDENTIAL

It could be verified with DASH-IF’s reference player.

http://dashif.org/reference/players/javascript/1.4.0/samples/dash-if-reference-player/

8.7 HTML + MPEG-DASH + CENC + DrmAgent + PlayReady

The MSD6586/6886 platform implements the "DRM feature" as defined by HbbTV/OIPF. The MSD6586/6886 platform
supports a non-visual embedded object of type “application/oipfDrmAgent”, with the following Javascript API, to enable
in-session message exchange from the web page with an underlying DRM agent.
The VIDAA TV shall be able to work in Pre/Proactive license acquisition mode using above referenced OIPF
SendDRMMessage API with the PlayReady DRM system.
String sendDRMMessage(String msgType, String msg, String DRMSystemID)
msgType : “application/vnd.ms-playready.initiator+xml”
msg : <PlayReady Initiator String, UTF8 encoded
DRMSystemID : “urn:dvb:casystemid:19219”
Returns : String msgID

The following is a code example:

<!DOCTYPE html PUBLIC "-//HbbTV//1.1.1//EN" "http://www.hbbtv.org/dtd/HbbTV-1.1.1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>mpeg_dash_playready</title>
</head>
<body bgcolor="FFFFFF">
<object id="video" style="position:absolute; top:0px;left:0px;" data="http://yt-dash-mse-
test.commondatastorage.googleapis.com/media/car-20120827-manifest.mpd" type="application/dash+xml" width="720"
height="480" preload="none">
</object>
<object id="oipfDrmAgent" type="application/oipfDrmAgent" style="visibility:hidden"></object>
<script type="text/javascript">
// License Pre-acquistion
// send license request using sendDRMMessage

38/61
 Web App Development Technical Guide CONFIDENTIAL
function sendLicenceRequest()
{
console.warn("--- add. sendLicenceRequest enter.--- ");
var msgType = "application/vnd.ms-playready.initiator+xml";
var xmlLicenceAcquisition =
'<?xml version="1.0" encoding="utf-8"?><PlayReadyInitiator
xmlns="http://schemas.microsoft.com/DRM/2007/03/protocols/"><LicenseAcquisition><Header><WRMHEADER
xmlns="http://schemas.microsoft.com/DRM/2007/03/PlayReadyHeader"
version="4.0.0.0"><DATA><PROTECTINFO><KEYLEN>16</KEYLEN><ALGID>AESCTR</ALGID></PROTECTINFO><LA_URL>http://playrea
dy.digitaltv-
labs.com/playready/rightsmanager.asmx</LA_URL><KID>Xjn+wkEUEeGrGY6/RyQBmw==</KID></DATA></WRMHEADER></Header><
/LicenseAcquisition></PlayReadyInitiator>';
var DRMSysID = "urn:dvb:casystemid:19219";
var oipfDrm = document.getElementById('oipfDrmAgent');
console.warn("--- add. sendLicenceRequest start.--- ");
oipfDrm.sendDRMMessage(msgType, xmlLicenceAcquisition, DRMSysID);
console.warn( "--- add. sendLicenceRequest end.--- ");
}
</script>
<input type="button" value="license" style="position:relative; margin-top:480px;" onclick="sendLicenceRequest()" />
<input type="button" value="play" onclick="document.getElementById('video').play(1)"/>
</body>
</html>

39/61
 Web App Development Technical Guide CONFIDENTIAL

9 Debugging and Deployment

9.1 Overview
1) Clean Cache & Cookies
Application Developers may want to flush cookie and cache storage of the web engine. The VIDAA Platform allows
application Developers to flush the cookie and cache repositories.
Cookie and cache can be also removed by executing “Clear Data” in Menu-Settings-System-Application Settings-Clean
Cache & Delete Cookies.
2) Enable remote devtools
It is possible to debug an app with the devtools. Follow the steps below to connect the platform with the toolset.
3) Launch a Chromium-based desktop browser (Chromium 53 or later)
Make sure the PC and the TV set is in the same LAN network.
Input the IP address/port of the platform in the desktop browser to start the debugger. For example
http://192.168.0.3:9226
The port number is different for each platform.

Platform Port

MT5658 9222

MT5659 9222

MSD6586 9222

MSD6886 9226

Then the devtools application will be loaded in the browser. If the correct page is not rendered, please check the network
status, for some security considerations, some models do not open the port of devtools by default. In this case, please
contact us on how to open the debugging tool.
4) Debugging with Chrome
Among the provided features are:

❖ DOM and style inspection,

❖ JavaScript debugging,
❖ JavaScript console,
❖ network profiling,
❖ page loading timeline,
❖ several JavaScript profiling features such as heap usage.

40/61
 Web App Development Technical Guide CONFIDENTIAL

For usage of the devtools, please refer to https://developers.google.com/web/tools/chrome-devtools/javascript/

5) Submit & Deployment
The application could push online once the application is certified by the VIDAA QA team.
The CSP may provide the URL and the icon of the application then the VIDAA operation team will configure in Hisense
Cloud to make it available for the end-user.

9.2 How to enable serial debug

1) Preconditions
1. Prepare a 3.5mm to USB serial audio cable;
2. Setup serial port tools on your PC;
3. TV firmware updated to debug version yet.
2) Flows
1. Plug the USB port of the serial Kit into the USB port of the computer, the Serial kit port into the Serial Port of the
TV, (For the first time, you need to install the serial Kit driver), and view the corresponding COM port from the
Computer Device Manager.
2. Use the serial port tool to open the COM port with a baud rate of “115200”, turn off the RTS/CTS, turn on the
XON/XOFF and keep other default states.
3. If you cannot enter the serial port mode, you need to open the UART in factory mode.
4. The method of entering the factory mode:
5. In the power-on state, press the setting button, select the “Sound” menu in the pop-up settings, enter the
“Speakers” menu, move the focus on the “Balance” item, input “1969” with the remote control, then enter the
factory mode.
6. In factory mode, press the setting button, select the “Options” menu, press OK or right to find the UART entry,
confirm that the UART is “On”.(DO NOT modify other settings).
7. Press the Power button to restart the TV.
8. If there is no output in the serial tool, just input '05328087' and 'Enter' key

9.3 How to flash debug firmware on MSD6586/6886

1. Unzip firmware(if compressed) to an USB flash drive(fat32 filesystem and less than 16GB) and rename it to
'MstarUpgrade.bin"
2. Plug flash drive into TV USB port.
3. Replug the TV power cable.
4. 1 )Method1: press the red power key on IR remote once, then long-press red power key(for 6886) or volume-
key(for 6586) until the upgrading screen appears.
2)Method2: select Settings-Support-System Update-Upgrade from USB and wait for the upgrading screen to

41/61
 Web App Development Technical Guide CONFIDENTIAL
appear.
5. After upgrade finished, the system will reboot by itself.

9.4 How to flash debug firmware on MTK5658/5659

1) Preconditions
1. Make sure serial debugging function is opened.
2. PC is connected to TV via serial.
2) Flows
a) Method with serial tool
1. unzip firmware(if compressed) to an USB flash drive(fat32 filesystem and less than 16GB) and rename it to
'upgrade_force.pkg"
2. plug flash drive to TV USB port.
3. use serial tools on pc and long press 'esc' key on the keyboard when restarting TV
4. after enter 'DTV>',input 'u' and enter
5. begin flash TV
b) Method with Remote
1. unzip firmware to an USB flash drive and rename it to 'upgrade_force.pkg"
2. plug flash drive to TV USB port.
3. replug the TV power cable.
4. press red power key, then long press red power key on IR remote until the upgrading screen appear.

9.5 How to debugging apps on MT5658/5659

1) Preconditions
1. USB to 3.5mm audio jack cable and the TV UART is ON.
2. Serial Tool(e.g. secureCRT)
2) Flows
1. just do the following in the serial port.
touch /3rd_rw/appdata/debugmode
touch /3rd_rw/appdata/enable_developer_tools
sync
reboot

2. make sure TV and PC in the same network, launch the app you want to debug on your TV, use chrome v53 or upper
to access http://tv_ip:9222, the devtools will be loaded. (the port number may be 9224, depending on the model)

9.6 How to debugging apps on MSD6586

Mass production firmware can't start Hisense debug toolkit, please contact us to get more details.

9.7 How to debugging apps on MSD6886AU U3

make sure TV and PC in the same network, launch the app you want to debug on your TV, use chrome v53 or upper to
access http://tv_ip:9226, the devtools will be loaded.

9.8 How to debugging apps on MSD6886EU U3

Mass production firmware can't start Hisense debug toolkit, please contact us to get more details.

42/61
 Web App Development Technical Guide CONFIDENTIAL

9.9 How to debugging apps on VIDAA U4

1) Method 1
If the developer has Hisense serial debugging cable and has connected to the TV through a computer, then you can simply
execute the following command in serial tools.
touch /var/local/debug_on
touch /var/local/flag_platform_debug_sdk
sync
reboot

2) Method 2
If the developer havn’t debugging cable, you can open hisense://debug in TV browser and move page to bottom and click
debug_on button, then replug TV power cable to restart TV.

After doing any of the above, make sure TV and PC in the same network, launch the app you want to debug on your TV,
use chrome v53 or upper to access http://tv_ip:9226, the devtools will be loaded.

43/61
 Web App Development Technical Guide CONFIDENTIAL

10 W3C/HTML5 standard for VIDAA Platform

The APIs listed in this section are part of the W3C specifications which have been tested on the MSD6586/6886 platform.
Some of the APIs are stable while others are draft specifications. The draft APIs are subject to change as the W3C
specification evolves.
The following feature marked in yellow is supported on the MSD6586/6886 platform. But we have no special test case to
test and develop these features. When the application relies on these requirements, the developers should pay attention
to these special points.
For U4 platforms, we used the chromium 77 kernel and support most of H5 standard features, for the support details of
HTML5/CSS/JS, please use https://html5test.com.

10.1 HTML5 Video Audio

Feature attribute value 6586/6886 U3

autoplay Supported
controls Supported
poster Supported
1 Not supported
loop
Loop Not supported
Auto Supported
preload None Supported
metadata Supported
1. HTMLVideoElement http Supported
src File Supported
ftp Not supported
mediagroup Group Not supported
muted Not supported
width Number Supported
height Number Supported
videoWidth Number Supported
videoHeight Number Supported
autoplay Supported
controls Supported
1 Not supported
loop
loop Not supported
auto Supported
2. HTMLAudioElement preload none Supported
metadata Supported
http Supported
src file Supported
ftp Not supported
mediagroup group Not supported
muted Not supported
http Supported
src file Supported
ftp Not supported
video/ogg Not supported
3. HTMLSourceElement Video type video/mp4 Supported
video/webm Supported
audio/ogg Not Supported
audio/mpeg Supported
Audio type
audio/mp4 Supported
audio/webm Supported

44/61
 Web App Development Technical Guide CONFIDENTIAL
media Not supported
AudioContext Supported
connect(audioNode) Supported
AudioNode
disconnect Supported
createBufferSource Supported
buffer Supported
playbackRate Supported
loop Not supported
AudioBufferSourceNode loopStart Not supported
loopEnd Not supported
4. Web Audio onended Not supported
start Not supported
stop Not supported
createBuffer Supported
decodeAudioData Not supported
sampleRate Supported
AudioBuffer length Supported
duration Supported
numberOfChannels Supported
getChannelData Supported

10.2 HTML5 Track & Media

feature attribute value 6586/6886
default default Supported
captions Supported
chapters Supported
kind descriptions Supported
metadata Supported
1. HTMLTrackElement subtitles Supported
label label Supported
src vtt Supported
srclang language_code Supported
readyState Supported
track Supported
error state error Supported
src Supported
currentSrc Supported
crossOrigin Not supported
netSupportedState Not supported
netSupported state
preload Supported
buffered Supported
load() Not supported
canPlayType() Supported
readyState Supported
ready state
seeking Supported
controls Supported
2. HTMLMediaElement defaultMuted Not supported
controls
volume Not supported
muted Not supported
currentTime Supported
duration Supported
pause() Supported
paused Supported
ended Supported
playback state
defaultPlaybackRate Not supported
playbackRate Supported
played Supported
seekable Supported
autoplay Supported

45/61
 Web App Development Technical Guide CONFIDENTIAL
loop Not supported
play() Supported
mediaGroup Not supported
media controller
controller Not supported
textTracks Supported
audioTracks Supported
multiple media tracks
videoTracks Supported
addTextTrack() Supported
buffered Not supported
seekable Not supported
duration Not supported
currentTime Not supported
paused Not supported
played Not supported
pause() Not supported
MediaController
play() Not supported
defaultPlaybackRate Not supported
playbackRate Not supported
volume Not supported
muted Not supported
playbackState Not supported
unpause() Not supported
length Supported
VideoTrack() Supported
getTrackById Supported
VideoTrackList selectedIndex Supported
onchange Not supported
onaddtrack Not supported
onremovetrack Not supported
id Supported
kind Supported
VideoTrack label Supported
language Supported
selected Supported
length Supported
AudioTrack() Supported
getTrackById Supported
AudioTrackList
onchange Not supported
onaddtrack Not supported
onremovetrack Not supported
id Supported
kind Supported
AudioTrack label Supported
language Supported
enabled Supported
length Supported
TextTrack[ ] Supported
TextTrackList
onaddtrack Not supported
onremovetrack Not supported
kind Supported
label Supported
language Supported
inBandMetadataTrackDispatc
TextTrack Not supported
hType
mode Supported
TextTrackCueList
cues Supported
activeCues Supported
TextTrackCue(VTTCue)
addCue() Supported
removeCue() Supported
oncuechange Supported
length Supported

46/61
 Web App Development Technical Guide CONFIDENTIAL
TextTrackCue Supported
getCueById Supported
track Supported
id Supported
startTime Supported
endTime Supported
pauseOnExit Not supported
vertical[growing right] Not supported
vertical[growing left] Not supported
vertical[horizontal] Not supported
snapToLines Supported
line Supported
position Supported
size Supported
align[end] Supported
align[middle] Supported
align[start] Supported
text Supported
getCueAsHTML Supported
onenter Not supported
onexit Not supported
loadstart Supported
progress Supported
suspend Not supported
abort Supported
error Not supported
emptied Not supported
stalled Not supported
play Supported
pause Supported
loadedmetadata Supported
loadeddata Supported
Media Event
waiting Supported
playing Supported
canplay Supported
canplaythrough Supported
seeking Supported
seeked Supported
timeupdate Supported
ended Supported
ratechange Supported
durationchange Not supported
volumechange Not supported

10.3 Communication

feature attribute value 6586/6886

data Supported
origin Supported
MessageEvent lastEventId Supported
source Supported
ports Supported
window.postMessage(messag
Cross-document messaging Supported
1.Web Messaging e, targetOrigin [, ports ])
channel.Port1 Supported
MessageChannel
channel.Port2 Supported
port.postMessage(message [,
Supported
ports] )
MessagePort
port.start() Supported
port.close() Supported
2.WebSocket API WebSocket readyState Supported

47/61
 Web App Development Technical Guide CONFIDENTIAL
bufferedAmount Supported
onopen Supported
onerror Supported
onclose Supported
extensions Supported
protocol Supported
url Supported
close() Supported
onmessage Supported
binaryType Supported
send() Supported
wasClean Supported
CloseEvent code Supported
reason Supported
readyState Supported
url Supported
withCredentials Supported
3.Server-Sent Events EventSource onopen Supported
onmessage Supported
onerror Supported
close() Supported

10.4 Graphic
feature attribute value 6586/6886
width number Supported
height number Supported
1. HTMLCanvasElement toDataURL Supported
toBlob() Not supported
getContext() Supported
reference canvas Supported
save() Supported
state
restore() Supported
scale(x,y) Supported
rotate(n) Supported
transformations translate(x,y) Supported
transform(a,b,c,d,e,f) Supported
setTransform(a,b,c,d,e,f) Supported
globalAlpha Supported
compositing
globalCompositeOperation Supported
strokeStyle Supported
fillStyle Supported
colors and styles createLinearGradient(x0,y0,x1,y1) Supported
createRadialGradient(x0,y0,r0,x1,y1,r1) Supported
createPattern() Supported
2. CanvasRenderingContext2D shadowOffsetX Supported
shadowOffsetY Supported
shadows
shadowBlur Supported
shadowColor Supported
clearRect(x,y,w,h) Supported
rects fillRect(x,y,w,h) Supported
strokeRect(x,y,w,h) Supported
beginPath() Supported
fill() Supported
stroke() Supported
drawSystemFocusRing() Not supported
path API drawCustomFocusRing() Not supported
scrollPathIntoView() Not supported
clip() Supported
isPointInPath(x,y) Supported
fill(path) Not supported

48/61
 Web App Development Technical Guide CONFIDENTIAL
stroke(path) Not supported
drawSystemFocusRing(path,) Not supported
drawCustomFocusRing(path,) Not supported
scrollPathIntoView(path) Not supported
clip(path) Not supported
isPointInPath(path,x,y) Not supported
fillText(text,x,y,maxWidth) Supported
text strokeText(text,x,y,maxWidth) Supported
measureText(text) Supported
drawImage(image,dx,dy) Supported
drawing images drawImage(image,dx,dy,dw,dh) Supported
drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh) Supported
addHitRegion() Not supported
hit regions
removeHitRegion() Not supported
createImageData(sw,sh) Supported
createImageData(imagedata) Supported
getImageData(sx,sy,sw,sh) Supported
pixel manipulation
putImageData(imagedata,dx,dy,dirtyX,dirtyY,dirty
Supported
Width,dirtyHeight)
putImageData(imagedata,dx,dy) Supported
lineWidth Supported
lineCap Supported
line caps / joins
lineJoin Supported
miterLimit Supported
font Supported
3. CanvasDrawingStyles
text textAlign Supported
textBaseline Supported
setLineDash() Supported
dashed lines getLineDash() Supported
lineDashOffset Supported
closePath() Supported
moveTo(x,y) Supported
lineTo(x,y) Supported
quadraticCurveTo(cpx,cpy,x,y) Supported
Shared path API bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) Supported
4. CanvasPathMethods
methods arcTo(x1,y1,x2,y2,r) Supported
arc(x,y,r,sAngle,eAngle,counterclockwise) Supported
rect(x,y,width,height) Supported
ellipse(x,y,radiusX,radiusY,rotation,startAngle,end
Supported
Angle,anticlockwise)
5. CanvasGradient opaque object addColorStop() Supported
width Supported
x-direction actualBoundingBoxLeft Not supported
actualBoundingBoxRight Not supported
fontBoundingBoxAscent Not supported
fontBoundingBoxDescent Not supported
actualBoundingBoxAscent Not supported
6. CanvasTextMetrics
actualBoundingBoxDescent Not supported
y-direction emHeightAscent Not supported
emHeightDescent Not supported
hangingBaseline Not supported
alphabeticBaseline Not supported
ideographicBaseline Not supported
width Supported
7. CanvasImageData basic element height Supported
data Supported
addPath() addPath(path,transformation) Not supported
addPathByStrokingPat
8. CanvasPath Not supported
h()
addText( ) addText(text,styles,transformation,x,y,maxWidth) Not supported

49/61
 Web App Development Technical Guide CONFIDENTIAL
addText( text, styles, transformation, path,
Not supported
maxWidth)
addPathByStrokingText( text, styles,
Not supported
addPathByStrokingTex transformation, x, y, maxWidth)
t( ) addPathByStrokingText( text, styles,
Not supported
transformation, path, maxWidth)
linearGradient Supported
colors and styles radialGradient Supported
pattern Supported
feGaussianBlur Supported
feBlend Supported
filters feColorMatrix Supported
feComponentTransfer Supported
feOffset Supported
rect Supported
circle Supported
ellipse Supported
line Supported
polygon Supported
9. InlineSVG polyline Supported
path Supported
shapes
stroke Supported
text Supported
tspan Supported
textPath Supported
a Supported
g Supported
image Supported
animate Supported
animation animateMotion Supported
animateTransform Supported
clipPath Supported
clipping and mask
mask Supported
WebGLShader createShader Supported
WebGLBuffer createBuffer Supported
WebGLTexture createTexture Supported
WebGLFramebuffer createFramebuffer Supported
WebGLProgram createProgram Supported
vertexAttribPointer Supported
activeTexture Supported
attachShader Supported
bindBuffer Supported
bindFramebuffer Supported
bindRenderbuffer Supported
bindTexture Supported
bufferData Supported
clear Supported
10. WebGL
clearColor Supported
clearDepth Supported
WebGLRenderingCont
compileShader Supported
ext
drawArrays Supported
drawElements Supported
enable Supported
enableVertexAttribArray Supported
framebufferRenderbuffer Supported
framebufferTexture2D Supported
generateMipmap Supported
getAttribLocation Supported
getExtension Supported
getProgramParameter Supported
getShaderInfoLog Supported

50/61
 Web App Development Technical Guide CONFIDENTIAL
getShaderParameter Supported
linkProgram Supported
pixelStorei Supported
renderbufferStorage Supported
shaderSource Supported
texImage2D Supported
texParameteri Supported
uniform1f Supported
uniform3f Supported
uniform1i Supported
viewport Supported
uniformMatrix3fv Supported
uniformMatrix4fv Supported
useProgram Supported
vertexAttribPointer Supported
WebGLRenderbuffer createRenderbuffer Supported
WebGLUniformLocatio
getUniformLocation Supported
n

10.5 Web Applications

feature attribute value 6586/6886

status Supported
update() Supported
swapCache() Supported
onchecking Supported
onnoupdate Supported
0.Offline Web Applications ApplicationCache ondownloading Supported
onprogress Supported
oncached Supported
onupdateready Supported
onobsolete Supported
onerror Supported
WindowSessionStorag
sessionStorage Supported
e
WindowLocalStorage localStorage Supported
length Supported
key(index) Supported
getItem(key) Supported
Interface
setItem(key, value) Supported
1.Storage
removeItem(key) Supported
clear() Supported
key Not supported
oldValue Not supported
Event newValue Not supported
url Not supported
storageArea Not supported
open(name,version) Supported
IDBFactory deleteDatabase(name) Supported
cmp(first, second, result) Supported
name Supported
version Supported
objectStoreNames Supported
createObjectStore(name, optionalParameters) Supported
2.IndexedDB Database
transaction(storeNames, mode) Supported
IDBDatabase
deleteObjectStore(name) Supported
close() Supported
onversionchange Not supported
onerror
onabort Not supported
IDBIndex name Supported

51/61
 Web App Development Technical Guide CONFIDENTIAL
objectStore Supported
keyPath Supported
multiEntry Supported
count(key, retVal) Supported
unique Supported
get(key, retVal) Supported
getKey(key) Supported
openCursor(range, direction, retVal) Supported
openKeyCursor(range, direction) Supported
openCursor(range,direction, retVal) Supported
put(value,key) Supported
add(value,key) Supported
get(key) Supported
delete(key) Supported
index(name) Supported
clear() Supported
IDBObjectStore count(key) Supported
createIndex(name, keyPath, optionalParameters) Supported
deleteIndex(indexName) Supported
autoIncrement Supported
transaction Supported
indexNames Supported
keyPath Supported
name Supported
source Supported
direction Supported
key Supported
primaryKey Supported
IDBCursor
continue(key) Supported
advance(count) Supported
update(value) Supported
delete() Supported
IDBCursorWithValue value Supported
mode Supported
error Supported
db Supported
objectStore(name) Supported
IDBTransaction
abort() Not supported
onabort Not supported
oncomplete Supported
onerror Supported
error Not supported
onerror Not supported
onsuccess Not supported
IDBRequest readyState Supported
result Not supported
source Supported
transaction Supported
onblocked Not supported
IDBOpenDBRequest
onupgradeneeded Supported
IDBVersionChangeEve oldVersion Not supported
nt newVersion Not supported
lower Supported
lowerOpen Supported
upper Supported
upperOpen Supported
IDBKeyRange
only(value) Supported
bound(lower, upper, lowerOpen, upperOpen) Supported
lowerBound(lower, open) Supported
upperBound(upper, open) Supported

52/61
 Web App Development Technical Guide CONFIDENTIAL

10.6 User Interaction

feature attribute value 6586/6886
draggable Not supported
Attribute
dropzone Not supported
drag Not supported
dragstart Not supported
dragenter Not supported
Events dragover Not supported
dragleave Not supported
drop Not supported
dragend Not supported
dropEffect Not supported
effectAllowed Not supported
items Not supported
setDragImage() Not supported
1.Drag & Drop DataTransfer types Not supported
setData() Not supported
getData() Not supported
clearData() Not supported
files Not supported
length Not supported
DataTransferItemLi Items[index] Not supported
st clear() Not supported
add() Not supported
kind Not supported
type Not supported
DataTransferItem
getAsString() Not supported
getAsFile() Not supported
DragEvent dataTransfer Not supported

10.7 Supporteder
feature attribute value 6586/6886
postMessage() Not supported
1.Web Supporteders Supporteder terminate() Not supported
onmessage Not supported
2.Shared Supporteders SharedSupporteder port Not supported
3.Abstract Supporteders AbstractSupporteder onerror Not supported

10.8 Files
Feature attribute value 6586/6886
length Not supported
FileList
item(index) Not supported
size Not supported
type Not supported
Blob
slice() Not supported
close() Not supported
name Not supported
File
lastModifiedDate Not supported
1.File API readAsArrayBuffer() Not supported
readAsText() Not supported
readAsDataURL() Not supported
abort() Not supported
FileReader readyState Not supported
result Not supported
error Not supported
FileReader.onloadstart Not supported
FileReader.onprogress Not supported

53/61
 Web App Development Technical Guide CONFIDENTIAL
FileReader.onload Not supported
FileReader.onabort Not supported
FileReader.onerror Not supported
FileReader.onloadend Not supported
readAsArrayBuffer() Not supported
FileReaderSync readAsText() Not supported
readAsDataURL() Not supported
createObjectURL() Not supported
URL
revokeObjectURL() Not supported

10.9 History
feature attribute value 6586/6886
length Supported
state Supported
go() Supported
1. Session history History back() Supported
forward() Supported
pushState() Supported
replaceState() Supported

10.10 Static CSS

feature attribute value 6586/6886
length(px) Supported
percentage(%) Supported
Background-size cover Supported
contain Supported
auto Supported
padding-box Supported
background-clip border-box Supported
content-box Supported
padding-box Supported
1.Background
background-origin border-box Supported
content-box Supported
background-color value Supported
background-image url Supported
background-repeat value, value Supported
background-
value Supported
attachment
background-position value Supported
background value, value Supported
h-shadow Supported
v-shadow Supported
blur Supported
Box-shadow
spread Supported
color Supported
inset Supported
border-bottom-left-
Supported
radius
2.Borders and Outline border-bottom-right-
Supported
radius
border-radius Supported
border-top-left-radius Supported
border-top-right-
Supported
radius
border-image source slice width outset repeat Supported
border-image-source url Supported
border-image-slice Supported

54/61
 Web App Development Technical Guide CONFIDENTIAL
border-image-width Supported
border-image-outset Supported
stretch Supported
border-image-repeat repeat Supported
round Supported
clone Not supported
box-decoration-break
slice Not supported
visible Supported
hidden Supported
overflow-x
scroll Supported
auto Supported
3.Box
visible Supported
hidden Supported
overflow-y
scroll Supported
auto Supported
RGB Supported
RGBA Supported
color
HSL Supported
HSLA Supported
4.Color opacity Supported
linear-gradient Supported
radial-gradient Supported
gradient
repeating-linear-gradient Supported
repeating-radial-gradient Supported
column-count Supported
column-gap Supported
column-rule Supported
column-rule-color color Supported
none Supported
hidden Supported
dotted Supported
dashed Supported
solid Supported
column-rule-style
double Supported
groove Supported
ridge Supported
inset Supported
outset Supported
thin Supported
medium Supported
column-rule-width
thick Supported
5.Columns length Supported
1 Supported
column-span
all Supported
column-width Supported
columns width count Supported
auto Not supported
column-fill
balance Not supported
auto Not supported
break-inside avoid Not supported
avoid-column Not supported
auto Not supported
avoid Not supported
break-before
column Not supported
avoid-column Not supported
auto Not supported
avoid Not supported
break-after
column Not supported
avoid-column Not supported
flex-start Supported
6.Flexible Box align-content
flex-end Supported

55/61
 Web App Development Technical Guide CONFIDENTIAL
center Supported
space-between Supported
space-around Supported
stretch Supported
flex-start Supported
flex-end Supported
align-items center Supported
stretch Supported
baseline Supported
flex-start Supported
flex-end Supported
align-self center Supported
stretch Supported
baseline Supported
flex Supported
display
inline-flex Supported
flex <flex-grow> <flex-shrink> || <flex-basis> Supported
flex-grow value Supported
flex-shrink value Supported
flex-basis value Supported
row Supported
row-reverse Supported
flex-direction
column Supported
column-reverse Supported
flex-flow <flex-direction> || <flex-wrap> Supported
nowrap Supported
flex-wrap wrap Supported
wrap-reverse Supported
flex-start Supported
flex-end Supported
justify-content center Supported
space-between Supported
space-around Supported
order Supported
text-shadow h-shadow v-shadow blur color Supported
clip Supported
text-overflow
ellipsis Supported
normal Supported
word-break break-all Supported
keep-all Supported
normal Supported
word-wrap
break-word Supported
auto Not supported
hyphens manual Not supported
none Not supported
normal Supported
overflow-wrap
break-word Supported
7.Text
left Supported
right Supported
center Supported
text-align justify Supported
start Supported
end Supported
match-parent Supported
left Not supported
right Not supported
center Not supported
text-align-last
justify Not supported
start Not supported
end Not supported
8. Fonts @font-face font-family src Supported

56/61
 Web App Development Technical Guide CONFIDENTIAL
font-style Supported
font-weight Supported
font-stretch Not supported
font-variant
unicode-range Not supported
font-size-adjust Not supported
border-box
box-sizing padding-box Not supported
content-box
both Not supported
horizontal Not supported
resize
vertical Not supported
none Not supported
outline-width value Supported
outline-offset value Supported
none Supported
hidden Supported
dotted Supported
dashed Supported
solid Supported
outline-style
9.UI double Supported
groove Supported
ridge Supported
inset Supported
outset Supported
outline-color value Supported
outline color style width Supported
nav-up Supported
nav-right Supported
nav-down Supported
nav-left Supported
:valid | :invalid Supported
:in-range | :out-of range Supported
pseudo classes
:required | :optional Supported
:read-only | :read-write Supported
width value Supported
height value Supported
device-width value Supported
10. Media Queries device-height value Supported
orientation portrait | landscape Supported
aspect-ratio value Supported
device-aspect-ratio value Supported
::first-line Supported
::first-letter Supported
pseudo elements
::before Supported
::after Supported
:target Supported
:enabled Supported
:disabled Supported
:checked Supported
:root Supported
11. Selectors :nth-child() Supported
:nth-last-child() Supported
pseudo classes :nth-of-type() Supported
:nth-last-of-type() Supported
:first-child Supported
:last-child Supported
:first-of-type Supported
:last-of-type Supported
:only-child Supported
:only-of-type Supported

57/61
 Web App Development Technical Guide CONFIDENTIAL
:empty Supported
::selection Supported
:not(X) Supported
[attribute^=value] Supported
simple selectors [attribute$=value] Supported
[attribute*=value] Supported
sibling combinators element1~element2 Supported

10.11 Dynamic CSS

feature attribute value 6586/6886
scale(x,y) Supported
scaleX(n) Supported
transform:scale scaleY(n) Supported
scaleZ(n) Supported
scale3d(x,y,z) Supported
rotate(angle) Supported
rotateX(angle) Supported
transform:rotate rotateY(angle) Supported
rotateZ(angle) Supported
rotate3d(x,y,z,angle) Supported
translate(x,y) Supported
translateX(x) Supported
transform:translate translateY(y) Supported
translateZ(z) Supported
1.Transforms translate3d(x,y,z) Supported
skew(x-angle,y-angle) Supported
transform:skew skewX(angle) Supported
skewY(angle) Supported
matrix(n,n,n,n,n,n) Supported
transform:matrix
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Supported
preserve-3d Supported
transform-style
flat Supported
x-axis Supported
transform-origin y-axis Supported
x-axis y-axis z-axis Supported
perspective Supported
perspective-origin x-axis y-axis Supported
visible Supported
backface-visibility
hidden Supported
all Supported
transition-property width Supported
height Supported
transition-duration time (s) Supported
linear / cubic-bezier(0,0,1,1) Supported
2.Transitions ease / cubic-bezier(0.25,0.1,0.25,1) Supported
transition-timing-
ease-in / cubic-bezier(0.42,0,1,1) Supported
function
ease-out / cubic-bezier(0,0,0.58,1) Supported
ease-in-out / cubic-bezier(0.42,0,0.58,1) Supported
transition-delay time (s) Supported
transition property duration timing-function delay Supported
@keyframes animationname keyframes-selector {css-styles;} Supported
keyframename Supported
animation-name
none Supported
animation-duration time (s) Supported
3.Animation
linear Supported
animation-timing- ease Supported
function ease-in Supported
ease-out Supported

58/61
 Web App Development Technical Guide CONFIDENTIAL
ease-in-out Supported
cubic-bezier Supported
animation-delay time (s) Supported
animation-iteration- Supported
count infinite Supported
normal Supported
animation-direction
alternate Supported
running Supported
animation-play-state
paused Supported
forwards Supported
animation-fill-mode backwards Supported
both Supported
name duration timing-function delay iteration-
animation Supported
count direction

10.12 iframe element

The web engine supports iframe and follows the Oct. 28th 2014 version of iframe.
Access restriction (sandboxing) for iframe content, supported attribute values: allow-same-origin, allow-scripts, allow-
forms, allow-top-navigation.
Standard link: http://www.w3.org/TR/html5/embedded-content-0.html#the-iframe-element

10.13 WebSocket
The web engine supports the WebSocket Protocol with RFC_6455 which offers bidirectional network connectivity using the
WebSocket Handshake Protocol

10.14 Text-To-Speech (TTS)

Enable TTS feature in apps
Screen Reader (WAI-ARIA) There are several guide lines that can be followed:
the official WCAG 2.0 specification (http://www.w3.org/TR/WCAG20/)
http://webaim.org/standards/wcag/checklist
Attributes such as role and related aria attributes are not supported by the
MSD6586/6886 platform
Web Speech API is a high level JavaScript API to enable web developers to
incorporate speech recognition and synthesis into their apps. The Web Speech API
WebSpeech API
can be used for voice driven app features such as search.
https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html

The following is an example for Web Speech usage

web speech usage

<html>
<head>
<meta charset="utf-8" />
</head>
<body onload="init()">
<script type="text/javascript">
function init() {
var speak_text = new SpeechSynthesisUtterance("good weather.", "en")
setInterval(function(){
window.speechSynthesis.speak(speak_text)
}.bind(this),5000)
}

59/61
 Web App Development Technical Guide CONFIDENTIAL

</script>
</body>
</html>

10.15 WebGL
WebGL is supported in MSD6586/6886 platform. But we do not have specific test case to develop this functionality and
there may be some problems when you use.
This is normally supported on high-end devices, but typically require more platform resources than CSS/HTML/JavaScript.
Availability of WebGL can be detected by the app as follows:
if (!window.WebGLRenderingContext) {
console.log("WebGL is not supported by browser");
} else {
var canvas = document.createElement("canvas");
var context = canvas.getContext("webgl");
if (!context) {
console.log("WebGL is supported by browser but disabled");
} else {
console.log("WebGL is supported by browser and enabled");
}
}

App developers should also be aware that WebGL may require more platform resources than CSS/HTML/JavaScript.

60/61