Iframes Problem Resolved

[Eddington]

Updating from Ubuntu Server 14.04 to 16.04 the older version of ZM was
automatically deleted during the distribution upgrade. Re-installation was
a bit - well - lengthy and it was necessary to use the installation shell script
instead of 'apt-get' with the Ubuntu repository. Success was eventually achieved
and all the camera-related and config settings WERE preserved.

However I had made a web page that shows half a dozen live cameras
all at the same time in 2x6 arrangement with a "View" button beneath
each to bring up any given camera to full size. This used iframes ... and
they didn't work anymore. May have been some change in ZM, may have
been some subtle change in the Apache config.

The symptom was that instead of showing a small version of a ZM monitor
window the iframe acted like a redirect instead - it would take you entirely
to a ZM monitor page. Reload and you'd go to whichever camera had
updated most recently. Vexing.

There was no answer to this on the web other than a lot of vague stuff
about setting X-Frame behavior in .htaccess or httpd.conf ... and none
of it did anything good. THE SECRET was to add one new param into
the <iframe> line ... the 'sandbox' param.

A functional line is :
<iframe class="frameX" src="https://192.168.0.118/zm/index.php?view ... &scale=5.0" sandbox="allow-forms allow scripts" border="1" height="1" width="1" name="YardCam"></iframe>

This restored the proper function of the iframe statement. The 'class' refers to a style definition that helps
make the 2x6 (soon to be 2x8) format look/fit right. I hope this info will be useful to any who want to roll
their own custom camera-display pages without having to use lots of javascript/php/whatever. My page
is all html and serves our needs well.

[rockedge]

I don't use iframes much to build pages similar to what you are doing. Here is an example of 3 camera streams 320x240:

Code: Select all

<h2><img class="alignleft" src="http://zm.server/cgi-bin/nph-zms?mode=jpeg&amp;scale=100&amp;maxfps=5&amp;buffer=1000&amp;monitor=1&amp;user=justlook"" alt="stream down" width="380" height="300" /></h2>
<img class="alignnone" src="http://zm.server/cgi-bin/nph-zms?mode=jpeg&scale=100&maxfps=5&buffer=1000&monitor=5&user=admin" alt="stream down" width="380" height="300" />
<img class=" alignleft" src="http://zm.server/cgi-bin/nph-zms?mode=jpeg&scale=100&maxfps=5&buffer=1000&monitor=2&user=admin" alt="stream down...." width="380" height="300" />

the css is pretty straightforward and is easily modified.