This post is also available in: Английский
К сожалению, на данный момент разработка для телевизоров сильно фрагментирована. Не существует единой стандартизованой платформы для разработки приложений под разные телевизоры, у каждого производителя собственный SDK, набор программных интерфейсов, требования, предъявляемые к приложениям, и соглашения по установке приложений на устройства. И даже в рамках одного производителя примерно раз в год выходят обновления SDK, добавляющие новые функции. Хорошая новость заключается в том, что все они в той или иной мере основаны на веб-технологиях с некоторыми специфичными ограничениями и дополнительными функциями. Наиболее распространены на сегодняшний день телевизоры с функцией Smart TV, выпускаемые компаниями LG, Samsung и Philips. В этой статье мы расскажем о разработке приложений для ТВ на примере одной из этих платформ — LG Smart TV.
По существу платформа для запуска приложений на LG представляет из себя веб-браузер на движке WebKit не последней, но и не слишком старой версии. Из платформы убрана вся функциональность, которая могла бы потенциально выдать ее браузерную сущность: здесь нет адресной строки, кнопок вперед-назад и вообще каких-либо кнопок, она не позволяет вводить текст в формы, отображать alert-ы из JavaScript и пользоваться какими-либо средствами отладки. Даже событие window.onerror, которое могло бы быть полезно для отлова ошибок в JavaScript-ах, вырвано с корнем. Предполагается, что все необходимое, должно быть реализовано исключительно средствами HTML, CSS и JavaScript. Стандартные элменты HTML-форм поддерживаются, но не рекомендуются к использованию. Средства разработки, которые поставляются производителем, включают эмулятор платформы, но он, во-первых, существует только в версии под Windows, а, во-вторых, он показался нам неудобным и бесполезным в свете того, что практически все функции приложения можно с легкостью отлаживать в обычном браузере Google Chrome.
Помимо программных особенностей платформы существуют также ограничения, присущие самому способу взаимодействия пользователей с телевизором, а также связанные с аппаратным обеспечением устройств. Рассмотрим основные из них.
В телевизорах традиционно используются достаточно медленные по сравнению с настольными компьютерами и ноутбуками процессоры, обычно на платформе MIPS. Из-за этого ограничены возможности визуального дизайна пользовательского интерфейса приложения: всевозможные анимации элементов страницы, использование полупрозрачности, плавность интерфейса, не говоря уже о трехмерной графике.
Но основной вызов для разработчика, привыкшего к обычным веб-приложениям, представляет то, как пользователь взаимодействует с телевизором: обычно лежа, с расстояния в несколько метров и используя сравнительно медленное и неудобное устройство ввода — пульт. Просмотр телевизора с большого расстояния означает, что текст и изображения должны выводиться крупно. В результате плотность размещения информации становится сравнима с мобильными устройствами. Кроме того, рекомендуется избегать необходимости скроллинга страницы, так как это неудобно для пользователя.
Навигация с помощью пульта
Для телевизоров LG доступно несколько разновидностей пультов: обычный — с цифровыми кнопками и стрелками, Magic-RCU, позволяющий управлять курсором на экране телевизора и похожий на джойстик для приставки Wii, а также специальные приложения для смартфонов. Несмотря на такое разнообразие, при разработке приложений приходится ориентироваться на самую базовую функциональность, доступную на всех платформах NetCast. Обычный телевизионный пульт, как наиболее распространенное устройство ввода, сразу же отсекает множество привычных сценариев взаимодействия с приложением: набор текста на клавиатуре, point-and-click мышью или нажатием пальцем на экран, жесты. Вместо всего этого — долгий и неудобный процесс выбора нужного элемента с помощью четырех кнопок — вверх, вниз, вправо, влево — и подтверждения выбора кнопкой OK. К счастью существуют уже готовые JavaScript-библиотеки, помогающие реализовать эту функциональность. Плагин для jQuery jquery-keynav позволяет с помощью одного простого вызова задать все фокусируемые с помощью стрелок клавиатуры элементы на странице и определить для них классы для различных состояний:
$('.fcsbl').keynav('focused', 'unfocused');
При этом плагин автоматически определяет ближайший в каждом направлении элемент, к которому необходимо переместить фокус при нажатии стрелок. Для отлова событий нажатия стрелок и кнопки подтверждения (Enter/OK) плагин использует стандартные коды клавиатуры, которые совпадают с кодами на пульте LG. Плагин keynav очень прост в использовании, но его алгоритм определения соседнего элемента не подходит для сложной верстки, например, когда область экрана разделена на несколько независимых частей: верхнее меню, боковое меню, содержимое, подвал. В этом случае нам хотелось бы и чтобы навигация внутри каждой из этих зон также работала независимо от остальных. При использовании же keynav могут наблюдаться странные эффекты, когда при последовательном нажатии одной и той же стрелочки курсор перепрыгивает из зоны в зону, так как ближайший по мнению плагина элемент может находиться в другой зоне. Но даже, если у вас очень простой дизайн, jquery-keynav все равно может работать странно при малейших отклонениях элементов на несколько пикселей в ту или другую сторону.
Как же этого избежать? В документации для разработчиков LG вообще рекомендуют отказаться от использования каких-либо библиотек, мотивируя это заботой о скорости работы приложения. И следуя этому принципу, в примере поставляемом с SDK, вся логика стрелочной навигации написана вручную. Но нам такой подход представляется преждевременной оптимизацией, он скорее внесет в приложение неоправданную сложность, выигрыш же по скорости будет минимальным. Необходим уровень абстракции для удобства разработки, который обладает гибкостью и позволяет вмешиваться в автоматическую логику навигации там, где это требуется. Именно такими характеристиками обладает класс KeyController, который является частью библиотеки Google TV Web UI Library. При использовании опции useGeometry этот класс работает аналогично jquery-keynav, но в дополнение к этому обладает следующими улучшениями:
- Более точный алгоритм нахождения ближайшего элемента, который учитывает направление нажатой стрелки.
- Возможность разбиения страницы на отдельные зоны и слои (например, для показа модальных диалогов) с независимой навигацией.
- Возможность переопределять стандартное поведение навигации.
Специфические JavaScript API
Большая часть функциональности, доступной на платформе LG NetCast, ничем не отличается от той же самой функциональности доступной в любом браузере на движке WebKit, за исключением некоторых отсутствующих в силу естественных причин API. Но кроме этого реализован также набор нестандартных объектов и методов JavaScript, позволяющих получить доступ к функциям специфичным для самой платформы и для телевизора. С их помощью можно выполнять следующие действия:
- Управление движком браузера: переход на предыдущую страницу (аналог кнопки «Назад»), выход из приложения и возврат в главное меню, отображение индикатора загрузки.
- Управление просмотром видео: задание режима масштабирования, вызов встроенного меню настроек видео и звука, вызов меню настроек масштабирования.
- Управление работой пульта Magic-RCU (point-and-click, аналог мыши): скрытие курсора, события включения и выключения пульта.
- Получение информации о телевизоре: версия программного и аппаратного обеспечения, поддерживаемые функции и настройки.
- Управление медиаплеером.
Видеоплеер платформы LG NetCast
Медиаплеер в веб-приложениях LG является плагином браузера и внедряется на страницу с помощью тэга object. В зависимости от содержимого атрибута type он работает как видеоплеер или аудиоплеер. Плеер может воспроизводить контент закодированный в различных форматах и кодеках. В частности, заявлена поддержка H.264/AVC с настройками до High Profile (3.2/4.1), 4 Мбит/с, 1920×1080, а также аудиокодеков AAC-LC/HE, MP3. Полный список приведен в документации для разработчиков. Работает HTTP Live Streaming с мультибитрейтом. Видеоплеер поддерживает два режима работы: полноэкранный и встроенный в страницу; и позволяет задействовать в приложении функцию показа видео в 3D, если она есть на данной модели телевизора. Плеер может воспроизводить контент в ускоренном или замедленном режиме при условии, что это поддерживается протоколом доставки видео.
Медиаплеером поддерживаются две системы DRM: Windows Media и Widewine. Если вы не готовы вкладывать усилия в покупку и развертывание полноценной системы DRM, плеер дает возможность защитить контент от несанкционированного скачивания с помощью так называемого «Oneshot URL». В этом режиме веб-сервер выдает ссылки на контент, которые работают только для одной загрузки, а плеер в свою очередь корректно поддерживает такой режим работы.
Процесс разработки
Вся необходимая для разработки документация и примеры доступны и регулярно обновляются на специальном портале для разработчиков LG Developer Lounge. В первую очередь рекомендуем ознакомиться с руководством по запуску собственных приложений на реальном телевизоре, скачать примеры приложений, попробовать их позапускать и ознакомиться с исходным кодом. Если вы имеете представление о разработке веб-приложений, то разобраться с ними не составит большого труда, а примеры помогут разобраться со специфичными особенностями платформы. Если вы собираетесь портировать уже существующее приложение, попробуйте запустить его на платформе, чтобы сразу понять, с какими проблемами придется столкнуться и что необходимо изменить. Затем внимательно ознакомьтесь с документом Web Application Development Guide, описывающим технические характеристики платформы: поддерживаемые функции HTML, кодеки, форматы видео, транспортные протоколы, разрешение экрана и т.д.; посмотрите рекомендации к пользовательскому интерфейсу Smart TV and Media Product User Interface Guidelines.
Для размещения приложения в магазине необходимо заполнить несколько форм и отправить приложение на тестирование. Подробности этого процесса описаны в документе Required documents for application submission to LG Seller Lounge.
