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"
            />

jsejcksn · Accepted Answer · 2022-07-10 02:22:10Z

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...

answered Jul 10, 2022 at 2:22

jsejcksn

34.6k5 gold badges55 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Luis Quiroga Over a year ago

Am I supposed to run this code in front or backend? I have tried this before, but I get the next error: ReferenceError: Buffer is not defined.......... Not sure how to define it, right now running on frontend react 18.2.0, with react-scripts 5.0.1

Luis Quiroga Over a year ago

I followed stackoverflow.com/a/71205013/9749951 to solve the Bufffer issue, but still getting 401 Unauthorized

jsejcksn Over a year ago

@LuisQuiroga For a browser environment, see commented lines 5–6 in the last code snippet.

Collectives™ on Stack Overflow

Download and save MJPEG with http command (Javascript)

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related