Download and save MJPEG with http command (Javascript)

Question

I'm using a hikvision IP camera that streams 30 MJPEG images per second to a certain http url and Javascript Reactjs with nodejs and express as backend.

Also hikvision provides a url to snap the camera image when you open the link. Example link:

http://192.168.0.109/ISAPI/Streaming/channels/1/picture

I want to download that image and store it as a local file on my computer, I know how to store it but I haven't been able to download the image programatically.

I followed the next guide to get those API endpoints (stream and snapshot): HIKVISION TUTORIAL

My question is, how do I fetch or download that image ?

I have tried with fetch without success.

Not sure but as long as I understand it requires a basic digest authorization and I haven't find how to fetch with digest auth. If I open the link directly on my browser, a pop up prompts and ask me for my username and password.

Everytime I try to fetch the response is :

GET http://192.168.0.109/ISAPI/Streaming/channels/1/picture net::ERR_ABORTED 401 (Unauthorized)

There is also some parameters to this API command on documentation that includes a json format that I have tried without success:

Also, as you can see on HIKVISION TUTORIAL there is an url to get the stream, I'm able to reproduce that MJPEG stream on front-end with the next code with no issues:

<img
                width={"90%"}
                height={"60%"}
                alt="stream"
                src={"http://192.168.0.109/ISAPI/Streaming/channels/102/httpPreview"}
                id="cam1"
            />

Answer 1

net::ERR_ABORTED 401 (Unauthorized)

Based on the error you presented, I suspect that you have set a username/password.

The documentation (that you linked to in your question) explains that if you have set a username/password, then you need to use Basic auth:

http://<username>:<password>@<IP address of IPC>:<HTTP
port>/ISAPI/Streaming/channels/1/picture

So, if the local IP address that you're using is 192.168.0.109, then the URL format would be:

http://<username>:<password>@192.168.0.109/ISAPI/Streaming/channels/1/picture

and <username> and <password> would be your actual username and password.

---

Note that this URL format is deprecated in many environments. You can send the auth data in the request headers instead:

function setBasicAuthHeader (headers, username, password) {
  // In Node:
  const encoded = Buffer.from(`${username}:${password}`).toString('base64');

  // In a browser/deno:
  // const encoded = window.btoa(`${username}:${password}`);

  headers.set('Authorization', `Basic ${encoded}`);
}

const username = 'me';
const password = 'secret';

const headers = new Headers();
setBasicAuthHeader(headers, username, password));

// Use headers in your request...