Как обработать поток mjpeg с камеры в OpenCV.js?

На модуле 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 не умеет.
  • Вопрос задан
  • 92 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы