Jump to content
mike_va

ip camera viewer

By mike_va, in DVR Cards and Software - PC Based Systems

Recommended Posts

mike_va    0

mike_va
Posted

Is there any software that would allow me to view various ip (Axis 1344, 2120, 243 and panasonic) cameras all together on a web page? Or even a program that would do this.

 

I'd just like to be able to display them on my tv, preferably on firefox on a mac mini. I looked at benasoft and some other things but could not find an inexpensive solution ~$50.

 

Trying to avoid spending next weekend banging my head against microsoft front page.

 

Thanks, Mike

 

P.S. No need to record, I've got vitamin d capturing events for me on a dedicated quad core.

Share this post

Link to post
Share on other sites

rory    0

rory
Posted

using their provided ActiveX in Windows:

axis is pretty straight forward, dont know about panasonic but shouldnt be much different.

 

download the Axis SDK with ActiveX control for Mjpeg, from their website.

Install it.

 

Then add the code for the axis in a webpage, very basic example page:

note all the params inside the object tag are the defaults.

<html>
<head>
<title>Axis Example</title>
<script type="text/javascript">

 function onload() {
 // custom settings
 document.AxisMediaControl1.BackgroundColor = "&H404040"
 document.AxisMediaControl1.StretchToFit = "True"
 document.AxisMediaControl1.EnableReconnect = "True"
 document.AxisMediaControl1.Popups = "0"
 document.AxisMediaControl1.MediaType = "mjpeg"
 }

 function connect() { 
 // text box values
 document.AxisMediaControl1.MediaURL = "http://"+document.getElementById('url').value+"/axis-cgi/mjpg/video.cgi"
 document.AxisMediaControl1.MediaUsername = document.getElementById('user').value
 document.AxisMediaControl1.MediaPassword = document.getElementById('pass').value
 document.AxisMediaControl1.Play();
 }
 function disconnect() { 
 document.AxisMediaControl1.stop();
 }

</script>
</head>
<body onload="onload();">
URL<input type="text" id="url" size="31"><br>
USR<input type="text" id="user" size="10">
PASS<input type="text" id="pass" size="10"><br>
<input type="button" value="Connect" onclick="connect();">
<input type="button" value="Disconnect" onclick="disconnect();">
<p>
<object classid="clsid:745395C8-D0E1-4227-8586-624CA9A10A8D" id="AxisMediaControl1" width="352" height="240">
 <param name="_cx" value="5080">
 <param name="_cy" value="5080">
 <param name="MediaURL" value>
 <param name="AutoStart" value="0">
 <param name="UIMode" value="none">
 <param name="Mute" value="0">
 <param name="Volume" value="30">
 <param name="MediaUsername" value>
 <param name="MediaPassword" value>
 <param name="NetworkTimeout" value="15000">
 <param name="MediaType" value="none">
 <param name="FullScreen" value="0">
 <param name="MediaFile" value>
 <param name="ShowToolbar" value="0">
 <param name="ShowStatusBar" value="0">
 <param name="StretchToFit" value="0">
 <param name="PTZControlURL" value>
 <param name="MPEG2VideoDecodingMode" value="0">
</object>
</p>
</body>
</html>

Share this post

Link to post
Share on other sites

rory    0

rory
Posted

Axis also has demo scripts and samples on their site for other options like image push etc.

 

http://www.axis.com/techsup/cam_servers/tech_notes/live_snapshots.htm

http://www.axis.com/techsup/cam_servers/tech_notes/205_live_video.htm

http://www.axis.com/techsup/cam_servers/tech_notes/video_hit_rate.htm

http://www.axis.com/techsup/cam_servers/tech_notes/live_video_iis.htm

 

For example could do something like this, though not sure if this works on Mac either:

<html>
<head>
</head>
<body>
<center>
<iframe width="352" height="240" src="http://10.10.10.10/axis-cgi/mjpg/video.cgi?resolution=352x240"></iframe>
<iframe width="352" height="240" src="http://10.10.10.11/axis-cgi/mjpg/video.cgi?resolution=352x240"></iframe>
<br>
<iframe width="352" height="240" src="http://10.10.10.12/axis-cgi/mjpg/video.cgi?resolution=352x240"></iframe>
<iframe width="352" height="240" src="http://10.10.10.13/axis-cgi/mjpg/video.cgi?resolution=352x240"></iframe>
</body>
</html>

Share this post

Link to post
Share on other sites

rory    0

rory
Posted

Oh yeah and this might be what you are looking for also, I tested with 4 demo IPs and works:

basically its image refresh using a javascript timer, set to 1 second.

this is not fast video but its over the web anyway, I tried it lower but it has issues.

 

<IMG width="352" height="240" border="0" name="image1"> 
<IMG width="352" height="240" border="0" name="image2"> 
<br><br>
<IMG width="352" height="240" border="0" name="image3"> 
<IMG width="352" height="240" border="0" name="image4"> 

<SCRIPT language="JavaScript" type="text/javascript"> 
<!-- 
 var t = 1 // interval in seconds 
 var img1 = "http://10.10.10.10/axis-cgi/jpg/image.cgi?resolution=352x240"
 var img2 = "http://10.10.10.11/axis-cgi/jpg/image.cgi?resolution=352x240"
 var img3 = "http://10.10.10.12/axis-cgi/jpg/image.cgi?resolution=352x240"
 var img4 = "http://10.10.10.13/axis-cgi/jpg/image.cgi?resolution=352x240"

 document.images["image1"].src = img1 
 document.images["image2"].src = img2
 document.images["image3"].src = img3 
 document.images["image4"].src = img4 

 Start(img1,"image1"); 
 Start(img2,"image2");
 Start(img3,"image3");
 Start(img4,"image4");

 function Start(img, name) { 
 tmp = new Date(); 
 tmp = "&"+tmp.getTime() 
 document.images[name].src = img+tmp 
 var delay = function() { Start(img, name); };
 setTimeout(delay, t*1000) 
 } 

// --> 
</SCRIPT>

 

 

 

Or use a blank 1x1 gif (or same size as camera image) to fill the image then connect to the IP camera once the page has loaded:

<body onload="onload();">

<IMG SRC="blank.gif" width="352" height="240" border="0" name="image1"> 
<IMG SRC="blank.gif" width="352" height="240" border="0" name="image2"> 
<br><br>
<IMG SRC="blank.gif" width="352" height="240" border="0" name="image3"> 
<IMG SRC="blank.gif" width="352" height="240" border="0" name="image4"> 

<SCRIPT language="JavaScript" type="text/javascript"> 
<!-- 
 var t = 1 // interval in seconds 
 var img1 = "http://10.10.10.10/axis-cgi/jpg/image.cgi?resolution=352x240"
 var img2 = "http://10.10.10.11/axis-cgi/jpg/image.cgi?resolution=352x240"
 var img3 = "http://10.10.10.12/axis-cgi/jpg/image.cgi?resolution=352x240"
 var img4 = "http://10.10.10.13/axis-cgi/jpg/image.cgi?resolution=352x240"

 function onload() {
 Start(img1,"image1"); 
 Start(img2,"image2");
 Start(img3,"image3");
 Start(img4,"image4");
 }

 function Start(img, name) { 
 tmp = new Date(); 
 tmp = "&"+tmp.getTime() 
 document.images[name].src = img+tmp 
 var delay = function() { Start(img, name); };
 setTimeout(delay, t*1000) 
 } 

// --> 
</SCRIPT>

Share this post

Link to post
Share on other sites

mike_va    0

mike_va
Posted

Thank you for the suggestions.

 

Ideally I'd just like to buy something that looks sort of like security spy, but I only need a viewer. If I can't find something I'll try your ideas this weekend, as I'd rather not spend the $200+ if I can do it myself. On the other hand, $50 is worth it to not have the pain of trying to get it formatted to look like that.

 

Thanks, Mike

Share this post

Link to post
Share on other sites

mike_va    0

mike_va
Posted

I think if I'm understanding that one right it is viewing windows on a mac? I already do this using chicken of the vnc on the mac, and ultra vnc on windows. This was a lot less expensive than buying a mac that would handle all the cameras and vitamin d.

 

The problem I'm trying to solve is having a viewer, one web page with all the cameras.

 

Kind of like the viewer the panasonic came with, except that I can't add axis cameras to that.

 

Thanks, Mike

Share this post

Link to post
Share on other sites

mike_va    0

mike_va
Posted
using their provided ActiveX in Windows:

axis is pretty straight forward, dont know about panasonic but shouldnt be much different.

 

I've actually managed to get something working with your suggestions, the axis web code hints on the 2120 and a little googling. Only took me a few hours, very cool.

 

Will post a screenshot and the code when I get the system a little more dialed in. Have it displaying the 2400, 2120, 243, 1344 and 3344. Have not added the Panasonic yet, may just get rid of that anyway. Have it setup to automatically enter the password.

 

Thanks for the help.

Share this post

Link to post
Share on other sites

mike_va    0

mike_va
Posted

top left lorex into axis 2400 ch2

top right axis 2120

bottom left back staircase axis p1344 through (dirty) window

bottom right axis p1344 12mm

 

screen shot of the mac mini, hooked to the TV

cctv.jpg.0b7344872b6b3c58b0c8083d93ba183f.jpg

Share this post

Link to post
Share on other sites

mike_va    0

mike_va
Posted

Here's the code (change "password" below to your actual password):

 

<body bgcolor="black">
<p>We set the background...</p>
</body>


<SCRIPT LANGUAGE="JavaScript">

//Axis 2400 ch1 *************************************************************
var BaseURL = "http://192.168.1.60/";
var Camera = "1"; // Change n to the Video source used in the AXIS 2400/2400+
var ImageResolution = "352x240";
var DisplayWidth = "352";
var DisplayHeight = "240";

// No changes required below this point
var File = "axis-cgi/mjpg/video.cgi?resolution=" + ImageResolution;
if (Camera != "") {File += "&camera=" + Camera;}
var output = "";
if ((navigator.appName == "Microsoft Internet Explorer")&&(navigator.platform != "MacPPC")&&(navigator.platform != "Mac68k"))
{
// If Internet Explorer for Windows then use ActiveX
output = "<OBJECT>";
output += "<PARAM> <BR><B>Axis ActiveX Camera Control</B><BR>";
output += "The AXIS ActiveX Camera Control, which enables you ";
output += "to view live image streams in Microsoft Internet";
output += " Explorer, could not be registered on your computer.";
output += "<BR></OBJECT>";
}
else
{
 // If not IE for Windows use the browser itself to display
 output = "<IMG SRC=\"";
 output += BaseURL;
 output += File;
 output += "&dummy=garb\" HEIGHT=\"";
 // The above dummy cgi-parameter helps some versions of NS
 output += DisplayHeight;
 output += "\" WIDTH=\"";
 output += DisplayWidth;
 output += "\" ALT=\"Moving Image Stream\">";
}
document.write(output);


//Axis 2120 side yard ***********************************************************************************
var BaseURL = "http://root:password@192.168.1.62:10002/";
var DisplayWidth = "352";
var DisplayHeight = "240";
var File = "axis-cgi/mjpg/video.cgi?resolution=352x240";

// No changes required below this point

var output = "";
if ((navigator.appName == "Microsoft Internet Explorer")&&(navigator.platform != "MacPPC")&&(navigator.platform != "Mac68k"))
{
// If Internet Explorer for Windows then use ActiveX
 output =  "<OBJECT ID=\"CamImage\" WIDTH="
 output += DisplayWidth;
 output += " HEIGHT=";
 output += DisplayHeight;
 output += " CLASSID=CLSID:917623D1-D8E5-11D2-BE8B-00104B06BDE3 ";
 output += "CODEBASE=\"";
 output += BaseURL;
 output += "activex/AxisCamControl.cab#Version=1,0,2,15\">";
 output += "<PARAM NAME=\"URL\" VALUE=\"";
 output += BaseURL;
 output += File;
 output += "\"> <BR><B>Axis ActiveX Camera Control</B><BR>";
 output += "The AXIS ActiveX Camera Control, which enables you ";
 output += "to view live image streams in Microsoft Internet";
 output += " Explorer, could not be registered on your computer.";
 output += "<BR></OBJECT>";
}
else
{
 // If not IE for Windows use the browser itself to display
 output = "<IMG SRC=\"";
 output += BaseURL;
 output += File;
 output += "&dummy=garb\" HEIGHT=\"";
 // The above dummy cgi-parameter helps some versions of NS
 output += DisplayHeight;
 output += "\" WIDTH=\"";
 output += DisplayWidth;
 output += "\" ALT=\"Moving Image Stream\">";
}

document.write(output);


// axis 1344 back stairs ************************************************************************************
var BaseURL = "http://root:password@192.168.1.61/";
var DisplayWidth = "352";
var DisplayHeight = "240";
var File = "axis-cgi/mjpg/video.cgi?resolution=352x240";

// No changes required below this point

var output = "";
if ((navigator.appName == "Microsoft Internet Explorer")&&(navigator.platform != "MacPPC")&&(navigator.platform != "Mac68k"))
{
// If Internet Explorer for Windows then use ActiveX
 output =  "<OBJECT ID=\"CamImage\" WIDTH="
 output += DisplayWidth;
 output += " HEIGHT=";
 output += DisplayHeight;
 output += " CLASSID=CLSID:917623D1-D8E5-11D2-BE8B-00104B06BDE3 ";
 output += "CODEBASE=\"";
 output += BaseURL;
 output += "activex/AxisCamControl.cab#Version=1,0,2,15\">";
 output += "<PARAM NAME=\"URL\" VALUE=\"";
 output += BaseURL;
 output += File;
 output += "\"> <BR><B>Axis ActiveX Camera Control</B><BR>";
 output += "The AXIS ActiveX Camera Control, which enables you ";
 output += "to view live image streams in Microsoft Internet";
 output += " Explorer, could not be registered on your computer.";
 output += "<BR></OBJECT>";
}
else
{
 // If not IE for Windows use the browser itself to display
 output = "<IMG SRC=\"";
 output += BaseURL;
 output += File;
 output += "&dummy=garb\" HEIGHT=\"";
 // The above dummy cgi-parameter helps some versions of NS
 output += DisplayHeight;
 output += "\" WIDTH=\"";
 output += DisplayWidth;
 output += "\" ALT=\"Moving Image Stream\">";
}

document.write(output);


//Axis 3344 driveway *************************************************************************************
var BaseURL = "http://root:password@192.168.1.57:10000/";
var DisplayWidth = "352";
var DisplayHeight = "240";
var File = "axis-cgi/mjpg/video.cgi?resolution=352x240";

// No changes required below this point

var output = "";
if ((navigator.appName == "Microsoft Internet Explorer")&&(navigator.platform != "MacPPC")&&(navigator.platform != "Mac68k"))
{
// If Internet Explorer for Windows then use ActiveX
 output =  "<OBJECT ID=\"CamImage\" WIDTH="
 output += DisplayWidth;
 output += " HEIGHT=";
 output += DisplayHeight;
 output += " CLASSID=CLSID:917623D1-D8E5-11D2-BE8B-00104B06BDE3 ";
 output += "CODEBASE=\"";
 output += BaseURL;
 output += "activex/AxisCamControl.cab#Version=1,0,2,15\">";
 output += "<PARAM NAME=\"URL\" VALUE=\"";
 output += BaseURL;
 output += File;
 output += "\"> <BR><B>Axis ActiveX Camera Control</B><BR>";
 output += "The AXIS ActiveX Camera Control, which enables you ";
 output += "to view live image streams in Microsoft Internet";
 output += " Explorer, could not be registered on your computer.";
 output += "<BR></OBJECT>";
}
else
{
 // If not IE for Windows use the browser itself to display
 output = "<IMG SRC=\"";
 output += BaseURL;
 output += File;
 output += "&dummy=garb\" HEIGHT=\"";
 // The above dummy cgi-parameter helps some versions of NS
 output += DisplayHeight;
 output += "\" WIDTH=\"";
 output += DisplayWidth;
 output += "\" ALT=\"Moving Image Stream\">";
}

document.write(output);

</SCRIPT>

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Go To Topic Listing DVR Cards and Software - PC Based Systems
×