На модуле ESP32-CAM, подключенном к домашней локальной сети, запущен веб-сервер, который в MJPEG транслирует видео по адресу:
192.168.1.139:81/stream. Если создать простенькую страничку на моём ноутбуке с элементом
<img src="http://192.168.1.139:81/stream">и запустить её в браузере, в окне без проблем видно эту трансляцию. Сейчас передо мной стоит задача этот видеопоток обрабатывать через библиотеку OpenCV.js, чтобы в режиме реального времени средствами браузера определять в кадре координаты перемещающегося объекта (цветной круг из картона) относительно поля зрения камеры.
Чтобы библиотека OpenCV.js могла работать с видео, необходимо кадры с видеопотока поочерёдно рисовать в элементе
<canvas> (а уже потом изображение с
<canvas> покадрово обрабатывать средствами самой библиотеки). Фактически мне нужно, чтобы всё то, что показывается в элементе
<img src="http://192.168.1.139:81/stream"> ровно точно также рисовалось в элементе
<canvas>. Этакое видео в канвасе.
Подскажите, пожалуйста, как лучше это реализовать? Или в какую сторону копать?
Пробовал использовать вместо
<img> элемент
<video>. Элементы
<video> и
<canvas> дружат без проблем, но
<video> в mjpeg не умеет.
