Разработка Tizen-приложений для Samsung Smart TV: полный гайд для Javascript-разработчиков

Эта статья рассказывает про удивительные приключения JS-разработчиков в мире ОС Tizen. В ней будет и пошаговая настройка рабочего окружения, и подключение «умного» телевизора Samsung вместе с пультом, и, конечно, сам процесс разработки и публикации приложения для Tizen Store — с примерами и подводными камнями. 

Так что если вы разделяете наше мнение о том, что Javascript — лучший язык программирования, потому что он работает практически везде – от домашнего Smart TV до кораблей SpaceX, то добро пожаловать под кат.

Итак, вы — фронтенд-разработчик, а перед вами – большой, красивый, 65-дюймовый телевизор Samsung Tizen. И появляется он не просто так, а по делу, так как вам нужно написать тв-приложение на Javascript: просто HLS или DASH-стримы от поставщика, немного DRM и других пока еще не очень понятных аббревиатур. Ничего сложного, ничего личного.

Отступать некуда, нужно разбираться.

Установка софта и настройка окружения

Первым делом идем на официальный сайт за Tizen Studio. Скачиваем этот набор инструментов и уделяем внимание разделу Prerequisites с системными требованиями и нужными компонентами, чтобы случайно не наступить на грабли на самом старте.

Tizen Studio — это интегрированная среда (IDE) для разработки на Tizen, в которой можно создавать реальные и виртуальные устройства, подключать платформы, создавать сертификаты и запускать приложения.

Опционально можно поставить VSCode Extension for Tizen, он поможет управляться с IDE не выходя из редактора.

Если звезды сошлись, по завершении установки нужно открыть Package Manager и добавить расширения:

• Samsung Certificate Extension;

• TV Extension Tools; 

• и актуальную платформу (сейчас это TV-Extension-6.0).

Судя по неторопливости загрузки, есть подозрение, что пакеты тянутся напрямую с корейских серверов. Пока ждем завершения установки, можно почитать, чем отличается HLS от DASH и PlayReady от Widevine.

(...6 hours later)

Перевод телевизора в Developer Mode

Пришло время перевести телевизор в Developer Mode и добавить его в Tizen Studio.

Для этого заходим в Apps и нажимаем на пульте волшебную последовательность 1, 2, 3, 4, 5 — откроется окошко developer mode.

Если у вас расширенный пульт с цифровым блоком — вам повезло. С минипультом придется немного повозиться: вызвать экранную цифровую клавиатуру (numpad) кнопками 123 и манипулировать кнопками направления (d-pad).

В открывшемся окошке Developer Mode вбиваем IP нашей рабочей машины с установленным Tizen Studio, перезагружаем наш смарт ТВ  и вуаля — можно открывать Device Manager и добавлять наш большой красивый 65-дюймовый... ну, вы поняли.

Добавление телевизора в IDE через Device Manager

Для успешного добавления телевизора в Device Manager должны выполняться несколько условий:

• телевизор переведен в Developer Mode;

• в окне Developer Mode указан правильный IP нашей рабочей машины с установленным Tizen Studio;

• устройства находятся в общей сети: LAN, WiFi или VPN.

[Опционально] После добавления телевизора в Tizen Studio можно скопировать его уникальный идентификатор DUID, так потом будет проще создать сертификат. А если телевизоров МНОГО (а вдруг), то все DUID лучше сложить в текстовый файл в формате «один DUID на строку».

Симулятор и эмулятор Tizen

Tizen Emulator – это почти полноценная замена реального устройства.   Поддерживается эмуляция процессора, памяти, периферии, событий, кодеков и графики. Из минусов – отсутствует поддержка DRM, т.е. технических средств защиты авторских прав.

Лучшего всего скачать платформу 4.1.2 и запускать эмулятор на ней — она работает быстрее и занимает меньше места в памяти, чем остальные. Ее можно найти в архивном разделе TV Extension for Tizen SDK.

Полный список различий между эмулятором и реальным устройством можно найти в соответствующем разделе на сайте developer.tizen.org

Web Simulator – легковесная версия эмулятора в Chrome. API практически отсутствует, а остатки симулируются на JS, возвращая значения-заглушки. На нем можно протестировать различные разрешения устройства и какие-то базовые вещи, но ограничений больше чем возможностей.

Добавление сертификата и его установка в телевизор 

Теперь заводим сертификаты в Certificate Manager. Они нужны для установки приложения в телевизор, эмулятор и публикации в Tizen Store. Существует два типа сертификатов — Tizen и Samsung.

Выбирайте сертификат Samsung, он позволит устанавливать приложения в телевизор. Для этого понадобится создать учетную запись в Seller Office — специальном разделе для Tizen-разработчиков на сайте Samsung.

Новые аккаунты подтверждаются вручную, поэтому придется немного подождать — это главное неудобство при создании первого сертификата. По умолчанию вы получите уровень Public, этого хватит для большинства задач.

Уровень Partner открывает более широкие возможности, но для его получения придется пройти квест в Seller Office и ждать подтверждения от двух недель до двух месяцев. И так было еще в доковидные времена!

Уровень Platform недоступен простым смертным.

Тип сертификата Tizen нужен для тестирования приложения ТОЛЬКО в эмуляторе. Его преимущество в свободе. Свободе выбора — уровни Public и Partner с его расширенным API доступны из коробки. Никаких регистраций и смс.

На выходе должен получиться профиль с двумя сертификатами — author и distributor.

Важно: не теряйте свой сертификат (author.p12) и пароль к нему, сделайте бэкап сра-зу-же, сохраните его в надежном месте, отправьте клиенту. Без него вы не сможете обновлять приложение в Tizen Store.

Tizen-разработчику на заметку: перед созданием сертификата включите телевизор в Device Manager, тогда его DUID добавится в distributor-сертификат автоматически.

Резюмируем. Сертификат нужен для следующих вещей:

• подпись wgt-файла для установки на устройство или эмулятор;

• публикация приложения в Tizen Store;

• уровень сертификата определяет набор функций из API устройства, который будет вам доступен.

Подробнее про сертификаты:

• https://docs.tizen.org/application/web/tutorials/sign-certificate/

• https://docs.tizen.org/application/dotnet/tutorials/certificates/creating-certificates/

Последний шаг — установка сертификата в телевизор. Без этого вы не сможете установить в него свое приложение. Нужен сертификат типа Samsung. Готово! 

Разработка веб-приложений на Tizen: разновидности и (не)удобство

У Tizen есть две разновидности веб-приложений: локальные (packaged) и серверные (hosted).

Обычное packaged-приложение устанавливается в телевизор и хранит все ресурсы локально — стили, скрипты, шаблоны, картинки, config.xml и т.д. При разработке или дебаге такого приложения приходится ждать сборки, загрузки и установки wgt-файла на устройство. Написание стилей, разработка новых модулей или отладка поведения плеера сулит боль, фрустрацию и большие временные потери на восстановления контекста.

Лучшим решением на первых этапах будет разработка для десктопного Chrome. При подготовке html-макетов (layouts) и отладке пространственной навигации также можно обойтись без телевизора.

Счастливым обладателям сертификата Samsung уровня Partner доступен вариант hosted-приложения. Телевизор выступает в роли загрузчика ресурсов и разработка напоминает привычную браузерную. Для работы с hosted-приложениями понадобится сделать две вещи:

1. Добавить в проект любимый http-сервер с автозагрузкой (autoreload).

2. Создать пустой проект в Tizen Studio и прописать редирект на IP локальной машины в index.html 

<!DOCTYPE html>

<html>

<head>

    <title>MyApp</title>

    <meta http-equiv="refresh" content="0;url=http://YOUR_IP">

</head>

<body></body>

</html>

Готово! Теперь телевизор выступает в роли webview.

Главный минус такого решения – урезанный API webapis устройства. Это критично, если вам нужно, например, получить DUID устройства для привязки к бэкенду.

webapis.productinfo.getDuid()
Cannot read property 'getDuid' of undefined

При этом API Tizen остается доступен в полной мере: можно добавлять кнопки RCU, управлять громкостью и т.д.

tizen.tvinputdevice.registerKey("ChannelUp");
success 

На чем писать приложения для Smart TV Samsung

1. Javascript (ES5 и ES6) 

C 2017 года Tizen начинает частично поддерживать третье пришествие Javascript (ES6). Полную поддержку завозят в модели 2018 года. Со спецификацией лучше ознакомиться лично, возможны неожиданности: https://developer.samsung.com/smarttv/develop/specifications/web-engine-specifications.html#javascript-es6

Для старичков придется использовать vanilla.js или транспилировать код.

2. React 

Ответ положительный. Мы не пробовали, но похожий на правду вариант описан на stackoverflow: It's a little challenging but you can do it

3. React Native 

Если вы разработчик React Native, попробуйте ReNative

Chromium и Webkit для запуска веб-приложений на Tizen 

Для запуска веб-приложений на Tizen установлен движок Chromium. Это актуально для моделей телевизоров 2017—2021+ годов. Модели 2015 и 2016 работают на движке Webkit и, несмотря на моральное устаревание, их все еще много на руках у пользователей. Постепенно Самсунг убирает их из своего магазина приложений – например, сегодня уже нельзя выпустить продукт для телевизоров 2015 года.

Версия движка не блещет новизной и обновить его нельзя. На модели 2021 года установлен Chromium версии M76 двухлетней давности. 

Реальность такова, что для поддержки актуальных устройств придется иметь дело с версией Chromium M47 из далекого 2015. Чем вы занимались в 2015? Мда...

Если этого мало, добро пожаловать в поддержку телевизоров 2016 года с версией Webkit загадочной ревизии r152340. Но не будем о грустном.

Отладка веб-приложений на Tizen

Для дебага можно использовать Chrome DevTools не старше 79 версии. А все потому, что прохладным февральским утром 2020 г. Гугл убрал поддержку Custom Elements V0 из 80-й версии и с тех пор эти инструменты разработчика  стали несовместимы с Tizen.

Обходные пути типа «Зайди в Preferences > Tizen Studio > Web > Chrome > Extra parameters» и добавь --enable-blink-features=CustomElementsV0 --user-data-dir=/tmp/tmpchromeuser не работают.

Наш выбор – установить версию 79 из архива www.slimjet.com/chrome и отключить автообновление.

Для телевизора из 2016 года на Webkit подойдут DevTools из Chrome v62 или около того. Высока вероятность словить фриз телевизора, если в DevTools нажать «не туда».

Публикация приложения: Seller Office и Tizen Store 

Настало время опубликовать свое приложение в Tizen Store. Для этого нужно подготовить или запросить у клиента несколько вещей:

1. Логотипы приложения в соответствии с UX-руководствами:

• Полноэкранная заставка из двух слоев: сам логотип в PNG-формате с полупрозрачностью и фон. Размеры – 1920x1080px, не более 300 килобайт.

• Иконка для результатов поиска размером 512х423px, не более 300 килобайт.

2. Полноразмерные скриншоты основных экранов приложения — 4 штуки

3. DOC-файл на английском с описанием экранов и поведения приложения по шаблону:

1. Структура UI — схема навигации между страницами приложения.

2. Примеры использования основных возможностей приложения.

3. Меню и функции — маркировка и описание основных функций.

4. Пульт — описание функций, которые присвоены кнопкам пульта.

5. Языковые опции — отметка о поддержке языковых версий.

Вроде бы все строго, есть официальный чек-лист разработчика, но, как показывает практика, вполне подходит и более простой документ в свободной форме со скриншотами UI и описанием поведения кнопок и основных функций.

4. Указать версию приложения в config.xml <widget … … version=“1.0.0”> и подготовить подписанный wgt-файл.

We’re good to go! Весь остальной квест не требует предварительной подготовки. Можно переходить непосредственно к регистрации.

После успешного завершения регистрации начнется процесс ручного тестирования со стороны Cамсунга. Живые люди будут заводить баги во внутреннем баг-трекере, прикреплять туда молчаливые видео и жестами указывать на моменты фиаско.

В итоге приложение появится в Samsung Store, даже если в нем нашлись незначительные дефекты, вроде “Many of channels don't work. Black screen with loader is visible”. :-)

Но с критическими дефектами, вроде “Infinite loading”, приложение не попадет к пользователям.

После исправления критических багов можно праздновать свой успех! Теперь приложение можно найти по названию или ключевым словам в сквозном поиске телевизора.

Документация разработчика приложений для OC Tizen

Документация есть, и на том спасибо.

Ее писали разные люди в разное время, поэтому конвенция нейминга и стилистика меняется от документа к документу, а в гайдах встречается откровенно нерабочий код. Яркая иллюстрация: в примере использования встроенного плеера есть досадная опечатка, там вместо webapis написано webapi. А главное — в каком месте — в разделе настройки DRM! Уверены, что об этой проблеме в Sellers Office сообщили не только мы, но спустя три года воз и ныне там.

Tizen-разработчику на заметку

1. Регистрация и поддержка кнопок пульта

Первое, с чем придется столкнуться при разработке на Tizen – регистрация кнопок пульта. По умолчанию некоторые кнопки не будут доступны в приложении из коробки, сначала их нужно зарегистрировать.

По отдельности:

tizen.tvinputdevice.registerKey('MediaPlayPause');

Или пачкой:

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);

Кнопки VolumeUp, VolumeDown и VolumeMute лучше не регистрировать, иначе их нативную функциональность придется обрабатывать программно через API.

Дальше – просто. Ловим нажатия в приложении через Listener:

document.body.addEventListener('keydown', handleKeyDown); где в handleKeyDown будет передаваться код кнопки.

2. Полезные вызовы tizen и webapis

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()
"CIS_RUSSIA"

Занимательные истории на клиентских проектах

Кейс 1: поддержка голосового управления (Корея vs все остальные) 

Голосовое управление совершенно беспомощное и беспощадное одновременно. Как это должно выглядеть: ты говоришь в пульт «телевизор, я хочу кофе» и через 10 минут курьер доставляет вам капучино. Производитель пишет красиво про “you can register general voice commands, which trigger a listener when the user speaks them”, но за каждым “can” скрывается “must”. Как это обычно бывает, две беды слились воедино: необходимость предварительной регистрации команд и плохое распознавание голоса. И если вас или вашего клиента посетит мысль добавить голосовое управление, будьте готовы дополнять словари Volume Up и Louder не только синонимами, но и созвучными Bloom Up и Laura.

В корейской версии интерфейса телевизора всё значительно лучше. Но, как говорится в их народной пословице, «чем вильнёшь, коли нет хвоста?»

Кейс 2: быстрый переход внутрь приложения и deep link 

Приз в номинации в  «наименее часто используемая фича» уходит функции Smart Hub Preview, которая дает прямой доступ к внутренним разделам приложения. Благодаря такому deep linking можно фичерить контент или отправлять пользователя сразу в любимый раздел.

Кейс 3: баг MPD-стрима длиной 50 дней 

При портировании одного проекта на Tizen 4.0 в модели 2017 года возникла проблема: не работал звук при воспроизведении прямой трансляции (MPD-поток, от англ. media presentation description)..  Кнопки Volume Up/Down/Mute, а также управление звуком через API не помогали. На других платформах — например, на LG Smart TV (WebOS) — проблема отсутствовала, ссылка на MPD-стрим и содержание файла также не вызывали вопросов – все теги и директивы поддерживались Tizen.

На тестовых стримах звук был.

Сомнения вызывала только директива availabilityStartTime, которая указывает нулевую точку на временной шкале и по умолчанию равна Unix epoch, т.е. 1970-01-01T00:00:00Z. 

Оказалось, что в стримах со значением availabilityStartTime больше 49.7 дней звук отсутствовал или пропадал в процессе. И правильно, потому что 49.7 дней или 2,147,483,647 миллисекунд или 2**32  равно максимальному положительному значению целого числа в 32-битных системах (Number.MAX_SAFE_INTEGER) Короче, это просто баг стека мультимедиа Tizen, и мы ничего не можем с этим поделать.

Как решилось? На следующий день телевизор автоматически обновил прошивку до версии 1251 и проблема исчезла.

Заключение 

Tizen занимают солидную часть рынка, платформа развивается, выходят новые версии телевизоров и софта. При этом разработка не становится проще или удобнее и полна фрустрации. Попытка создать единую платформу сразу для всех устройств неоднозначна. 

Самая большая проблема – документация и удобство ее использования. Она покрывает сразу все устройства всех версий – веб- и нативных приложений — и полна ошибок и недоработок. 

Сайт developer.tizen.org загружается достаточно медленно, чтобы это почувствовать (3–8 секунд), и за несколько лет ситуация не изменилась. Поиск скорее отсутствует, и удобнее найти что-то в гугле и перейти на основной сайт, но важно убедиться, что статья или гайд относятся именно к TV и именно к веб-версии приложения. Сайт переключился на корейский язык – это нормально, добро пожаловать. 

Форумы для разработчиков Tizen-приложений заполнены типичными проблемами. Ответы с устаревшими ссылками в 99% случаев ведут на “pagenotfound”, а общение с Seller Office бесполезно в 100% случаев. Скорее всего, вы будете ждать три недели, чтобы получить ответ, не относящийся к вопросу. И это за 30% от вашей прибыли, если приложение платное. 

Тестирование часто похоже на лотерею. Собрать работающий плеер, да еще с поддержкой DRM или рекламы – задача со звездочкой. Не зря же они сами форсят платный 3rd party NexPlayer – “is the only video player recommended by Samsung” – надо брать.

Подозреваем, что некоторые абзацы могли вызвать ваше справедливое недовольство  и оттолкнуть от Tizen. Тем не менее, если бы все было просто, эта статья не появилась бы на свет, так что мы закончим ее на позитивной ноте: Tizen в глобальном масштабе занимает первое место среди всех операционных систем для смарт-TB. В прошлом году эта ОС охватила 13% мирового рынка, а в Великобритании — все 30% и, судя по прогнозам аналитиков, компания Samsung не собирается сбавлять свои позиции. 

Даже в США и Канаде, где таблица лидеров на рынке Smart TV OS отличается от всех прочих регионов (они там предпочитают Roku), Tizen все равно остается в тройке лидеров вместе с Amazon Fire TV. Так что если вы или ваши клиенты планируете выпускать приложения для широкой международной аудитории, то Tizen — это must have, несмотря на всю боль и слезы frontend-разработчиков, которые будут писать JS-код для этой операционки. 

Как говорится, трудно сначала, приятно потом. Спасибо за прочтение!