External Live Stream - Revision history

Burger: /* Imagemap */

2026-08-26T17:46:43Z

Imagemap

← Older revision		Revision as of 17:46, 26 August 2026
Line 84:		Line 84:

	You wouldn't want to make the code from scratch, that would be tedious, so instead use an imagemap generator. The one I used which worked well was https://github.com/n-peugnet/image-map-creator and the live instance here: https://n-peugnet.github.io/image-map-creator/		You wouldn't want to make the code from scratch, that would be tedious, so instead use an imagemap generator. The one I used which worked well was https://github.com/n-peugnet/image-map-creator and the live instance here: https://n-peugnet.github.io/image-map-creator/
	~~Unfortunately~~ I ~~wasn't easily able to find one~~ that ~~could be self-hosted~~ (~~which is preferred~~). Import your graphic and make circles (a 2nd time) where your circles on the graphic are. Make sure to add labels to all the circles (right click) this way you can find them in the code later. Let's use the following map image.		I recently also learned that GIMP (3.0.4 tested) has one built in. Find it in Filters - Web - Image Map. Import your graphic and make circles (a 2nd time) where your circles on the graphic are. Make sure to add labels to all the circles (right click) this way you can find them in the code later. Let's use the following map image.

	[[File:Map.png\|400px\|\|\|]]		[[File:Map.png\|400px\|\|\|]]
Line 103:		Line 103:
	</pre>		</pre>
	This image map HTML will need some editing after the fact. In particular, you will want to delete the nohref, as we will be filling in the details for the URLs later. Also the URLs will go at the end of the tag, so the sed command mentioned above for the API works properly.		This image map HTML will need some editing after the fact. In particular, you will want to delete the nohref, as we will be filling in the details for the URLs later. Also the URLs will go at the end of the tag, so the sed command mentioned above for the API works properly.

	====Webpage with iframe====		====Webpage with iframe====
	I'm going to jump ahead with an example for brevity's sake. This page will include the bare minimum to get a working page similar to the gif above. We will use the javascript reload from the API example above, as well as the script to refresh the tokens on the webpage. It's assumed you are hosting the page on the same server as the cameras. Please read the comments on the HTML for important notes on this setup if this is new to you.		I'm going to jump ahead with an example for brevity's sake. This page will include the bare minimum to get a working page similar to the gif above. We will use the javascript reload from the API example above, as well as the script to refresh the tokens on the webpage. It's assumed you are hosting the page on the same server as the cameras. Please read the comments on the HTML for important notes on this setup if this is new to you.

Burger at 15:57, 24 August 2026

2026-08-24T15:57:13Z

← Older revision		Revision as of 15:57, 24 August 2026
Line 1:		Line 1:
	Here are some examples of embedding the ZM camera stream in a webpage.		Here are some examples of embedding the ZM camera stream in a webpage. These are tested in 1.36.

	==Webpage to View Streams (non-API)==		==Webpage to View Streams (non-API)==

Burger: /* Imagemap of Cameras */

2026-08-24T15:56:47Z

Imagemap of Cameras

← Older revision		Revision as of 15:56, 24 August 2026
Line 75:		Line 75:
	==Imagemap of Cameras==		==Imagemap of Cameras==
	[[File:Output5.gif\|300px\|thumb\|right\|Imagemap as the GUI for Zoneminder is very effective, albeit this example is blurred for privacy sake. Trust me that it is better than it appears here.]]		[[File:Output5.gif\|300px\|thumb\|right\|Imagemap as the GUI for Zoneminder is very effective, albeit this example is blurred for privacy sake. Trust me that it is better than it appears here.]]
	If you only have 1 or 2 cameras, this probably isn't relevant, however if you have a larger installation, it can be slow and cumbersome to use the ZM gui to view cameras. ~~The~~ solution is to make an HTML imagemap, and an iframe, and view the cameras from a custom webpage.		If you only have 1 or 2 cameras, this probably isn't relevant, however if you have a larger installation, it can be slow and cumbersome to use the ZM gui to view cameras. One solution is to make an HTML imagemap, and an iframe, and view the cameras from a custom webpage.

	===Overview===		===Overview===

Burger: /* ffplay with a Montage */

2025-07-08T13:31:36Z

ffplay with a Montage

← Older revision		Revision as of 13:31, 8 July 2025
Line 209:		Line 209:
	It is possible to use ffplay to directly stream a single camera feed (bypassing ZM) to the desktop. Although refreshing may be more involved. You can also output a grid of multiple cameras (or any stream online).		It is possible to use ffplay to directly stream a single camera feed (bypassing ZM) to the desktop. Although refreshing may be more involved. You can also output a grid of multiple cameras (or any stream online).
	ffplay -i rtsp://user:Password@ipaddress:554/video		ffplay -i rtsp://user:Password@ipaddress:554/video
	See ~~also~~ the [[Ffmpeg]] page.		See the [[Ffmpeg]] page.

	===Multicast Streaming for High Bandwidth Environments===		===Multicast Streaming for High Bandwidth Environments===

Burger: /* ffplay with a Montage */

2025-07-08T13:31:30Z

ffplay with a Montage

← Older revision		Revision as of 13:31, 8 July 2025
Line 207:		Line 207:

	===ffplay with a Montage===		===ffplay with a Montage===
	It is possible to use ffplay to directly stream a single camera feed (bypassing ZM) to the desktop. Although refreshing may be more involved.		It is possible to use ffplay to directly stream a single camera feed (bypassing ZM) to the desktop. Although refreshing may be more involved. You can also output a grid of multiple cameras (or any stream online).
	ffplay -i rtsp://user:Password@ipaddress:554/video		ffplay -i rtsp://user:Password@ipaddress:554/video
	See also the [[Ffmpeg]] page~~. It's possible to have ffplay create output that is a grid of multiple streams~~.		See also the [[Ffmpeg]] page.

	===Multicast Streaming for High Bandwidth Environments===		===Multicast Streaming for High Bandwidth Environments===

Burger: /* ffplay */

2025-07-08T13:30:50Z

ffplay

← Older revision		Revision as of 13:30, 8 July 2025
Line 206:		Line 206:
	https://wiki.zoneminder.com/How_to_view_the_latest_frame_of_a_camera		https://wiki.zoneminder.com/How_to_view_the_latest_frame_of_a_camera

	===ffplay===		===ffplay with a Montage===
	It is possible to use ffplay to directly stream a single camera feed (bypassing ZM) to the desktop. Although refreshing may be more involved.		It is possible to use ffplay to directly stream a single camera feed (bypassing ZM) to the desktop. Although refreshing may be more involved.
	ffplay -i rtsp://user:Password@ipaddress:554/video		ffplay -i rtsp://user:Password@ipaddress:554/video
	See also the [[Ffmpeg]] page.		See also the [[Ffmpeg]] page. It's possible to have ffplay create output that is a grid of multiple streams.

	===Multicast Streaming for High Bandwidth Environments===		===Multicast Streaming for High Bandwidth Environments===

Burger: /* FFPlay Montage Directly */

2025-07-08T13:30:29Z

FFPlay Montage Directly

← Older revision		Revision as of 13:30, 8 July 2025
Line 213:		Line 213:
	===Multicast Streaming for High Bandwidth Environments===		===Multicast Streaming for High Bandwidth Environments===
	Something I think that is worth pursuing, is to use multicast streaming from the cameras, and instead of pulling from ZM, pull from the cameras directly. Though it might be a problem, since the cameras will be multicasting the full res stream, and you don't want to preview that on a kiosk computer. Keep in mind, it's only useful in environments where you have a lot of cameras.		Something I think that is worth pursuing, is to use multicast streaming from the cameras, and instead of pulling from ZM, pull from the cameras directly. Though it might be a problem, since the cameras will be multicasting the full res stream, and you don't want to preview that on a kiosk computer. Keep in mind, it's only useful in environments where you have a lot of cameras.

	~~===FFPlay Montage Directly===~~
	~~Another item that is worth looking into, is using FFMPEG direct on the computer, instead of a browser. It's possible to have FFPlay create output that is a grid of multiple streams. See [[Ffmpeg]].~~

	==See Also==		==See Also==

Burger: /* FFPlay directly */

2025-07-08T13:29:55Z

FFPlay directly

← Older revision		Revision as of 13:29, 8 July 2025
Line 214:		Line 214:
	Something I think that is worth pursuing, is to use multicast streaming from the cameras, and instead of pulling from ZM, pull from the cameras directly. Though it might be a problem, since the cameras will be multicasting the full res stream, and you don't want to preview that on a kiosk computer. Keep in mind, it's only useful in environments where you have a lot of cameras.		Something I think that is worth pursuing, is to use multicast streaming from the cameras, and instead of pulling from ZM, pull from the cameras directly. Though it might be a problem, since the cameras will be multicasting the full res stream, and you don't want to preview that on a kiosk computer. Keep in mind, it's only useful in environments where you have a lot of cameras.

	===FFPlay ~~directly~~===		===FFPlay Montage Directly===
	Another item that is worth looking into, is using FFMPEG direct on the computer, instead of a browser. It's possible to have FFPlay create output that is a grid of multiple streams. See [[Ffmpeg]].		Another item that is worth looking into, is using FFMPEG direct on the computer, instead of a browser. It's possible to have FFPlay create output that is a grid of multiple streams. See [[Ffmpeg]].

Burger: /* Multicast Streaming for High Bandwidth Environments */

2025-07-08T13:29:46Z

Multicast Streaming for High Bandwidth Environments

← Older revision		Revision as of 13:29, 8 July 2025
Line 212:		Line 212:

	===Multicast Streaming for High Bandwidth Environments===		===Multicast Streaming for High Bandwidth Environments===
	Something I think that is worth pursuing, is to use multicast streaming from the cameras, and instead of pulling from ZM, pull from the cameras directly. Though it might be a problem, since the cameras will be multicasting the full res stream, and you don't want to preview that on a kiosk computer.		Something I think that is worth pursuing, is to use multicast streaming from the cameras, and instead of pulling from ZM, pull from the cameras directly. Though it might be a problem, since the cameras will be multicasting the full res stream, and you don't want to preview that on a kiosk computer. Keep in mind, it's only useful in environments where you have a lot of cameras.

	===FFPlay directly===		===FFPlay directly===

Burger: /* FFPlay directly */

2025-07-08T13:28:20Z

FFPlay directly

← Older revision		Revision as of 13:28, 8 July 2025
Line 215:		Line 215:

	===FFPlay directly===		===FFPlay directly===
	Another item that is worth looking into, is using FFMPEG direct on the computer, instead of a browser. See [[Ffmpeg]].		Another item that is worth looking into, is using FFMPEG direct on the computer, instead of a browser. It's possible to have FFPlay create output that is a grid of multiple streams. See [[Ffmpeg]].

	==See Also==		==See Also==