EntryCall — приложения для ТВ

Задача

Та же платформа, теперь на телевизоре в гостиной.

Что это.

EntryCall уже есть на телефонах жильцов и на оборудовании у двери. Это приложение приносит его на телевизор — большой спокойный экран с живой камерой у входа, часами, погодой и объявлениями дома. Сначала я сделал его для Apple TV, потом переписал для телевизоров Samsung.

Почему писать вручную.

Телевизоры Samsung работают на собственной системе, и самый надёжный способ добраться до большинства телевизоров, включая старые, уже висящие в холлах домов, — небольшое веб-приложение на простых HTML, JavaScript и CSS. Без фреймворков и изысков: оно должно работать на самом старом телевизоре в комнате.

Два телевизора

Одна панель, два движка.

Один и тот же экран на двух очень разных платформах.

• Apple TV — Исходное приложение, управляется пультом Apple TV.
• Samsung — написано вручную — Телевизоры Samsung не могут запускать тот же код, поэтому приложение переписано с нуля на простом веб-коде, чтобы охватить как можно больше телевизоров. Всё ниже относится к этой версии.

Как это сделано

Без фреймворка и без этапа сборки — намеренно.

Спроектировано от старого браузера.

• Простые файлы по порядку — Приложение — это список простых файлов со скриптами, которые загружаются один за другим. Легко читать, легко чинить, ничего не нужно компилировать.
• Код, безопасный для старого браузера — Только те возможности языка, которые понимает телевизор 2017 года. Современные сокращения в выпускаемый код не попадают.
• Цвета заданы заранее — Старые телевизоры не поддерживают современные цветовые переменные CSS, поэтому небольшой шаг сборки превращает каждую переменную в обычное значение перед выпуском.
• Безопасно по построению — Приложение никогда не превращает текст с сервера в сырой код страницы — это распространённая уязвимость, и здесь она закрыта по замыслу.

Пульт

Три вида ввода, один путь через приложение.

Система фокуса, сделанная с нуля.

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

Три способа управления, один путь в коде.

• Обычный пульт — Стрелки, OK и «Назад» — классическая навигация по телевизору.
• Пульт-указка 2017 года — Пульты Samsung той эпохи двигают курсор на экране и отправляют только клики. Приложение считает это полноценным случаем, а не запоздалой мыслью.
• Обычная клавиатура — Чтобы всё приложение можно было проверять в браузере на компьютере, без телевизора в комнате.

Живое видео

Картинка, которая переживёт капризный телевизор.

Сделано для видеочипа, который лжёт.

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

Как сохранить картинку живой.

• Сторожевой таймер — Если видео перестаёт двигаться, приложение замечает это само и переподключается.
• Терпеливые повторы — Переподключения идут со всё более длинными паузами и мягким индикатором загрузки — трансляция никогда не обрывается резко в чёрный экран.
• Прогретые плееры — У каждой камеры один живой плеер, который переходит между экранами, поэтому при переключении экранов видео не буферизуется заново.

Данные и вход

Настоящие данные или чистая демонстрация — за одним переключателем.

Переключатель «живой / демо».

Один небольшой слой решает, говорит ли приложение с настоящим бэкендом или показывает примерные данные. Настоящие сессии обновляются тихо. Демо-режим рисует весь интерфейс с примерным содержимым — именно так сделаны скриншоты на этой странице.