How to view multiple IP camera streams in a single custom HTML page?

[albatross]

I have a couple Amcrest IP cameras on my home network that I want to view simultaneously on my desktop. I know I could probably just get a DVR, but that seems like overkill, since I just want to monitor the cameras in real time.
I can currently manually view each feed in a separate browser tab, but it takes a little bit of time to load and resize each tab to fit half the screen. I'd like to be able to create a custom simple HTML page that loads each camera in a IFrame and maybe some javascript to login for me. But I'm running into a browser error when I try to do this:

Refused to display 'http://<camera IP address>' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

The Amcrest cameras are for some reason setting an HTML header "X-XSS-Protection: 1; mode=block", which I think is the cause of the browser refusing to display them in an IFrame.
Anyone have any solutions for this kind of issue? I've looked in Amcrest settings and can't find any way to disable that header.

The raw Amcrest headers are:

HTTP/1.1 304 not modified
CONNECTION: close
Date: Sun, 12 May 2024 11:05:28 GMT
Last-Modified: Wed, 12 Jul 2023 07:00:01 GMT
Etag: "1682144240:7243"
CONTENT-LENGTH: 0
CACHE-CONTROL: max-age=0
Strict-Transport-Security: max-age=604800; includeSubDomains
X-XSS-Protection: 1;mode=block
Content-Security-Policy: script-src 'self' 'unsafe-inline' 'unsafe-eval'
X-Content-Type-Options: nosniff
CONTENT-TYPE: text/html

 

[hikky_b]

Not a browser solution, but a simple option would be to use VLC.

wiki.videolan.org" data-pending="false">

VLC HowTo/Make a mosaic - VideoLAN Wiki

wiki.videolan.org

 

[TonyR]

+1^^^.
Here's more regarding VLC:

How to embed streaming rtsp media into an html5 page

The YT video he mentioned at bottom of answer:

 

[albatross]

Thanks for the suggestions. I tried VLC and ended up installing zoneminder, which works well for me.

 

[Binod Bhandari]

You could try setting up a server-side script to fetch the camera feed without the X-Frame-Options header. Or, consider switching to a camera system that doesn't have these restrictions.

 

[Gimmons]

OBS studio would work. Kind of overkill. One of my favorite programs. Works on any of the big 3 operating systems.

You didn’t mention what operating system, or perhaps I missed it. If linux, this is a pretty good viewing program:

Install CCTV Viewer on Linux | Snap Store

Get the latest version of CCTV Viewer for Linux - Viewer and mounter video streams

snapcraft.io

If windows, get Blue Iris.

 

[nabman]

I've been using a VLC script to create a mosaic ... I read the RTMP feeds from the cameras, make a mosaic and stream that to a rtmp server I have running on the network.

I have 6 cameras for this mosaic and stack them in a way to create a focus on the driveway ... here is a screenshot ... it runs 1920x1080 at 5 fps. The driveway image is 1280x720 and the others are half size so they stack nicely. There is no audio.



It can be played back using any network stream player (vlc). With vlc as the player there's a lag/delay due to buffering, but using ffplay with nobuffers the delay is well under a second real time (I can see the driveway from where I sit)

It needs a machine with some oomph though (I'm running it on a Ryzen 7 and it hums in the background - on a raspberry pi or similar sbc, it'd choke)

I've included the script (it is moderately self-explanatory) and the canvas jpg in a zip if u want to give it a go. If you don't have a rtmp server, the script is easily modded to send to http.

 

[dante555]

I've been using a VLC script to create a mosaic ... I read the RTMP feeds from the cameras, make a mosaic and stream that to a rtmp server I have running on the network.

I have 6 cameras for this mosaic and stack them in a way to create a focus on the driveway ... here is a screenshot ... it runs 1920x1080 at 5 fps. The driveway image is 1280x720 and the others are half size so they stack nicely. There is no audio.

View attachment 195280

It can be played back using any network stream player (vlc). With vlc as the player there's a lag/delay due to buffering, but using ffplay with nobuffers the delay is well under a second real time (I can see the driveway from where I sit)

It needs a machine with some oomph though (I'm running it on a Ryzen 7 and it hums in the background - on a raspberry pi or similar sbc, it'd choke)

I've included the script (it is moderately self-explanatory) and the canvas jpg in a zip if u want to give it a go. If you don't have a rtmp server, the script is easily modded to send to http.

That sounds like a really efficient setup! Creating a mosaic with six cameras to focus on the driveway is a great idea for surveillance. The resolution and frame rate seem well-optimized for your needs. Thanks for sharing the details and the screenshot!

 

[nabman]

Thx - I went thru a few iterations but the earlier mosaics were focused on tiling similar sized images - and with 6 tiles that ended up becoming 1920x1620 (else each tile had very little resolution) which meant more cpu and it also felt 'cluttered' - everything seemed to be of the same 'importance' and there were too many such 'pieces'. I stumbled on this idea purely by chance while groaning and scratching my head one day. Never felt the need to change it since!

I find it convenient for recording as well since I can use a smaller sbc to read this stream and convert it to a significantly lower bitrate before recording (I use ffmpeg with preset=veryfast and crf=35). The resulting .flv files end up being under 30M for 15mt segments of this mosaic and anywhere from 2-4 Gb per day (depends on movement, changing shadows, etc. all of which make it harder to compress).