Популярность умных телевизоров и специализированных приставок продолжает расти. Мы уже писали, как собрать ТВ-приставку своими руками или превратить старый компьютер в аналог Apple TV с поддержкой AirPlay и Siri.
Сейчас расскажем, как можно установить популярную платформу Android TV практически на любой старый компьютер и превратить его в умный ТВ-бокс для просмотра YouTube, фильмов и сериалов.
Тестирование приложения
Окунувшись в разработку SmartTv приложений, вы в конечном итоге будите вынужденны так или иначе тестировать своё творение. Дао тестирования для SmartTv состоит из последовательных пунктов:
- Тестирование в браузере
- Тестирование в эмуляторах вендоров
- Тестирование на конечных устройствах
Далее мы рассмотрим, два последних шага на пути тестировщика. Первый пункт не является специфичным, а потому Вы сами найдете много интересного, просто запустив приложение и нажав клавишу F12 в браузере. Еще одним «хаком» в тестировании является автоматизация этого процесса. В библиотеке, например, используется jasmine для тестов в среде запуска.
Запуск в эмуляторах вендоров
Далеко, как мы выяснили, не соответствующее реальности — это эмуляторы, поставляемые с каждым SDK. (Samsung, , Philips) В конечном итоге, запуски на эмуляторах должны стать для Вас не более чем самопроверкой. И работоспособное приложение в эмуляторе не может считаться заведомо работоспособным на устройстве. И напротив, если у Вас что-то не работает в эмуляторе, не факт что это фиаско.
Как запустить приложение в эмуляторе Samsung
Для запуска приложения в последней версии эмулятора вам необходимы: сам эмулятор, который является образом для VirtualBox и доступен для скачивания на странице SDK. После импорта образа, вам необходимо указать путь до директории с Вашими проектами и запустить виртуальную машину. Главное что не стоит забывать — название директории в виртуальной машине должно быть Apps с соблюдением регистра. На скриншотах вы найдёте пояснения. (картинки кликабельны)
Как запустить приложение в эмуляторе Samsung(старое SDK)
Если вы разрабатываете приложение с помощью официального SDK, то проблем быть попросту не может, там есть большая кнопка запуска. В случае, когда вы хотите просто запустить приложение, вам необходимо поместить проект в директорию приложений SDK и запустить эмулятор, выбрав нужное приложение. На картинках видно как это сделать. (картинки кликабельны)
Как запустить приложение в эмуляторе LG
После запуска эмулятора, который устанавливается вместе с SDK, и фактически является виртуальной машиной с OS телевизора, Вы сможете указать URL вашего приложения (да приложение должно быть доступно по http, это может быть и локальный сервис на apache/denwer/nginx). Картинки демонстрируют последовательность действий. (картинки кликабельны)
>
Как запустить приложение в эмуляторе Philips
Пожалуй, самое «чудесное», что могло случиться с разработчиками GUI, это получить при запуске эмулятора консоль. Не буду ничего говорить, смотрите сами (картинки кликабельны)
Дальнейший шаг в тестировании приложений сделала компания Samsung, запустив лабораторию на удалённых устройствах. Фактически, это реальные девайсы, позволяющие проверить все функции вашего детища, которые невозможно лицезреть в эмуляторах (например, работа плеера со всеми форматами, взаимодействие с системами DRM).
Для запуска нашего приложения, необходимо выбрать устройство на сайте лаборатории и следовать инструкциям:
Как запустить приложение в Remote Test System Samsung
(картинки кликабельны)
Добавление телевизора в IDE через Device Manager
Скриншот: Device Manager с подключенным телевизором
Для успешного добавления телевизора в Device Manager должны выполняться несколько условий:
- телевизор переведен в Developer Mode;
- в окне Developer Mode указан правильный IP нашей рабочей машины с установленным Tizen Studio;
- устройства находятся в общей сети: LAN, WiFi или VPN.
[Опционально] После добавления телевизора в Tizen Studio можно скопировать его уникальный идентификатор DUID, так потом будет проще создать сертификат. А если телевизоров МНОГО (а вдруг), то все DUID лучше сложить в текстовый файл в формате «один DUID на строку».
Запуск на SmartTv телевизорах
Мы рассмотрим самый простой, на мой взгляд, способ установки и проверки приложений на конечных пользовательских устройствах. Для этого нам понадобится:
- Http сервер, с поддержкой php — для LG. Я разместил приложение по адресу https://paunin.com/content/demoApp/index.html
- Само приложение, его можно взять в репозитрии библиотеки Smartbox, в директории demo/demoApp;
Можно использовать адрес публичного демо https://immosmart.github.io/smartbox/demo/demoApp/, если у вас по какой-то причине нет HTTP сервера для публикации приложения. Однако, хочу заметить, что для возможности экспериментирования, и разработки приложения HTTP сервер необходим (если вы, конечно, не будите использовать альтернативные методы инсталляции, описанные в документации вендоров)
Краткая инструкция по всем вендорам(выжимка)
Samsung
10-12 платформы
:
- Пользователь производит вход в аккаунт (кнопка А на пульте)
- Набирает в поле Уч.зап. Samsung: develop
- В поле пароль: 123456 (любой другой тоже должен подходить)
- Выбирает «Вход»
- Нажимает на ПДУ кнопку «Enter»
- Вход осуществлён
- Нажимает на ПДУ кнопку D (в некоторых моделей телевизоров кнопка TOOLS)
- Выбирает «Разработка»
- Нажимает на ПДУ кнопку «Enter»
- Выбирает «Настройка IP-адреса серв.»
- Нажимает на ПДУ кнопку «Enter»
- Набирает IP-адрес: 82.146.41.200
- Нажимает на ПДУ return
- Выбирает «Синхронизация приложений пользователя»
- Нажимает на ПДУ кнопку «Enter»
- Происходит обновление приложения
13 платформа
:
- Нажать на кнопку Smart Hub
- Выполнить вход в учётную запись develop (Menu — Smart Features -> Samsung Account — > Login (name: develop; password: sso1029dev! )
- На экране Smart Hub существует вкладка «More apps» внизу, нужно нажать на неё
- Выбрать Options в верхнем правом углу экрана
- Выбрать IP Settings из выпадающего меню
- Набрать IP 82.146.41.200
- Ещё раз выбрать Options в верхем правом углу
- Выбрать App Sync из выпадающего списка
* В ряде случаев для TV требуется разрешение на установку сторонних приложений, что обеспечивается ключём разработчика, который можно получить обратившись в RND Samsung (https://samsungdforum.com/) Сделано вендером для пресечения нелегального распространения приложений
LG
- Скопировать архив https://paunin.com/content/lg_drm.zip на USB-flash
- Распаковать архив, так чтобы путь до файлов был: Корень usb-flash/lgapps/installed/ и т.д.
- Вставить USB-flash в USB разъём телевизора
- Включить телевизор (Power On на Пульте Дистанционного Управления)
- Нажать Home на ПДУ – произойдёт переход в Smart TV LG
- Нажать на красную кнопку на ПДУ – появится форма для входа в аккаунт
- Набрать в поле login: %свой логин% (если нет логина — зарегистрироваться, в телевизоре есть средства)
- Набрать в поле пароля %свой пароль%
- Нажать Ок – произойдёт вход в аккаунт и переход обратно в Smart TV LG
- Выбрать «Мои приложения» в правом нижнем углу
- Нажать Page down (кнопка переключения каналов вниз) на ПДУ — произойдёт переход на Мои приложения на USB
- Запустить приложение
Philips
Для запуска приложений на телевизорах Philips с функцией SmartTV, откройте в браузере TV ссылку https://goo.gl/o93keD
Полная инструкция по установке
Для того чтобы запустить приложение на TV/BD Samsung. Необходимо создать widgetlist.xml в корне сервера на который можно обратиться по IP адресу. Например, https://xxx.xxx.xxx.xxx/widgetlist.xml. Я разместил файл по адресу https://82.146.41.200/widgetlist.xml.Файл, напросто, является списком приложений для установки. В списке виджетов главным элементом является узел download, где указывается ссылка на zip-архив вашего приложения. Остальные параметры не имеют значения, даже размер. Как видно из нашего виджет-листа своё приложение я зазиповал и сложил по адресу https://paunin.com/content/smartbox.zip.
Теперь всё что осталось это сообщить устройству адрес вашего IP c widgetlist.xml и обновить приложения. Это делается средствами устройства в зависимости от модели:
10-12 платформы
- Пользователь производит вход в аккаунт (кнопка А на пульте)
- Набирает в поле Уч.зап. Samsung: develop
- В поле пароль: 123456 (любой другой тоже должен подходить)
- Выбирает «Вход»
- Нажимает на ПДУ кнопку «Enter»
- Вход осуществлён
- Нажимает на ПДУ кнопку D (в некоторых моделей телевизоров кнопка TOOLS)
- Выбирает «Разработка»
- Нажимает на ПДУ кнопку «Enter»
- Выбирает «Настройка IP-адреса серв.»
- Нажимает на ПДУ кнопку «Enter»
- Набирает IP-адрес: 82.146.41.200
- Нажимает на ПДУ return
- Выбирает «Синхронизация приложений пользователя»
- Нажимает на ПДУ кнопку «Enter»
- Происходит обновление приложения
13 платформа
- Нажать на кнопку Smart Hub
- Выполнить вход в учётную запись develop (Menu — Smart Features -> Samsung Account — > Login (name: develop; password: sso1029dev! )
- На экране Smart Hub существует вкладка «More apps» внизу, нужно нажать на неё
- Выбрать Options в верхнем правом углу экрана
- Выбрать IP Settings из выпадающего меню
- Набрать IP 82.146.41.200
- Ещё раз выбрать Options в верхем правом углу
- Выбрать App Sync из выпадающего списка
Наверное, самый захватывающий квест из всех рассматриваемых устройств. Для установки приложения LG его необходимо зарегистрировать на странице разработчика(требуется регистрация/авторизация). Заполняем всё, как указано на картинках и скачиваем получившийся файлик. Если кому-то понадобится, я свой файлик разместил по адресу https://paunin.com/content/lg_wrapper.zip.
Регистрируем приложение
(Картинки кликабельны)
И теперь всё что осталось — доставить приложение (точнее его подпись, само приложение находится в интернете) на телевизор:
Установка приложения — формальная инструкция
- Скопировать архив https://paunin.com/content/lg_drm.zip на USB-flash
- Распаковать архив, так чтобы путь до файлов был: Корень usb-flash/lgapps/installed/ и т.д.
- Вставить USB-flash в USB разъём телевизора
- Включить телевизор (Power On на Пульте Дистанционного Управления)
- Нажать Home на ПДУ – произойдёт переход в Smart TV LG
- Нажать на красную кнопку на ПДУ – появится форма для входа в аккаунт
- Набрать в поле login: %свой логин% (если нет логина — зарегистрироваться, в телевизоре есть средства)
- Набрать в поле пароля %свой пароль%
- Нажать Ок – произойдёт вход в аккаунт и переход обратно в Smart TV LG
- Выбрать «Мои приложения» в правом нижнем углу
- Нажать Page down (кнопка переключения каналов вниз) на ПДУ — произойдёт переход на Мои приложения на USB
- Запустить приложение
Для запуска на Philips SmartTv устройствах приложения, нам понадобится всего лишь запустить его в браузере путём указания адреса HTTP.В нашем случае используем адрес https://paunin.com/content/demoApp/index.html. Однако, сразу после старта браузера, вы заметите нативные рамки вокруг элементов в фокусе, что не приемлемо для боевого приложения, и чего в действительности не будет при размещении приложения в LG хабе.
Всё решается указанием при ответе с сервера необходимых заголовков, а именно «application/ce-html+xml». Этим занимается присутствующий а приложении php скриптик philips.php. Соответственно получаем адрес типа https://paunin.com/content/demoApp/philips.php. Для ускорения набора адреса с пульта телевизора, можете воспользоваться сервисом сокращения ссылок, например, https://goo.gl/. У меня получился адрес https://goo.gl/o93keD
Подключение ресивера к монитору от компьютера
Для тех, кому необходим еще один экран, но покупка нового телевизора пока не входит в планы, есть еще один вариант – использование монитора от компьютера. Его правильное подключение к приставке DVB-T2 обеспечит комфортный просмотр любимых телеканалов в цифровом качестве.
Сегодня стало возможным подключение ТВ-приставки к любым мониторам от компьютеров: как к новым, так и старым. Некоторые модели оснащены интегрированным динамиком, что избавляет от необходимости покупать акустические приборы. Перед тем как соединять два прибора, рекомендуется внимательно изучить все входы и разъемы, имеющиеся на мониторе. Больше всего повезет пользователям, у которых приставка и экран произведены примерно в один период. В остальных случаях соединение также будет допустимо, но в процессе могут возникнуть некоторые трудности.
Наиболее удачным вариантом являются гибридные тюнеры, у которых имеется выход VGA и HDMI. Если прибор еще оснащен разъемами типа «тюльпан», можно без проблем подключить устройства для воспроизведения звука. Если интерфейсы у ресивера с монитором разные, потребуется приобрести специальный переходник. Важным параметром является длина используемого кабеля. Для каждого типа изделия предусмотрены максимальные характеристики.
Чтобы не допустить затухания сигнала и выбрать шнур оптимальной длины, рекомендуется придерживаться следующих рекомендаций:
- VGA кабель – до 3 метров;
- HDMI шнур – до 5 метров;
- DVI провод – до 10 метров.
Если подключение не удалось и появилось сообщение об ошибке, значит, устройства несовместимы друг с другом или был выбран неподходящий кабель для соединения.
Разработка приложения
Я рассмотрю, исключительно, разработку приложения на базе библиотеки Smartbox. Если вы решите, что функционала библиотеки недостаточно для задач, стоящих перед вами, вы всегда можете использовать нативные методы платформ, изучив документацию вендора устройств. Также, вы можете поучаствовать в развитии и доработках проекта на gitHub’е.
Для нетерпеливых — готовое приложение
Структура приложения
Конфигурация приложения
Конфиги приложения должны храниться в нескольких файлах, и все они в относятся к Samsung платформе:
Параметры widget.info (только для Samsung)
Это обычный текстовый файл с говорящими за себя параметрами, где интересный нам параметр — это Screen Resolution, который определяет разрешение для которого написано ваше приложение, рекомендуемый на текущий момент это HD 1280×720. Допустимы: SD 960×540 и FullHD 1920×1080 Use Alpha Blending = Yes Screen Resolution = 1280×720
Параметры config.xml (только для Samsung)
Полная дока y y 0.1 y y n n y y y SmartBox DemoApp 1280 720 Smart https://github.com/immosmart/smartbox Smart icon/sb_demo_115x95.png icon/sb_demo_115x95.png icon/sb_demo_95x78.png icon/sb_demo_85x70.png
Input with num keyboard and maximum 4 signs
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
Самое важное, что стоит тут отметить — организация навигации. Все
видимые
элементы с классом nav-item могут получить на себя фокус и позже инициировать события (focus, click, etc). Для оптимизации навигации, в боковом меню и на сцене видео используется data-nav_type=»vbox», что говорит плагину навигации » перестать использовать поиск направления согласно положению элементов на странице, и фокус начинает перемещаться от одного sibling элемента к другому, что гораздо быстрее» (с) Документация по навигации. Другой хак — это аттрибут data-nav_loop=»true», что позволяет зацикливать навигацию в рамках данного элемента.
Главный объект приложения App
Заглянем в файл js/app.js После инициализации самого Smartbox происходит инициализация приложения SB.ready(_.bind(App.initialize, App));, запуская тем самым показ легенды $$legend.show(); и добавление обработчиков событий this.setEvents(); от элементов меню, плеера, клавиш пульта. Дополнительные комментарии в самом файле.
Тригеры изменения легенды
Во время работы приложения, мы хотим показывать пользователю подсказки по использованию тех или иных клавиш пульта. Самый простой способ — это обновлять легенду в зависимости от произошедшего события. Этим собственно и занимается файл js/legendTriggers.js. При фокусе nav_focus или потери фокуса nav_blur мы задаем элементам легенды window.$$legend.keys различные значения, которые тот час же выводятся с соответствующим значком.
Коллекция видео потоков
Как и любое приложение, наше должно иметь источник данных для отображения, взаимодействия с пользователем или внутренней настройки. Все наши данные для сцены videos хранятсяв файлике videos.js. Это лишь пример, а потому реальное приложение, вероятно, будет получать данные иным способом. Всё что делает этот кусок кода — сохраняет массив объектов (со ссылками на потоки и их назвния) в глобальный объект приложения window.App.videos = […]. Далее, в файле сцены, этот массив будет развёрнут и вставлен в html в div.scene_video.
Сцены приложения
Сцены это всего навсего объекты одной структуры, хранящиеся в глобальном объекте window.App, которые показываются и скрываются в зависимости от того, на какой элемент меню был сделан click
Код отвечающий за показ сцен
Навешивание событий по клику на элементы меню: //js/app.js $(‘.menu’).on(‘click’, ‘.menu-item’, function ( e ) { var scene = e.currentTarget.getAttribute(‘data-content’); self.showContent(scene); });) Метод инициирующий отображение сцен: //js/app.js showContent: function ( scene ) { var cur = this.currentScene, newScene = this.scenes[scene]; if ( cur !== newScene ) { if ( !newScene ) { $$error(‘Scene ‘ + scene + ‘ doesn\’t exist’); } else { if ( cur ) { cur.hide(); } newScene.show(); this.currentScene = newScene; } } }
Не буду подробно останавливаться на реализации сцен, а опишу лишь специфику относящуюся к библиотеке Smartbox.
videos.js
Как и говорилось выше, коллекция видео-потоков, после разворачивания в html this.renderItems(App.videos);, становится доступной для навигации за счёт класса в элементе nav-item. При инициализации сцены, все видео-потоки получают обработчик события this.$el.on(‘click’, ‘.video-item’, this.onItemClick);, где и происходит запуск потока Player.play(…). Документация по плееру.
input.js
Для демонстрации работы клавиатуры в сцене input, каждому отдельному полю ввода подключается клавиатура через метод SBInput. Документация по клавиатуре также содержит информацию о способах добавления своих языков и раскладок.
Пример подключения клавиатуры
Например, следующий код отобразит клавиатуру для ввода email на поле с классом js-input-2, естественно, после события click: //js/scene/input.js this.$el.find(‘.js-input-2′).SBInput({ keyboard: { type: ’email’ } });
navigation.js
Сцена, демонстрирующая события nav_focus и nav_blur для элементов с классом navigation-item, не отличается спецификой навигации и просто реализует подмену информационного блока при смени элемента в фокусе.
Основной код сцены
//js/scene/navigation.js init: function () { var $info; this.$el = $(‘.js-scene-navigation’); $info = this.$el.find(‘.navigation-info’); this.$el .find(‘.navigation-item’) .on( { ‘nav_focus’: function () { $info.html(‘Item with text «‘ + this.innerHTML + ‘» focused’); }, ‘nav_blur’: function () { $info.html(»); } }); _inited = true; }
Выбор операционной системы
Компьютер, к которому планируется подсоединение телевизора с пакетом программ Smart TV, должен соответствовать таким требованиям:
- операционная система Windows версий 7-10;
- разрядность – 32 или 64 бит;
- объем оперативной памяти – не меньше 2 Гб;
- частота процессора – не ниже 1,8 Ггц;
- наличие видеокарты средней или высокой мощности.
Операционная система от Google под названием Android TV раньше была доступна только для телевизоров с пакетом приложения Смарт-ТВ. Сегодня есть возможность установить ее на любой ПК. Благодаря этому пользователь может оценить интерфейс ОС Android как на стационарном компьютере, так и на ноутбуке или планшете.
Операционная система Андроид предоставляет устройствам такие функции:
- воспроизведение аудио и видео;
- голосовой поиск;
- стандартный лаунчер (рабочий стол);
- поиск и загрузка игр и приложений, которые полностью оптимизированы для телевизора.
Компания-разработчик гарантирует обновления и отвечает за их установку.
Как скачать, установить и настроить программу Смарт ТВ на компьютер бесплатно:
Библиотека Smartbox
- Репозиторий — github.com/immosmart/smartbox.
- Полное демо — immosmart.github.io/smartbox/demo/demoApp/.
- Авторы решения: Чинин Денис (chininden[at]gmail.com),
- Полецкий Артём (artempoletsky[at]gmail.com),
- Попович Илья (Loshadushka[at]gmail.com),
- Шамгунов Ильдар (il.shamgunov[at]gmail.com),
- Паунин Дмитрий (Zmeeed).
- Логинов Павел (PLoginoff),
- Смородин Антон (melkov).
Всем спасибо и хорошей недели!
