How to process mjpeg stream from camera in OpenCV.js?

Question

JavaScript

On the ESP32-CAM module connected to the home LAN, a web server is running, which broadcasts video in MJPEG at the address: 192.168.1.139:81/stream . If I create a simple page on my laptop with an element and run it in the browser, this broadcast can be seen in the window without any problems. Now I am faced with the task of processing this video stream through the OpenCV.js library in order to determine in real time the coordinates of a moving object (a colored circle made of cardboard) in the frame relative to the camera's field of view using the browser's tools. In order for the OpenCV.js library to work with video, it is necessary to draw frames from the video stream one by one in the element (and only then the image from<img src="http://192.168.1.139:81/stream">

<canvas><canvas>process frame by frame using the library itself). In fact, I need everything that is shown in the element to be exactly the same drawn in the element . A sort of video in canvas. Can you please tell me the best way to implement this? Or in which direction to dig? Tried using element instead . Elements and are friends without problems, but in mjpeg it does not know how. <img src="http://192.168.1.139:81/stream"><canvas>


<img><video><video><canvas><video>