javascript - Display frames generated from opencv Django React

Question

I want to show a video generated from opencv, I am getting each frame from opencv and with the help of the django I send this to react.

So what happens, I send a request from react to django api to get frame from opencv and I then show that on react, I am calling this api in a loop to get multiple frames in a second and show on react ( its so fast that it shows frame in a form of video).

But I found that its a wrong way I have to use sockets to send so much request at a time.

Can some show me how can I get the same functionality through websockets,I have a short time so I need a smaller and quicker solution I have googled a lot but did't find nothing.

here's my current approach of sending multiples request:

 const interval = setInterval(() => {
      axios
        .get("http://127.0.0.1:8000/MyApp/get_logs/")
        .then(res => {
          set_show(res.data);
        })
        .catch(err => {
          console.log(err);
        });
    }, 500);
     return () => clearInterval(interval);

The above function is called after every 0.5 seconds, I get a frame in base64 and show it in image, and it happens repeatedely that makes it in a video form, how can I achieve this through sockets using django and react.

标签： javascriptdjangoreactjsopencvdjango-channels