How to handle multipart/x-mixed-replace; boundary=ngpboundaryresponse from camera stream route for display on front-end?

Question

I have a code that authenticates a certain route and obtains the request result to display on the front-end. So far, I have only worked with single images, but now I am trying to transmit a data stream from a camera to my front-end. My difficulty is that the route response is multipart and not just a single image.

How can I handle this multipart response to display the camera stream on my front-end? What techniques or libraries could I use to do this? What would be the best approach to handle this situation? Any help would be greatly appreciated!

  var username = 'adm';
  var password = 'adm123';

const headers = new Headers({
    'Authorization': 'Basic ' + btoa(username + ':' + password)
});

fetch('localhsot:8080/live/media/124563/DeviceIpint.10', {
    method: 'GET',
    headers: headers
})
    .then(response => {
        if (!response.ok) {
            throw new Error('Erro );
        }
        return response.blob();
    })
    .then(blob => {
        const img = document.createElement('img');
        img.src = URL.createObjectURL(blob);
        img.style.width = '902px';
        img.style.height = '430px';
        img.style.marginLeft = '26%';
        img.style.marginTop = '37px';
        const div = document.querySelector('.item12');
        div.appendChild(img);
    })
    .catch(error => {
        console.error(error);
    });

I have tried looking into libraries such as Axios, Fetch, and Superagent to handle the multipart response. However, I'm not sure how to parse and display the received data stream on my front-end.

I was expecting some guidance on the best approach to handle this situation and recommendations on specific libraries or techniques that I could use to parse the multipart response and display the camera stream on my front-end. Any help or advice would be greatly appreciated!