У Павла!

Трансляция WEB страницы на экран дисплея ESP32S3 ESP32-4848S040

Дисплей с реле в подрозетник: https://ali.click/xfb5ta?erid=2SDnjc7NuYj

Дисплей без силовой части: https://ali.click/fdb5t6?erid=2SDnjezuAum

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

И проекты для умного дома делали рисуя собственные кнопки, общаясь с Home Assistsant по mqtt.

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

 

Состоит проект из двух частей.

 

Первая часть – серверная.  Это докер контейнер, который устанавливается как addon в Home assistant. И он выступает в роли сервера Браузера Chrome.

Он оптимизирует страницу которую будет отображать, разбивая её на сектора и по протоколу WebSocket транслирует её уже на ESPшку.

Проект серверной части называется RemoteWebViewServer: https://github.com/strange-v/RemoteWebViewServer

В общем устанавливаем его в Home Assistant через дополнения и запускаем, ничего не меняя.

 

Вторая часть – это устанавливается на ESP32 с дисплеем: https://github.com/strange-v/RemoteWebViewClient

Весь код сделан в ESPHome проекте.

тут в этом блоке нужно поменять только URL адрес на ваш сервер к которому вы хотите подключаться.

remote_webview:
  id: rwv
  server: 172.16.0.252:8081
  url: http://172.16.0.252:8123/dashboard-mobile/0  # set url: "self-test" to initiate the self-test
  full_frame_tile_count: 1
  max_bytes_per_msg: 61440
  jpeg_quality: 85

 

Загружаем далее код в ESPшку и наслаждаемся работой.

 

Трудности:

При отображении странички Home Assistant вы столкнётесь с тем, что у Вас запросит логин и пароль для входа. Но так как клавиатуру не подключить к esp32  – вы не сможете ввести эти параметры.

Чтоб это решить, существует 2 варианта решения этой проблемы.

Первое – это  добавить в сам сервер home assistant исключения, чтоб из вашей подсети логинившиеся хосты не получали требование пароля.

Для этого идём в файл Configuration.yaml в Home Assitant и в самом вверху пишем следующие параметры:

homeassistant:
auth_providers:
- type: trusted_networks
trusted_networks:
- 192.168.31.0/24
- 127.0.0.1
- ::1
allow_bypass_login: true
- type: homeassistant

Где 192.168.31.0/24 это ip адрес вашей локальной подсети.

После ввода этих параметров и перезапуска сервера Home Assistant у Вас  все залогинится автоматически.

 

Второй способ более правильный. Он описан тут:

Accessing the server’s tab with Chrome DevTools

  1. Make sure your server exposes the DevTools (CDP) port (e.g., 9222).
    • If you use a pure Docker container, make sure you have configured and started debug-proxy
    • If HA OS addon is used, enable expose_debug_proxy
  2. In Chrome, go to chrome://inspect/#devices → Configure… → add your host: hostname_or_ip:9222.
  3. You should see the page the server opened (the one you want to log into, e.g., Home Assistant). Click inspect to open a full DevTools window for that tab.

Получается тут просят включать в конфигурации аддона RemoteWebViewServer параметр expose_debug_proxy

Потом в Браузере Chrome нужно перейти по адресу chrome://inspect/#devices -> Configure -> и тут добавить адрес Home Assistant, только порт указать :9222.

После этого появится страница которую можно будет открыть “просмотрев код элемента” и тогда откроется та же страничка, что и отображается на esp32s3. Где можно будет ввести логин и пароль.

 

Видео:

По этому проекту я делал видео, которое можно просмотреть тут:

Youtube: https://www.youtube.com/watch?v=rs2cslAZJ8Q
vkvideo: https://vkvideo.ru/video-122269515_456239691
Rutube: https://rutube.ru/video/a810b42f1e556d224dcb1a5409f604f8/