Что в Smart TV тебе моём, или что можно запихнуть в телевизор

Добрый день, коллеги! Меня зовут Алексей, и я занимаюсь телевизорами, а именно разработкой Smart TV — приложений («давайте похлопаем Алексею»).

Но что такое Smart TV? Какое оно, сферическое Smart TV — приложение в вакууме?

Не буду томить вас ожиданием: в основном такого рода приложения предназначены для показа видеоконтента. В любых вариациях. Записанное, живое вещание, телепередачи, фильмы, мультфильмы, рекламные ролики, и прочая, прочая Тысячи их!

Но разве Smart TV только для этого?

Да, безусловно, телевизор лучше всего показывает именно видеоконтент, и с этим он хорошо справляется, но только ли для этого мы можем его использовать?

(Сейчас все счастливые владельцы приставок и HDMI-кабелей кинут в меня свои тухлые помидоры, скажут «Отписка!» и счастливые уйдут, а мы продолжим.)

Действительно, абсолютное большинство приложений, которые нам приходилось разрабатывать, в первую очередь предназначаются для показа видео, но были среди них и замечательные исключения. Кроме того, страдая известным заболеванием «шило в месте чуть пониже спины», я хотел выжать из телевизоров нечто больше, чем все от них ожидают.

О моих (и не только) скромных потугах речь и пойдёт ниже.

Действительно, первое, что приходит на ум — игра! Большой экран, возможность кросс-доменных запросов (так как Smart TV —приложение, по сути, — локальная HTML-страница) и худо-бедно стандартное управление (пульт) позволяют нам реализовать игровой сценарий.

В большинстве своём это казуальные игры вроде 1024, либо вариации на тему Tower Defence. Негусто. К сожалению, накрутить супер 3D с шейдерами, тенями и динамическим освещением получится разве что только на самых последних моделях... следующего года.

Ибо в ТВ обычно размещена не самая совершенная версия браузера, и, что хуже всего, она или обновляется крайне редко, или не обновляется вовсе. Кроме того, разница между мощностью ТВ, даже прошлогодними и текущими, может быть кратной.

Поэтому, если вы хотите охватить максимальное количество моделей, готовьтесь к кровавой оптимизации всего и вся. Чистый, нативный Canvas станет вашим лучшим другом. Обёртки над ним работают, но крайне прожорливо. Особенно удручает неудовлетворительная работа методов rotate и transform, поэтому анимацию планируйте спрайтовую и повороты спрайтов реализуйте только в самом крайнем случае.

Однажды мы делали игру на «Ночь карьеры». С ней удалось съездить к замечательным коллегам из Web Standarts Days и выступить с докладом.

Визуально игра представляет из себя игровое поле, вмещённое в размер экрана, нет скролла, без преград. Задний план разделён на несколько слоёв, чтобы реализовать 3D-эффект. На сцене генерируются летающие мишени (утки), по которым пользователь может стрелять.

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

Управление реализовали с помощью телефона, а для максимального охвата мобильных устройств реализовали клиент в виде адаптивного сайта. Реализовали мы его на WebSockets и добавили фишку — управление через изменение положения телефона.

Тогда всплыло много интересных особенностей, некачественных датчиков ориентации и других глюков. Нам пришлось применить алгоритмы подавления шумов, иначе «прицел» игрока на экране телевизора страдал жутким тремором.

Также выяснилось, что в игре «дует ветер»: в расчётах на телефонах накапливалась ошибка и прицелы постепенно «сдувало» в одну сторону, что вынуждало игроков постепенно поворачиваться. Некоторые играли, стоя спиной к ТВ.

В приложении используется анимация посредством замены спрайтов. Такой способ оказался достаточно производительным. Мы тестировали приложение с сотней и более летающих уток. В реальности в игре их было всего десять. Проблемы с производительностью возникли, когда прибежала дизайнер и возопила: «Хочу, чтобы планета крутилась!»

Закрутить спрайт проблем не составило. Проблема случилась, когда мы запустили приложение на относительно старом ТВ. Оказалось, что поворот спрайта 900 на 900 пикселей он обрабатывает чуть более, чем никак.

Самый глазастый пользователь может заметить, что планета на заднем плане разрезана на девять частей, которые вращаются вокруг одного центра. Это решило проблему с производительностью.

Ещё одна фишка проекта заключалась в том, что игровая логика обсчитывается... на ТВ. В этом случае сервер выступает просто в роли передатчика данных между клиентами и ТВ.

Сделали мы это для того, чтобы, даже в случае потери соединения, утки продолжали летать по экрану, и после восстановления интернета не требовалось перезапускать приложение. Любопытный кейс, но всё же необязательный.

Казалось бы, это уже банально, но нет. Как обычно, всё скрывается в деталях. Экран для чего? Какую функцию несёт? Для чего предназначен?

Приведу лишь несколько примеров.

На день Святого Валентина мы сделали онлайн-поздравлялку в компании, используя имеющиеся телевизоры в качестве трансляторов поздравлений.

Приложение было реализовано в минималистичном варианте с одним запросом к серверу, возвращающим список поздравлений.

Главная проблема заключалась в неприятной особенности телевизоров уходить в «спящий режим». Если Samsung разрешает отключать эту функцию с помощью метода setScreenSaver, остальные платформы не особо позволяют это делать.

Как вариант, можно запускать в фоновом режиме любое зацикленное видео: ТВ в режиме показа видео выключается гораздо реже. В итоге приложение свою функцию выполнило: во всех частях офиса на нескольких этажах в онлайне транслировались поздравления сотрудников.

Если быть совсем точным, карта боевых действий со списком лучших игроков.

Мы снова делали игру на «Ночь карьеры» и в этот раз решили совместить телевизоры, телефоны и VR. Суть заключалась в том, что игрок в VR-шлеме летает на драконе и отстреливает принцесс, которыми управляют игроки с телефонов. Кто убил дракона — надевает шлем. И так по кругу.

Скромно замечу, что со своей функцией (собрать максимальное количество народа у нашего стенда и удерживать их максимально долго) приложение справилось. О чём красноречиво говорят цифры статистики. (Подробнее о драконах, истребляющих принцесс.)

Приложение для ТВ обеспечивало демонстрацию общей сцены боя для всех желающих.

В этом проекте мы столкнулись с необходимостью оптимизации ранее стабильно и хорошо работающего кода. При увеличении количества игроков заметно ухудшались показатели производительности приложения. Выделили основные пути оптимизации:

• Уменьшение объёма передаваемой информации с сервера на клиенты и с клиентов на сервер.
• Минимизация создания новых объектов в приложении.

Создание каждого нового экземпляра класса заметно глазу, поэтому все экземпляры должны быть созданы заранее и показываться пользователю по мере необходимости.

Вы совершенно справедливо можете спросить: «Ты там вообще работаешь, нет?» На что я с искренним недосыпом на лице отвечу: «Конечно, работаю!» Но об этом чуть позже. А пока нам снова не сиделось и захотелось реализовать интерактивный задний фон для квадрокоптера.

Идея была в том, чтобы показывать в телевизоре саму усадьбу Деда Мороза, которая бы реагировала на отлёт и прилёт квадрокоптера.

Основной интерес был в том, чтобы «растянуть» картинку на три телевизора разных производителей.

Сделали мы это путём разбиения всей сцены на «комнаты». Каждый телевизор показывал «комнату» со своим номером. Номера «комнат» можно было менять, таким образом, телевизоры в принципе могли показывать одинаковые части одной сцены, но мы показывали всю сцену последовательно.

Команды на перемещение окружения сцен (зверушек, движение Луны и дым из труб) передавались с сервера по любимым WebSockets.

Поскольку мы знали время прилёта и отлёта квадрокоптера, появилась идея сделать «ветер» в телевизорах, который бы «сдувал» дым из труб при близкой работе винтов.

Опять-таки команда на взлёт с квадрокоптера через сервер спускалась на клиенты.

И тут тоже возникли сложности с производительностью. «Старая» webOS 2013 года крайне тяжело рендерила большую картинку (5760 на 1080). Пришлось специально для неё нарезать задник в размер экрана и подставлять строго его.

Тем не менее всё, что относилось к Smart TV и бэкенду, мы успешно реализовали.

Однако самый интересный проект был совершенно неигровой, а что ни на есть полезный. Приложение занималось охраной дома. Да, именно телевизор. Да, именно охранял.

Суть приложения в том, что имеющаяся камера снимает всё, что перед ней происходит и в случае резкого изменения картинки производит действия на выбор:

• Громко орёт.
• Посылает пользователю SMS.
• Пишет письмо с приложенными фотографиями инцидента.
• Пишет сообщение в Facebook, тоже со снимками.
• Делает всё это сразу или в любых вариациях.

Сам ТВ в этот момент усиленно прикидывается валенком и вообще не работающим. В приложении были обработаны случаи выключения ТВ от интернета или просто от питания. Приложение поддерживало мультиязычность. Установило его себе несколько десятков тысяч человек.

Но и тут было не всё просто. При подключении камеры и попытке получения в браузере стрима с неё, как известно, вываливается системный попап с подтверждением действия.

Особенность в том, что ТВ блокируют все всплывающие окна. Поэтому приложение было реализовано только на платформе Samsung с использованием либо встроенной в ТВ камеры, либо специальной камеры, поставляемой Samsung.

Ещё одним минусом стала, опять же, производительность ТВ. На относительно старых телевизорах (2013 года) можно было м-е-е-е-е-е-е-дленно прокрасться мимо камеры и телевизор бы «прохлопал» этот момент. Но в целом идея просто блестящая.

Телевизоры уже давно переросли свою основную функцию — показывать картинку с канала, показывать видео или быть вторым монитором.

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

Всем телеки!

P. S. Может быть, у тебя, читатель, были необычные задачи для Smart TV, когда телевизор приходилось использовать в несвойственной для него роли? Поделись! Расскажи!

#телевизоры #smarttv