This article is about the amazing adventures of JS developers in the world of Tizen OS. It will include a step-by-step setup of the integrated environment (IDE), development of Smart TV apps, their submission to the Tizen Store — and, of course, code samples and case studies.
If you share our belief that Javascript is the best programming language working almost everywhere, from your grandma’s Smart TVs to the SpaceX ships, welcome to our guide.
So, you’re a front-end developer having a big, beautiful, 65-inch Samsung Tizen TV. And you have it for a reason because you need to design a TV application based on Javascript: with an HLS player or DASH streams from some vendors, a bit of DRM, and other not yet clear acronyms. Nothing complicated, nothing personal.
There’s no room for retreat; you have to deal with it. Let’s get to the bottom of this together with the Promwad engineering team.
Installing Software and Setting up the Environment
The first thing to do is to go to the official website to get Tizen Studio. We are downloading this toolkit with particular attention to the Prerequisites section with system requirements and needed components.
Tizen Studio is an integrated development environment or IDE for Tizen that enables you to create real and virtual devices, connect platforms, create certificates and run applications.
Optionally, you can install the VSCode Extension for Tizen, it helps manage our IDE without leaving the editor.
Instructions for Mac on the Apple Silicon Platform
If you have a new ARM64-based Mac, you can install tizen-studio by doing the following:
- right click on installer.app in Finder
- select Show Package Contents
- go to Contents/Resources/Java
- unzip tizen-sdk.zip
- copy the tizen-sdk/jdk folder to ~/.package-manager/
- run installer.app
When the stars are aligned, once the installation is complete, you need to open Package Manager and add the following extensions:
- Samsung Certificate Extension;
- TV Extension Tools;
- and the current platform (now it is TV-Extension-6.0).
Judging by the download speed, these packets are coming directly from the Korean servers. :-) While waiting for the installation to complete, you can read about the differences between HLS and DASH and between PlayReady and Widevine.
(…6 hours later)
Switching Your TV to Developer Mode
It’s time to move your TV to Developer Mode and add it to Tizen Studio.
To do this, go to Apps and press the magic sequence 1, 2, 3, 4, 5 on your remote control. As a result, the developer mode window opens.
If you have a full-featured remote with a numpad, you’re in luck. With a mini remote controller, it’s going to be a bit more tricky: you should open the on-screen numeric keypad (numpad) and press 1–2–3 buttons using the direction buttons (d-pad).
At the top: a full-featured remote control with a numpad and d-pad for advanced users and developers. At the bottom: a mini remote control for Smart TV with control buttons in the center.
In the pop-upped Developer Mode window, type in the IP of your device with Tizen Studio, reboot your Smart TV, and voila — you can open Device Manager and add your big and beautiful 65" TV.
Adding Your TV to IDE via Device Manager
Screenshot: Device Manager with a connected TV.
Several conditions must be met for a TV to be successfully added to Device Manager:
- the TV is switched to Developer Mode;
- the Developer Mode window shows the correct IP of your working machine with Tizen Studio installed;
- devices are on a shared network: LAN, WiFi, or VPN.
[Optional] After adding a TV in Tizen Studio, you can copy its unique DUID, so it would be easier to create a certificate later. And if there are a lot of TVs (just in case), it is better to put all DUIDs into a text file in — one DUID per line.
Tizen Simulator and Emulator
The Tizen Emulator is almost a full-fledged replacement for a real device. It supports the emulation of processor, memory, peripherals, events, codecs, and graphics. However, there is no support for DRM or tech tools for digital rights management.
We advise you to download the 4.1.2 platform to run the emulator on it — it runs faster and takes up less memory space than others. You can find it in the archive section of the TV Extension for Tizen SDK.
A complete list of differences between the emulator and the real device can be found in the corresponding section on developer.tizen.org
Web Simulator is a lightweight version of the emulator in Chrome. There is virtually no API, and the rest is simulated with JS returning stub values. You can use it to test various screen resolutions and some basic stuff, but there are more limitations than opportunities.
Adding a Certificate on Your TV
Now it’s time to create certificates with the Certificate Manager. They will allow installing your application on your TV or emulator and publishing it on the Tizen Store. There are two types of certificates: Tizen and Samsung.
Screenshot: Samsung Certificate Manager.
Choose the Samsung certificate, it will allow you to install applications on your TV. To do this, you will need to create an account in Seller Office, a special section for Tizen developers on the Samsung website.
New accounts are confirmed manually, so you have to wait a bit — this is the main inconvenience of creating the first certificate. You will get the Public level by default, which is enough for most tasks.
The Partner level opens up more opportunities. To get it, you have to pass a quest in the Seller Office and wait for confirmation from two weeks to two months. (That was the case even before the COVID-19 pandemic!).
The Platform level is inaccessible to mere mortals.
The Tizen certificate is needed to test the application in the emulator ONLY. Its main advantage is your freedom. Freedom of choice: Public and Partner levels with its advanced API are available out of the box.
As a result, you will have a profile with two certificates — author and distributor.
Important: Take kare of your certificate (author.p12) and password, make a backup immediately, save it in a safe place, and send it to your client. Without it, you won’t be able to update the app in the Tizen Store.
Our tip for Tizen developers: before creating a certificate, enable your TV in Device Manager, then its DUID will be added to the distributor certificate automatically.
The Promwad’s profile with two certificates for Tizen OS: author and distributor.
To summarize. A certificate is needed for the following things:
- wgt file signature to install on your device or emulator;
- publishing your app on the Tizen Store;
- certificate level defines a set of functions available from the device API.
Read more about certificates:
- https://docs.tizen.org/application/web/tutorials/sign-certificate/
- https://docs.tizen.org/application/dotnet/tutorials/certificates/creating-certificates/
The last step is to install the certificate on the TV. Without this, you will not be able to install your application on it. You need the Samsung certificate. Done!
Screenshot: Installing the certificate on your Smart TV.
Developing Web Apps on Tizen: Varieties and (Un)Usability
Tizen has two types of web applications: packaged and hosted.
A typical packaged application is installed on your TV and stores all resources locally — styles, scripts, templates, images, config.xml, etc. When developing or debugging such an application, you have to wait for the wgt file to be built, downloaded, and installed on the device. Writing styles, developing new modules, or debugging player behavior promises pain, frustration, and a great deal of time is lost in reconstructing the context.
The best solution in the early stages would be to develop an app for the Chrome desktop version. When preparing HTML layouts and debugging navigation, you can also do without a TV.
Lucky owners of the Samsung Partner level certificate can choose a hosted application. The TV acts as a resource loader, and the development process goes as the usual browser-based one. To work with hosted applications, you will need to do two things:
- Add to the project your favorite http server with autoreload.
- Create an empty project in Tizen Studio and add a redirect to the local machine IP to index.html.
<!DOCTYPE html>
<html><head>
<title>MyApp</title>
<meta http-equiv=“refresh” content=”0;url=http://YOUR_IP">
</head>
<body></body>
</html>
Done! The TV now acts as a webview.
The main disadvantage of such a solution is the reduced API of the webapis device. This thing is critical if you need, for example, to get DUID of your device to bind it with the back-end.
webapis.productinfo.getDuid()
Cannot read property 'getDuid' of undefined
Meanwhile, the Tizen API remains fully available: you can add RCU buttons, control volume, etc.
tizen.tvinputdevice.registerKey("ChannelUp");
success
What Code Is Used to Develop Apps for the Samsung Smart TVs
1. Javascript (ES5 and ES6)
In 2017, Tizen started partial support of the third coming of Javascript (ES6). Full support was implemented for the 2018 models. It is better to read the specification in person; and there may be surprises:
For old-timers, you have to use vanilla.js or transpilate the code.
2. React
The answer is yes. We haven’t tried it, but a similar version is described on Stackoverflow: It’s a little challenging, but you can do it.
3. React Native
If you are a React Native developer, try ReNative.
Chromium and Webkit to run web apps on Tizen
Tizen has the Chromium engine to run web applications. This is true for 2017–2021+ TV models. The 2015 and 2016 models run apps on the Webkit engine and, despite obsolescence, there are still plenty of them in users’ homes. Gradually, Samsung is removing them from its app store. For example, today, you can no longer release a product for 2015 TVs.
The version of the engine does not shine like a new one and can not be updated. The 2021 model has Chromium M76 version released two years ago.
The reality is the following: to support current devices, you have to deal with the Chromium M47 version from back in 2015. What did you do in 2015? Ugh…
If that’s not enough, welcome to the support of 2016 TVs with the Webkit version of the mysterious r152340 revision. But let’s not talk about sad things.
Debugging Web Apps on Tizen
For debugging, you can use Chrome DevTools no older than version 79. That’s because on a chilly February morning in 2020, Google removed support for Custom Elements V0 starting with the 80 version, and those developer tools had since become incompatible with Tizen.
Workarounds like “Go to Preferences > Tizen Studio > Web > Chrome > Extra parameters” and add — enable-blink-features=CustomElementsV0 — user-data-dir=/tmp/tmpchromeuser do not work.
Our choice is to install the 79th version from the archive www.slimjet.com/chrome and disable auto-update.
For a TV from 2016 on Webkit, the DevTools from Chrome v62 or so will do. There is a high probability of getting a frozen screen on your TV if you press the “wrong” button in DevTools.
Publishing Your App: Seller Office and Tizen Store
It’s time to submit and publish your app for the Tizen Store. To do this, you need to prepare or request several things from your client:
1. Application logos according to the UX manuals:
- A full-screen pic with two layers: the logo itself (transparent PNG) and the background. Size: 1920x1080px, 300 kilobytes max.
- An icon for search results (512x423px), 300 kilobytes max.
2. Full-size screenshots of the main application screens — 4 pics.
3. A DOC file in English with a description of your screens and behavior of your application according to the following checklist:
- UI structure displaying navigation between your app screens.
- Use cases showing how to use the main features of your app.
- Menus and functions — labeling and description of the main functions.
- Remote control keys and their functions.
- Language options.
Everything seems to be strict and clear in this official developer’s checklist, but as our practice shows, a simple document with UI screenshots and a description of your main functions and buttons is OK.
4. Specify the version of your application in config.xml and prepare a signed wgt file.
We’re good to go! The rest of the quest requires no prior preparation. You can go directly to the registration.
After successfully completing the registration, the manual testing process by Samsung begins. Their people add bugs to the internal bug tracker, attach silent videos there, and point out moments of your fiasco.
As a result, the application will appear in the Samsung Store, even if it has minor defects, such as “Many of channels don’t work. Black screen with loader is visible”. :-)
But with critical defects like “Infinite loading,” the application will not make it to users.
Screenshot: the bug tracking system on Samsung’s portal for Tizen developers.
After fixing the critical bugs, you can celebrate your success! The app can now be found by name or keywords in the Smart TV search.
Documentation for Tizen Apps Developers
The documentation is there, thank you very much.
It was written by different people at different times, so terminology and style changes from document to document, and in the guides have unworkable code. You can find a striking illustration in the example of using an embedded player: webapi instead of webapis. And the main thing: this unfortunate typo was in the DRM settings section! We are sure that we were not the only ones who reported this problem to the Sellers Office, but three years later the problem is still there.
Helpful Notes for Tizen developers
1. Registration and Support for Remote Control Buttons
The first thing you have to deal with when developing Tizen-based apps is registering the remote control buttons.
Some buttons will not be available in the app by default, and you need to register them first.
Individually:
tizen.tvinputdevice.registerKey('MediaPlayPause');
Or as a bunch:
const keys = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9",
"ChannelUp", "ChannelDown", "MediaPlay", "MediaPause",
"MediaFastForward", "MediaRewind", "Exit"];
tizen.tvinputdevice.registerKeyBatch(keys, successCb, errorCb);
It is better not to register VolumeUp, VolumeDown and VolumeMute buttons, otherwise, their native functionality will require program processing via API.
The rest is easy. Catching clicks in the application with the Listener:
document.body.addEventListener('keydown', handleKeyDown);
where handleKeyDown will pass the button code.
2. Useful Tizen and Webapis Calls
A list of useful calls for the Tizen developers:
tizen.systeminfo.getCapability("http://tizen.org/feature/network.ethernet");
tizen.systeminfo.getCapability("http://tizen.org/system/model_name");
tizen.systeminfo.getPropertyValue("ETHERNET_NETWORK”, successCb, errorCb);
webapis.productinfo.getFirmware()
"T-KTM2DEUC-1202.3"
webapis.productinfo.getModel()
UNU7400"
webapis.productinfo.getVersion()
"3.0"
webapis.productinfo.getRealModel()
"UE43NU7400"
webapis.productinfo.getModelCode()
"18_KANTME_UHD"
webapis.productinfo.getLocalSet()
"EU_LITHUANIA"
Curious Cases We Encountered in Our Clients’ Projects at Promwad
Case Study #1: Voice Control Support (Korea vs. Others)
Voice control is completely helpless and ruthless at the same time. What it should look like: you say to your remote “TV, I want coffee” and 10 minutes later a courier delivers you a cappuccino. The manufacturer writes nicely about “you can register general voice commands, which trigger a listener when the user speaks them,” but behind every “can” is a “must”. As is usually the case, two troubles merged into one: the need to pre-register commands and poor voice recognition. And if you or your client gets the idea of adding voice control, be prepared to supplement the Volume Up and Louder dictionaries not only with synonyms but also with the similar-sounding Bloom Up and Laura.
Everything is much better in the Korean TV interface. But, as their folk proverb says, “How can you wag a tail if you don’t have one?”
Case Study #2: Quick Transition Inside the App and Deep Link
The prize in the “least used feature” category goes to Smart Hub Preview, which gives you direct access to the internal sections of the app. With this kind of linking, you can feature content or send your users directly to some favorite section.
The scheme shows an example of featured content.
Case Study #3: Mpd Stream Bug With 50 Days
When porting one project to Tizen 4.0 for the 2017 model, we had a problem: the sound did not work when playing live broadcasts (MPD streaming). The Volume Up/Down/Mute buttons and the sound control through API did not help. On other platforms — for example, LG Smart TV (WebOS) — there was no problem. The link to the MPD stream and the file content also did not cause problems — all tags and directives were supported by Tizen.
We had sound in our test streams.
Our doubts were related only to the availabilityStartTime directive, which specifies a zero point on the timeline and is defaulted to Unix epoch, i.e. 1970–01–01T00:00:00Z.
It turned out that in streams with the value of availabilityStartTime greater than 49.7 days, the sound was absent or disappeared within the playback process. And it made sense because 49.7 days or 2,147,483,647 milliseconds or 2**32 equals the maximum positive integer value in 32-bit systems (Number.MAX_SAFE_INTEGER). Simply put, there was just a bug in the Tizen multimedia stack, and there was nothing we could do about it.
How was it solved? The next day the TV automatically updated the firmware to version 1251, and the problem disappeared.
Conclusion
Tizen holds a solid market share, the platform is developing, new versions of TVs and software are coming out. At the same time, development does not become easier or more comfortable and is full of frustration. The attempt to create a single platform for all devices at once is ambiguous.
The biggest problem is documentation and usability. It covers all versions of all devices at once — web and native apps — and is full of bugs and flaws.
The developer.tizen.org website loads slowly enough to feel this (3–8 seconds), and it hasn’t changed in recent years. The search is so awkward that it is more convenient to google something and go to the main site, but it is important to make sure that the article or guide refers exactly to your TV and to the web version of the application. And the automatic switching of the site to its Korean version is a common thing.
The forums for Tizen app developers are filled with typical problems. Answers with outdated links lead to “pagenotfound” 99% of the time, and communication with the Seller Office is useless 100% of the time. You will most likely wait three weeks to get an answer that is irrelevant to the question. And that’s for 30% of your profits if you release a paid application.
Testing feels a lot like the lottery. To build a working player for video streaming, let alone DRM or advertising support is a challenging task for advanced engineers. :-) It’s not for nothing that Tizen promotes the paid 3rd party NexPlayer as “the only video player recommended by Samsung” — you should use it.
We suspect that some paragraphs of our guide may have caused your frustration and discourage you from Tizen. Nevertheless, if things were simple, this article would not have been born, so we’ll wrap it up on a positive note: Tizen is globally ranked first among all operating systems for Smart TV. Last year, this OS covered 13% of the global market and 30% in the UK. Judging by the recent forecasts, Samsung is not going to lose its position.
Even in the U.S. and Canada, where the leader board of Smart TV OS differs from all other regions (they prefer Roku there), Tizen is still in the top three along with Amazon Fire TV. So if you or your customers are planning to release apps for a wide international audience, Tizen is your must-have, despite all the pain and tears for front-end developers who write JS code for this operating system. At least we at Promwad Electronics Design House can confirm from our experience that with each newly published application for Tizen Store, your next one will be easier and faster to release
The Korean proverb says “No gains without pains” (노력 없이는 이득도 없다). Thanks for reading!
About the Promwad Blog
Hi, my name is Ivan Kuten. I’m a co-owner & CTO at Promwad, where we design and manufacture for our clients new electronics and embedded software for smart TV, telecom, automotive, and other industries. Feel free to add me on LinkedIn; I’d love to connect with you and share my experience.
Top comments (1)
it would be nice if there was newpipe.net for tizen