Издеваемся над Google Cast, или мышь для телевизора
Как только я узнал про такую замечательную вещь, как Chromecast, сразу побежал его покупать, ведь превратить свой ТВ в SmartTV (ну или на худой конец не перетыкать больше HDMI для просмотра фильмов) за две тысячи рублей — очень весёлая перспектива. Однако ещё более весёлая перспектива — это начать программировать под него.
Большинство задач для Хромкаста, которые реализуют сейчас — это простейшие приложения-видеоплееры. Форменная несправедливость для среды, которая может выполнять HTML5 на уровне свежего Хрома. Но вот незадача: нет в этой среде никаких событий мыши, что логично. Но и это не проблема для нас с вами.Итак, для начала создадим простейшие Sender App и Reciever App. Инструкции для этого есть в официальной документации. Если коротко, то для этого вам нужно:
Зарегистрироваться здесь, зарегистрировать свой Chromecast и своё приложение; Создать HTML-приложение Sender для Chrome (инструкция); Создать HTML-приложение Reciever для Cast-устройства (инструкция). Есть маленький чит, который позволит вам избежать лишнего шага по заливке созданного Receiver-приложения на внешний хостинг. Когда вы зарегистрировали свой Chromecast и добавили приложение (можете зарегистрировать его на любую левую страницу на любом левом домене, главное, чтобы она открывалась), вы можете открыть дебаг вашего приложения, как описано здесь, и далее просто ввести в JS-консоли:
location.href = 'http://IP-вашего-локального-сервера/' и открыть, таким образом, страницу Receiver-приложения с локального веб-сервера.Ну, приступим, собственно, к самому эксперименту. Всё волшебство нашего приложения будет заключаться в том, что мы будем передавать из Хрома координаты указателя мыши с помощью стандартного метода Google Cast API для передачи сообщения. Суть в том, что соединение между Receiver и Sender приложений идёт через ваш локальный WiFi (и, судя по всему, WebSockets), поэтому задержка передачи данных минимальна.
Для начала:
Собственно, функция, которая творит волшебство в Sender-приложении:
JS function () { if (!$('body').data ('casting')) { $('body').data ('casting', true).on ('mousemove', (function (e) { return window.session.sendMessage (namespace, { x: e.clientX, y: e.clientY }, (function () {}), (function () {})); }).throttle (10)).on ('click', function () { return window.session.sendMessage (namespace, { event: 'click' }, (function () {}), (function () {})); }); } return; } CoffeeScript → unless (body = $('body')).data 'casting' body .data 'casting', true .on 'mousemove', ((e) → window.session.sendMessage namespace, { x: e.clientX, y: e.clientY }, (→), (→) ).throttle (10) .on 'click', → window.session.sendMessage namespace, { event: 'click'}, (→), (→) Волшебная функция throttle в данном случае мною позаимствована из Sugar.JS. Как многие догадались, она ограничивает вызов коллбека не чаще раза в 10 мс, чтобы не зафлудить наш Chromecast. Namespace — это просто уникальная строка, имя, которое даётся каналу данных. В моём случае это 'urn: x-cast: com.google.cast.magnum.remote_control'.
Вызывать эту функцию нам нужно в тот момент, когда мы устанавливаем сессию связи с Cast-устройством, т.е. 1) внутри sessionListener (в случае обновления страницы, если соединение уже было установлено), а так же 2) в success-коллбеке в requestSession.
Итак, Sender теперь отправляет данные о координатах указателя мыши, осталось их как-то обработать в Receiver’е:
JS this.cursor = document.createElement ('div'); this.cursor.style.position = 'absolute'; this.cursor.classList.add ('magnum-cursor'); document.body.appendChild (this.cursor); this.messageBus = receiverManager.getCastMessageBus (this.namespace, cast.receiver.CastMessageBus.MessageType.JSON); return this.messageBus.onMessage = (function (_this) { return function (e) { if (e.data.x && e.data.y) { var element; _this.cursor.style.left = e.data.x + 'px'; _this.cursor.style.top = e.data.y + 'px'; element = document.elementFromPoint (e.data.x — 1, e.data.y — 1); if (_this.currentHover!== element) { if (_this.currentHover) { _this.currentHover.dispatchEvent (new Event ('mouseleave')); _this.currentHover.classList.remove ('hover'); } _this.currentHover = element; _this.currentHover.dispatchEvent (new Event ('mouseenter')); return _this.currentHover.classList.add ('hover'); } } else if (e.data.event) { return _this.currentHover.dispatchEvent (new Event (e.data.event)); } }; })(this); CoffeeScript @messageBus = receiverManager.getCastMessageBus @namespace, cast.receiver.CastMessageBus.MessageType.JSON
@messageBus.onMessage = (e) => if e.data.x && e.data.y @cursor.style.left = e.data.x + 'px' @cursor.style.top = e.data.y + 'px'
# we should get neighboor pixel; otherwise we will get cursor element forever. element = document.elementFromPoint e.data.x — 1, e.data.y — 1
if @currentHover!= element if @currentHover @currentHover.dispatchEvent new Event ('mouseleave') @currentHover.classList.remove 'hover'
@currentHover = element
@currentHover.dispatchEvent new Event ('mouseenter') @currentHover.classList.add 'hover'
else if e.data.event @currentHover.dispatchEvent new Event (e) receiverManager мы создаём заранее в соответствии с документацией. cursor — это просто div-элемент, который будет бегать по экрану, заменяя нам курсор. Собственно, на этом мы всё и сделали.
Полный готовый пример можно посмотреть у меня на гитхабе. Жду ваших комментариев.
P.S.: Если тема будет интересна, и если мне будет не лень, в следующем выпуске расскажу, как сделать из вашего смартфона 3D-пульт для приложения Google Cast (прямо как LG Magic Remote, и даже круче, потому что интерактивный).
