Embed zm stream into another html page?

mrd · Post by **mrd** » Mon Nov 27, 2006 8:55 pm

How can I embed the zm stream into another html page?

I've tried poking around the /var/ww/html files and can't find anything that just works?

I'm sure this is easy, but I sure can't figure it out...

I'm assuming I need to pass some variables to one of the .php scripts or construct a page in the html directory since the .jar is also located there, but if someone has an idiots guide on how to do this, please help.

Thanks,

ptast · Post by **ptast** » Mon Nov 27, 2006 9:25 pm

I stream mine as jpeg and I "embed" the stream like this

Code: Select all

<img src="http://<mydomain.com>/cgi-bin/nph-zms?mode=jpeg&monitor=0&scale=100&maxfps=5&user=guest&pass=zmguest" />

ryllanne · Post by **ryllanne** » Wed Nov 29, 2006 5:22 am

I have seen your web page and am impressed with what it does. I too am trying to get a simple html web page to link into the zm stream. when i tried doing what you have done from within my lan it didn't work. e.g.

<html>
<img src="http://192.168.10.185/zm/cgi-bin/nph-zm ... ss=zmguest" />

</html>

given that the user and password were changed appropriately

Any suggestions would be helpful
Thank you

ryllanne · Post by **ryllanne** » Wed Nov 29, 2006 5:32 am

Sorry ihave sorted the problem out

The code is correct the only thing i had wrong was the monitor number

Sometimes it just pays to write things down to see things clearly.

Thanks

ptast · Post by **ptast** » Wed Nov 29, 2006 8:59 am

Great!

mrd · Post by **mrd** » Wed Nov 29, 2006 2:08 pm

I can't get this to work, but I noticed that I can't see your stream from your page either. It just shows as a broken image "X".

I'm wondering if it's my firewall or something since I am outside of my home network.

What user and password should I be supplying? The authenticated web console user name and password?

ryllanne · Post by **ryllanne** » Wed Nov 29, 2006 8:25 pm

hi
I set up a user account in zm using phpadmin and giving the appropriate permissions which was to view the stream and nothing else. Then checked the box that zm required authentication and logged into that account to see if it worked.

I then inserted the code into a simple html page and ensured the monitor number was the right one and away it worked.

If you are not seeing ptast page properly then i would suggest a problem with your browser options.

jameswilson · Post by **jameswilson** » Thu Nov 30, 2006 12:01 am

i would expewct one of you is usinf firefox (which willl work) and the other is using ie (which wont without cambazola)

mrd · Post by **mrd** » Thu Nov 30, 2006 1:58 am

Well, I am ashamed to admit it, but I was using IE and that was the problem!

Thanks for everyones help.

Turd_Fergeson · Post by **Turd_Fergeson** » Sun Dec 10, 2006 10:15 pm

If you would like to use IE without cambazola change:

Code: Select all

mode=jpeg

to

Code: Select all

mode=single

It only loads a single image, the user would have to refresh the page for a new image (or auto refresh). This may also be usefull if you don't want a streaming image.

mrd · Post by **mrd** » Sun Dec 10, 2006 11:23 pm

That is very usefull!

Thanks!

ptast · Post by **ptast** » Mon Dec 11, 2006 12:49 am

A simple php script could do a browser check job for us...(if you can't run get_browser())

Code: Select all

       
<?php
/* 
   Mozilla Firefox 
*/
if(strstr($_SERVER['HTTP_USER_AGENT'], "Firefox"))
   $src = "<img src=\"" .$location. "/cgi-bin/nph-zms?mode=jpeg&monitor=1&scale=100&maxfps=5&user=guest&pass=zmguest\" title=\"Back Yard CAM\" width=\"320\" height=\"240\" alt=\"Back Yard CAM\" />"; 
/* 
  Internet Exploder 
*/
else if(strstr($_SERVER['HTTP_USER_AGENT'], "MSIE"))
   $src = "<img src=\"" .$location. "/cgi-bin/nph-zms?mode=single&monitor=1&scale=100&maxfps=5&user=guest&pass=zmguest\" title=\"Back Yard CAM\" width=\"320\" height=\"240\" alt=\"Back Yard CAM\" />"; 
/* 
  Handle other browsers 
*/
else
   $src = "<big><a href=\"www.mozilla.com/en-US/firefox/\">Get Firefox</a> to see the stream!</big>";

echo $src;
?>

bujia · Post by **bujia** » Tue Dec 12, 2006 9:32 am

Hi!

I try streaming with this method:

I run a script with this command:

firefox "http://<mydomain.com>/cgi-bin/nph-zms?mode=jpeg&monitor=0&scale=100&maxfps=5&user=guest&pass=zmguest"

My browser open correctly and show image of monitor, but fixed, only 1 image fixed, when I click on the right icon of browser (reload) image start streaming and consequentially I see a live show of my monitor.

How can I automate this? How can I run my script in order to have a stream without click on reload icon of my browser?

Thanks for your help!
Alex

mikesjays · Post by **mikesjays** » Sun Feb 18, 2007 3:44 pm

Hey first off thanks I got it up and running with that like on my old site. I used Mac's iWeb to do my new site. When I pluged the line in to embed the security show it doesn't work any ideas.

Here is the code for the page:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="Generator" content="iWeb 1.1.2" />
<title>Security Cam</title>
<link rel="stylesheet" type="text/css" media="screen" href="Security%20Cam_files/Security%20Cam.css" /><script type="text/javascript" src="Security%20Cam_files/Security%20Cam.js"></script>
</head>

<body style="background: #000000; margin: 0pt; " onload="onPageLoad();">
<div style="text-align: center; ">
<div style="margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; overflow: hidden; position: relative; background: #000000; text-align: left; width: 700px; " id="body_content">
<div style="float: left; height: 0px; line-height: 0px; margin-left: 0px; position: relative; width: 700px; z-index: 10; " id="header_layer">
<div style="height: 0px; line-height: 0px; " class="tinyText"> </div>
</div>
<div style="height: 46px; margin-left: 0px; position: relative; width: 700px; z-index: 0; " id="nav_layer">
<div style="height: 0px; line-height: 0px; " class="tinyText"> </div>

<div style="height: 46px; left: 0px; position: absolute; top: 0px; width: 700px; z-index: 1; " class="graphic_navigationbar_style_default">
<div style="background: transparent url(Security%20Cam_files/navbar_separator_0.png) no-repeat scroll center; height: 29px; left: 325px; position: absolute; top: 10px; width: 11px; z-index: 1; "></div>
<div style="background: transparent url(Security%20Cam_files/navbar_separator_1.png) no-repeat scroll center; height: 29px; left: 382px; position: absolute; top: 10px; width: 11px; z-index: 1; "></div>
<div style="background: transparent url(Security%20Cam_files/navbar_active.png) no-repeat scroll center; height: 36px; left: 389px; position: absolute; top: 7px; width: 122px; z-index: 1; "></div>
<div style="background: transparent url(Security%20Cam_files/navbar_0_normal.png) no-repeat scroll center; height: 36px; left: 189px; position: absolute; top: 7px; width: 140px; z-index: 1; " id="navbar_0_normal"></div>
<div style="background: transparent url(Security%20Cam_files/navbar_0_rollover.png) no-repeat scroll center; height: 36px; left: 189px; position: absolute; top: 7px; visibility: hidden; width: 140px; z-index: 1; " id="navbar_0_rollover"></div>
<a style="display: block; height: 29px; left: 193px; position: absolute; top: 10px; width: 133px; z-index: 2; " onmouseout="NBmouseout('0');" href="CoolOperations.html" onmouseover="NBmouseover('0');"></a>
<div style="background: transparent url(Security%20Cam_files/navbar_1_normal.png) no-repeat scroll center; height: 36px; left: 332px; position: absolute; top: 7px; width: 54px; z-index: 1; " id="navbar_1_normal"></div>
<div style="background: transparent url(Security%20Cam_files/navbar_1_rollover.png) no-repeat scroll center; height: 36px; left: 332px; position: absolute; top: 7px; visibility: hidden; width: 54px; z-index: 1; " id="navbar_1_rollover"></div>

<a style="display: block; height: 29px; left: 336px; position: absolute; top: 10px; width: 47px; z-index: 2; " onmouseout="NBmouseout('1');" href="Pets.html" onmouseover="NBmouseover('1');"></a>
</div>
</div>
<div style="margin-left: 0px; position: relative; width: 700px; z-index: 5; " id="body_layer">
<div style="height: 0px; line-height: 0px; " class="tinyText"> </div>
<img src="Security%20Cam_files/shapeimage_1.jpg" alt="" style="height: 1px; left: 35px; position: absolute; top: 1px; width: 630px; z-index: 1; " />

<div class="graphic_generic_title_textbox_style_default" style="height: 49px; left: 35px; position: absolute; top: 22px; width: 630px; z-index: 1; " id="id1">

<div style="height: 0px; line-height: 0px; " class="tinyText"> </div>
</div>

<div class="graphic_textbox_style_default" style="height: 116px; left: 35px; position: absolute; top: 17px; width: 630px; z-index: 1; " id="id2">
<div>
<div class="graphic_textbox_layout_style_default">
<div class="paragraph Free_Form" style="line-height: 18px; margin-bottom: 0px; margin-top: 0px; padding-bottom: 0pt; padding-top: 0pt; font-family: 'Helvetica', 'Arial', 'sans-serif'; line-height: 18px;">Well after my new neighbor decided to slash my tire for parking in front of his house, now keep in mind it is a public street and open to any one who wants to park. I decided I would not get back at him I would catch him in the act. Below is a live shot the street in front of my house, look close you might catch him in the act.</div>
</div>
</div>

</div>

<img src="Security%20Cam_files/DSC01401.jpg" alt="" style="border: none; height: 240px; left: 190px; opacity: 1.00; position: absolute; top: 120px; width: 320px; z-index: 1; " />
<div style="height: 480px; line-height: 480px; " class="tinyText"> </div>
</div>
<div style="height: 150px; margin-left: 0px; position: relative; width: 700px; z-index: 15; " id="footer_layer">
<div style="height: 0px; line-height: 0px; " class="tinyText"> </div>
</div>
</div>

</div>
</body>
</html>

The line in red is a picture that is a place holder that I thought I could replace with the code but it did not work.

bujia · Post by **bujia** » Mon Feb 26, 2007 9:30 am

Hi!

I have a problem with this solution with IE...
I write in my ZoneMinder host a file with this content:

----------------------------------------
<html>
<img src="http://192.168.10.185/zm/cgi-bin/nph-zm ... ss=zmguest" />
</html>
-----------------------------------------

Viewing remotely by Firefox is all ok and I see streaming of cam, but when I try with IE I see only this text in my browser:

---------------------------
<img src="http://192.168.10.185/zm/cgi-bin/nph-zm ... ss=zmguest" />
---------------------------

Same result replacing "mode=jpeg" with "mode=single"....

Where is the problem with IE?

Anyone can help me?

Thanks in advance.
Alessandro

ZoneMinder Forums

Embed zm stream into another html page?

Embed zm stream into another html page?

Problem with Internet Explorer