Hikvision MJPEG substream embed to HTML

[kamilsweb]

Hi,

we're using a couple of hundreds Hikvision Cameras for a University; our requirement is we want to embed them to a web page hosted locally. (Cameras, NVR, and webpage are on same local network).

Hikvision Camera Model: DS-9664NI-I8

We don't want to use RSTP, we will use HTTP.

We're able to run the camera sub-stream on the browser using the following URL

http://<username>:<password>@<IP Address>/Streaming/channels/102/httpPreview

But, when I embed this to image src, this won't work, as Browsers don't support the HTML embedded credentials.

Kindly guide how to play the camera streams on the web page.

Any help/lead would be appreciated.


Regards,
Kamil

 

[bp2008]

Hello. If the cameras allow HTTP Basic authentication, then you could use something like nginx as a reverse proxy server. Read this: How to use nginx to proxy to a host requiring authentication?

UNTESTED EXAMPLE NGINX CONFIGURATION:

 location /cam1 {
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://10.0.0.1:80/Streaming/channels/102/httpPreview ;
    proxy_set_header Authorization "Basic a2luZzppc25ha2Vk";
}
location /cam2 {
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://10.0.0.2:80/Streaming/channels/102/httpPreview ;
    proxy_set_header Authorization "Basic a2luZzppc25ha2Vk";
}

You would then be able to access the streams without authentication. <img src="http://nginx_server/cam1" /> <img src="http://nginx_server/cam2" />. If you get CORS errors in the browser's developer console, you can easily add Access-Control-Allow-Origin: * as a response header in your nginx configuration.

Nginx is one of the most efficient reverse proxy servers in existence, so this would be able to run on minimal hardware. e.g. raspberry pi or a single core linux virtual machine with very little RAM. The main problem would be that your web page with embedded cameras would only be able to stream 6 cameras per page -- and ideally you'd not even use that many, because browsers will only allow 6 requests at a time to any single host. Even if you use multiple browser windows. It might be possible to run more streams on one page if you get everything to use HTTP/2. Is the per-host connection limit raised with HTTP/2?. But even so, browser performance would probably suffer after about 10-20 mjpeg streams. I would limit it to 5 cameras or fewer per page.

 

[intz]

On my NVR I have enabled the Channel-zero stream which combines all camera feeds into a single streamable source. You may be able to avoid any performance issues by just embedding that stream into the browser.

 

[kamilsweb]

On my NVR I have enabled the Channel-zero stream which combines all camera feeds into a single streamable source. You may be able to avoid any performance issues by just embedding that stream into the browser.

Hi INTZ,
Thanks for your help, I have enabled the Channel-zero stream, but how to get the single streamable source URL to embed this to the HTML, kindly help. (screen attached)

 

[kamilsweb]

Hello. If the cameras allow HTTP Basic authentication, then you could use something like nginx as a reverse proxy server. Read this: How to use nginx to proxy to a host requiring authentication?

UNTESTED EXAMPLE NGINX CONFIGURATION:

 location /cam1 {
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://10.0.0.1:80/Streaming/channels/102/httpPreview ;
    proxy_set_header Authorization "Basic a2luZzppc25ha2Vk";
}
location /cam2 {
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://10.0.0.2:80/Streaming/channels/102/httpPreview ;
    proxy_set_header Authorization "Basic a2luZzppc25ha2Vk";
}

You would then be able to access the streams without authentication. <img src="http://nginx_server/cam1" /> <img src="http://nginx_server/cam2" />. If you get CORS errors in the browser's developer console, you can easily add Access-Control-Allow-Origin: * as a response header in your nginx configuration.

Nginx is one of the most efficient reverse proxy servers in existence, so this would be able to run on minimal hardware. e.g. raspberry pi or a single core linux virtual machine with very little RAM. The main problem would be that your web page with embedded cameras would only be able to stream 6 cameras per page -- and ideally you'd not even use that many, because browsers will only allow 6 requests at a time to any single host. Even if you use multiple browser windows. It might be possible to run more streams on one page if you get everything to use HTTP/2. Is the per-host connection limit raised with HTTP/2?. But even so, browser performance would probably suffer after about 10-20 mjpeg streams. I would limit it to 5 cameras or fewer per page.

Thanks for your reply but unfortunately we don't have NGNIX on the server, we have Apache web server, This will be a great help if you guide for Apache.

Regards,
Kamil

 

[intz]

Hi INTZ,
Thanks for your help, I have enabled the Channel-zero stream, but how to get the single streamable source URL to embed this to the HTML, kindly help. (screen attached)

I have not done it myself to confirm, but looking online you will need to have the URL match the channel and stream you want. Using your example in the original post the URL looked like: http://<username>:<password>@<IP Address>/Streaming/channels/102/httpPreview which contains "102" specifying that you would like to stream channel 1 and using the 2nd available stream (the substream). Since you have now enabled channel 0 then URL should look like this: http://<username>:<password>@<IP Address>/Streaming/channels/002/httpPreview to view channel 0.

Edit: channel 0 might not have a substream so you may just need to view the already low-bitrate main stream http://<username>:<password>@<IP Address>/Streaming/channels/001/httpPreview

Edit2: I also found something about embedding authentication info as base64 encoded url parameter. This should resolve the embedded credentials you had in the original post. Hikvision cameras for action tiles / ActionTiles Forum / AT Support & Ideas

Give it a try and see if it works.

 

[kamilsweb]

I have not done it myself to confirm, but looking online you will need to have the URL match the channel and stream you want. Using your example in the original post the URL looked like: http://<username>:<password>@<IP Address>/Streaming/channels/102/httpPreview which contains "102" specifying that you would like to stream channel 1 and using the 2nd available stream (the substream). Since you have now enabled channel 0 then URL should look like this: http://<username>:<password>@<IP Address>/Streaming/channels/002/httpPreview to view channel 0.

Edit: channel 0 might not have a substream so you may just need to view the already low-bitrate main stream http://<username>:<password>@<IP Address>/Streaming/channels/001/httpPreview

Edit2: I also found something about embedding authentication info as base64 encoded url parameter. This should resolve the embedded credentials you had in the original post. Hikvision cameras for action tiles / ActionTiles Forum / AT Support & Ideas

Give it a try and see if it works.

Thanks, Tried this but no luck; seems they don't support these access methods now.

 

[kamilsweb]

Thanks for your reply but unfortunately we don't have NGNIX on the server, we have Apache web server, This will be a great help if you guide for Apache.

Regards,
Kamil

You were right, we have installed the NGNIX and able to play the stream through a proxy but there was a huge resource consumption issue, we hardly played 10 streams in one window; our requirement is to play a minimum 60. Thanks for your support.

 

[bp2008]

You could work around some of the limitations by assigning a large range of IP addresses to your server and then using each IP address to load no more than 6 cameras. You might still run into performance bottlenecks depending on the capabilities of the client device and web browser of choice. It would help a lot if you limited the sub stream frame rates to 1 FPS each.

What makes this tricky is the fact you have hundreds of cameras. Blue Iris software, which runs on Windows, would do what you want really well but only up to 64 cameras per server. Other video management software can handle more cameras, but I could not begin to advise on which one to try. Most options are very expensive.

If you are desperate for something, you might try this program I wrote a long time ago. Camera Proxy. It is capable of giving you a web page with an unlimited number of cameras on it, and because it is open source you could modify it as needed. The main thing that makes this different from nginx is that Camera Proxy can provide individual video frames to your web browser client as .jpg still images. This would allow you to better control the frame rate received by the web browser. But I warn you, I do not support Camera Proxy anymore so if you had trouble with it you would be on your own.

 

[kamilsweb]

You could work around some of the limitations by assigning a large range of IP addresses to your server and then using each IP address to load no more than 6 cameras. You might still run into performance bottlenecks depending on the capabilities of the client device and web browser of choice. It would help a lot if you limited the sub stream frame rates to 1 FPS each.

What makes this tricky is the fact you have hundreds of cameras. Blue Iris software, which runs on Windows, would do what you want really well but only up to 64 cameras per server. Other video management software can handle more cameras, but I could not begin to advise on which one to try. Most options are very expensive.

If you are desperate for something, you might try this program I wrote a long time ago. Camera Proxy. It is capable of giving you a web page with an unlimited number of cameras on it, and because it is open source you could modify it as needed. The main thing that makes this different from nginx is that Camera Proxy can provide individual video frames to your web browser client as .jpg still images. This would allow you to better control the frame rate received by the web browser. But I warn you, I do not support Camera Proxy anymore so if you had trouble with it you would be on your own.

Thanks, I'll check and get back to you if required.

 

[kamilsweb]

Thanks, I'll check and get back to you if required.

You were right, we have installed the NGNIX and able to play the stream through a proxy but there was a huge resource consumption issue, we hardly played 10 streams in one window; our requirement is to play a minimum 60. Thanks for your support.

Thank you very much for your guidance, now we are able to play hundreds of cameras, as you suggested, we are using NGINX proxy and HTTP2.

 

[kamilsweb]

HI,

Sorry, I have to repost, here again, actually, I have few axis cameras, and the RTSP format is below

rtsp:/<username>:<password>@<ip>/cam/realmonitor?channel=1&subtype=00

Please help me, how to use this for reverse proxy in NGNIX; as I'm not able to authenticate the same.

 

[bp2008]

I don't think nginx can proxy the RTSP protocol. Browsers certainly can't consume it.

 

[kamilsweb]

HI,

Sorry, I have to repost, here again, actually, I have few axis cameras, and the RTSP format is below

rtsp:/<username>:<password>@<ip>/cam/realmonitor?channel=1&subtype=00

Please help me, how to use this for reverse proxy in NGNIX; as I'm not able to authenticate the same.

Ohh Sorry my mistake

the format is HTTP, not RTSP

http://<username>:<password>@<ip>/cam/realmonitor?channel=1&subtype=00

 

[bp2008]

Maybe you didn't encode the correct user name and password, or maybe the cameras require Digest authentication instead of Basic authentication.