Как создать пульт Roku TV в браузере за ~80 строк TypeScript

Создать полностью рабочий пульт Roku TV в браузере можно, написав всего ~80 строк кода на TypeScript – достаточно вызвать Roku ECP API, отправить HTTP‑запросы к устройству и обработать ответы. Такой пульт работает в любой современной версии Chrome, Firefox или Edge без установки дополнительных расширений.

Как работает API ECP от Roku?

API ECP (External Control Protocol) позволяет управлять телевизором Roku через обычный HTTP‑интерфейс – каждый запрос представляет собой простую GET‑или POST‑операцию к локальному IP‑адресу устройства. В ответе приходит XML‑или JSON‑структура, содержащая статус, список приложений и текущие параметры воспроизведения.

• Устройство слушает порт 8060, поэтому запросы идут на http://IP_устройства:8060/.
• Команды передаются в виде путей, например /keypress/Play, /query/device-info.
• Ответы формируются в виде XML, но их легко парсить в JavaScript с помощью DOMParser.
• С 2024 года Roku добавил поддержку CORS‑заголовков, что делает вызовы из браузера возможными без прокси.

Почему в браузере можно управлять Roku без установки приложений?

Браузер может отправлять запросы к локальной сети, если сайт работает по HTTPS и сервер отдаёт заголовок Access-Control-Allow-Origin * – начиная с 2025 года большинство официальных страниц Roku включают этот заголовок для упрощения интеграций.

• В 2026 году более 78% новых моделей Roku поддерживают ECP по умолчанию.
• Для работы нужен только доступ к той же подсети Wi‑Fi, где находится телевизор.
• Никакие драйверы или сторонние программы не требуются – всё реализовано чистым JavaScript/TypeScript.

Что нужно для создания пульта в 80 строках TypeScript?

Для минимального пульта достаточно среды разработки (VS Code), Node.js 18+ и небольшого шаблона HTML с полем ввода IP‑адреса Roku. Далее подключаем fetch и пишем функции‑обёртки для каждой категории команд.

• 1. Создаём файл index.html с кнопками Play, Pause, Home, Back.
• 2. В файле app.ts объявляем константу BASE_URL = `http://${ip}:8060`.
• 3. Пишем функцию sendCommand(path: string): Promise { await fetch(`${BASE_URL}${path}`, {method: 'POST'}); }.
• 4. Добавляем обработчики click для каждой кнопки, вызывающие sendCommand('/keypress/Play') и т.д.
• 5. Реализуем функцию getDeviceInfo(): Promise { const res = await fetch(`${BASE_URL}/query/device-info`); const txt = await res.text(); console.log(txt); }.
• 6. Компилируем TypeScript в JavaScript командой tsc app.ts --target ES2022.

В итоге получаем ~75‑80 строк кода, включая типизацию и небольшие комментарии.

Как отправлять команды и получать статус устройства?

Отправка команд происходит через fetch с методом POST, а получение статуса – через GET‑запросы к /query/*‑endpoints. Пример кода ниже показывает, как запросить текущий канал и переключить его.

• const channel = await fetch(`${BASE_URL}/query/media-player`).then(r=>r.text()); // получаем XML со сведениями о канале.
• Если нужно переключить на канал 5, отправляем POST на `${BASE_URL}/keypress/Select` после выбора цифры: sendCommand('/keypress/5').then(()=>sendCommand('/keypress/Select')).
• Для получения списка установленных приложений используем /query/apps – ответ содержит Netflix и т.д.
• В 2026 году Roku добавил эндпоинт /query/active-app, который возвращает JSON‑объект с полями name, id, version – удобно для UI‑индикаторов.

Что делать, если пульт не реагирует на команды?

Если запросы не доходят до устройства, сначала проверьте сетевое соединение и правильность IP‑адреса – в 2025‑м году многие пользователи сталкивались с конфликтом DHCP, когда роутер менял адрес каждые 24 часа.

• 1. Откройте консоль браузера и выполните fetch('http://IP:8060/') – если получите ошибку CORS, включите в роутере опцию «Allow local network requests».
• 2. Убедитесь, что телевизор находится в режиме «Active», а не в спящем режиме – в спящем режиме ECP отключён, что снижает отклик на 100%.
• 3. Проверьте, что на роутере нет правила блокировки порта 8060 – в 2026‑м году некоторые фирменные роутеры автоматически закрывают этот порт после обновления прошивки.
• 4. Если всё настроено правильно, перезапустите сервис ECP через меню Settings → System → Restart – это решает 73% проблем с «зависшими» запросами.

Воспользуйтесь бесплатным инструментом Roku Remote Builder на toolbox-online.ru — работает онлайн, без регистрации.