Будни разработчика
14.6K subscribers
1.18K photos
337 videos
7 files
2.02K links
Блог Lead JS-разработчика из Хельсинки
Автор: @bekharsky

По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://yangx.top/it_adv

Чат: https://yangx.top/htmlshitchat

№5001017849, https://www.gosuslugi.ru/snet/679b74f8dad2d930d2eaa978
加入频道
#заметка дня

Продолжаем эпопею про написание пульта для телевизора на Flutter.

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

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

А делается это довольно просто.
1. Постучались на WebSocket API, передав название приложения. Почему-то в моём случае стучаться пришлось на secure-вариант (ws vs wss, это как http vs https), разрешив использование самоподписанных сертификатов (потом расскажу, что не так).
2. Телевизор спросит разрешение на удалённое управление. И вот тут придётся подтверждать с пульта или джойстика на телевизоре, других вариантов нет. В ответ будет прислан токен. Чтобы больше не спрашивал — все дальнейшие запросы должны содержать в себе идентификатор приложения и токен, собственно. Как параметры запроса: ?name=xxx&token=yyy.
3. Формируем команду, на которую, естественно, опять нет никакой документации. Но когда это нам мешало? Копаемся в issues легендарной (в узком кругу) библиотеки Samsungctl, находим нужный формат.
4. Отправляем.
5. ...
6. Пищим от восторга.

На этом месте будет небольшая ода Джаваскрипту: нет на свете языка, который бы позволил быстрее настряпать всякие тестовые куски кода, вне зависимости от того, нужен вам UI, или нет. Ну, может, Python что-то способен противопоставить. Тяп-ляп и готов код, чтобы быстро проверить теорию или соответствие стандарта вашему телевизору: https://gist.github.com/bekharsky/80fce4263304eedcec7a46045b1a0ebd

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

И посоветуйте, кто чем вебсокеты отлаживает. Что-нибудь вроде Postman, но не Postman.

К слову, если у кого-нибудь есть телевизоры Samsung и кому не лень, проверьте код выше (он просто выключает звук) и напишите модель в комментарии, пожалуйста (как узнать модель — смотрите ссылку в первых словах поста, там про API телевизора). Это мне потом очень поможет :)

Удачи в ваших пет-проектах, котаны.

P. S. если кому интересно, вот тут человек на Go автоматизирует браузер телевизора, чтобы дашборды Grafana запустить. Целый кладезь команд и подсказок. Красивое: https://gist.github.com/freman/8d98742de09d476c4d3d9e5d55f9db63

#flutter #dart #websockets
11👍2
#заметка дня

Мобильная разработка, как ни крути, выходит ближе к железу и понимать в ней нужно чуть больше.

Да, это опять я со своим нытьём про Dart и Flutter, которое можно найти по тегу #remote. И сегодня мы поговорим о сокетах. Конкретно — WebSockets.

Вы наверняка должны были задуматься, откуда в вебсокетах приставка "веб". И ответ на самом деле простой: потому что они реализованы поверх протокола HTTP, для чего используется, очевидно, некий HTTP-клиент. В браузерах свой, в Node.js свой, в мобильных фреймворках свой.

Что из этого следует, например? Ну, что сертификаты наруливаются согласно спецификации HTTPS. И тут начинается самое интересное.

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

Вот у телевизоров Samsung сертификат самоподписанный. Вебсокеты по протоколу wss (websocket secure) работать с таким откажутся, но всё, что надо сделать в JS — передать опцию allowUnauthorized. Всё, полетели жисоны.

Что надо сделать в том же Dart/Flutter?

Перегрузить (заменить, override) библиотечный HTTP-клиент!

Вот так:

class SamsungHttpOverrides extends HttpOverrides {
@override
HttpClient createHttpClient(SecurityContext? context) {
return super.createHttpClient(context)
..badCertificateCallback =
(X509Certificate cert, String host, int port) => true;
}
}


И дальше есть выбор, делать это на глобальном уровне, или передать в конструктор. В моём случае — глобально, поскольку API тоже спрятан за самоподписанным сертификатом:

HttpOverrides.global = SamsungHttpOverrides();

И такое на каждом шагу. Нельзя просто так взять и...

Может, поэтому мобильным разработчикам зачастую больше платят? 🤔

#flutter #remote #dart #websocket
😱8
Media is too big
VIEW IN TELEGRAM
#заметка дня

Эпопея с пультом на Flutter продолжается! И в этот раз мне захотелось реализовать трансляцию фото (ну и видео) на телевизор.

Да, в 2025 году есть Chromecast, MirrorLink и AirPlay. Но хоть MirrorLink моим телевизором 2018 года выпуска и поддерживается, основной мой телефон — iPhone, а в AirPlay телевизор не умеет.

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

Потому на помощь нам приходит технология двадцатилетней давности, которая до сих пор поддерживается везде — DLNA!

В 2003 году тогдашние гиганты индустрии объединились и создали Digital Living Network Alliance, описав соответствующие стандарты и протоколы. В духе индустрии, использовались основанные на XML протоколы обмена данными и уже расмотренный когда-то мной SSDP.

Как это всё работает?

Когда мы сканируем сеть по SSDP, устройства сообщают в ответ поддерживаемые протоколы, схемы работы порты. И одна из таких схем работы — /MediaRenderer/AVTransport/Control.

Ну и мы отправляем телевизору запрос:

POST /MediaRenderer/AVTransport/Control HTTP/1.1
HOST: 192.168.1.42:1400
CONTENT-TYPE: text/xml; charset="utf-8"
SOAPACTION: "urn:schemas-upnp-org:service:AVTransport:1#SetAVTransportURI"

<?xml version="1.0"?>
<s:Envelope xmlns:s="http://schemas.xmlsoap.org/soap/envelope/">
<s:Body>
<u:SetAVTransportURI xmlns:u="urn:schemas-upnp-org:service:AVTransport:1">
<InstanceID>0</InstanceID>
<CurrentURI>http://192.168.1.10:8000/picture.jpg</CurrentURI>
<CurrentURIMetaData></CurrentURIMetaData>
</u:SetAVTransportURI>
</s:Body>
</s:Envelope>


В этот же момент роли меняются. Ваш компьютер или телефон становятся сервером, а телевизор — клиентом. Телевизор (или другой плеер) скачивает переданный в CurrentURI файл. Естественно, надо этот самый сервер у себя на телефоне или компьютере запустить!

А уже второй командой посылаем Play:

POST /MediaRenderer/AVTransport/Control HTTP/1.1
HOST: 192.168.1.42:1400
CONTENT-TYPE: text/xml; charset="utf-8"
SOAPACTION: "urn:schemas-upnp-org:service:AVTransport:1#Play"

<?xml version="1.0"?>
<s:Envelope xmlns:s="http://schemas.xmlsoap.org/soap/envelope/">
<s:Body>
<u:Play xmlns:u="urn:schemas-upnp-org:service:AVTransport:1">
<InstanceID>0</InstanceID>
<Speed>1</Speed>
</u:Play>
</s:Body>
</s:Envelope>


И всё, всё работает. Главное, чтобы телевизор понимал, что ему передали. Заодно ещё метадату можно накинуть.

Да, в 2017 году альянс распустили, но DLNA работает буквально везде, где нужно. Просто называть стали по разному: Samsung AllShare, LG SmartShare, Sony Video/Music/Photo. А так, телевизоры, NAS-ы, куча приложений для всех платформ... Это очень простой, хоть и избыточный, протокол.

Да и реализовать это было весьма просто и интересно.

Кстати, можете сами попробовать побаловаться, есть минимальная имплементация DLNA с названием nano-dlna: https://github.com/gabrielmagno/nano-dlna

А большего и не надо.

#flutter #dart #dlna
119👍7🫡1