[showCamera width=”300″]I was looking for a way to show my local IP network camera stream in my site (and my wife’s site). Sure, it was easy enough to find the necessary code on Google and embed in a post through the text editor, but I wanted something more.
I can’t expect my wife to write her posts without the Visual editor (which would have butchered the HTML required to show the stream), so I decided to convert the camera-generating HTML code to a PHP function and put it in our sites’ functions.php files. Why would I want to do this?
- Allows for repeated use throughout the site
- Allows for use with different camera streams
- Allows for use with different camera users
- Allows for easy styling of the rendered stream via CSS class values
- Allows for easy resizing of the displayed image
- Allows for easy embedding via a registered WordPress shortcode
I use the FOSCAM FI8904W for my outdoor surveillance needs. It’s a hardy bullet camera with IR features and overall I’ve been very pleased with the quality it produces, although hot spots do tend to get a bit washed out.
Anyway, here’s the code I put in my functions.php file. Because I specified default values for non-specified parameters, I can simply use the shortcode [showCamera] in a post or page and I get my desired videostream. Sweet!
Note that due to IE not accepting the videostream.cgi, I’m serving a static image from the camera and reloading it via javascript. It’s a wonky solution in my opinion, but at least it works ;).
// **************************************************** showCamera ****************************************************
// * *
// * showCamera will display the video feed from an IP-based camera. It accepts the following parameters: *
// * url - this is the url of the camera (http://dockcam.jkshay.com, for example) *
// * port - this is the port on which the camera is listening *
// * user - this is the username used to access the camera *
// * I suggest creating a camera user with the username 'guest' *
// * password - this is the password for the user specified above *
// * I suggest creating a password 'guest' for the user specified above *
// * width - this is the width of the videostream *
// * refresh - the number of milliseconds between image refreshes for IE *
// * class - a CSS class attribute applied to the videostream to facilitate styling via CSS *
// * *
// * NOTE: The credentials necessary to view your camera WILL be available to anyone who views the page source *
// * DO NOT USE ADMINISTRATOR CREDENTIALS UNLESS YOU WANT PEOPLE TO MESS WITH YOUR CAMERA *
// * *
// ********************************************************************************************************************
function showCamera($parameters)
{
// Define accepted parameters and convert to PHP variables
extract(shortcode_atts(array('url' => 'http://dockcam.jkshay.com', 'port' => '84', 'user' => 'guest', 'password' => 'guest', 'width' => '480', 'refresh' => '1000', 'class' => 'alignleft',), $parameters));
// Build string of HTML code to be returned by the function call
$results = "";
// IE is unable to accept the videostream.cgi viewing method, so we need to deliver an alternate viewing method
// We do this by introducing a javascript that will reload static images at a predefined rate
// Check if the user is using Internet Explorer
$results = $results."
<!--[if IE]>";
// Introduce javascript function to determine when to reload static image
$results = $results."
<script language='JavaScript' type='text/javascript'>
function reload()
{
setTimeout('reloadImg(\"refresh\")',".$refresh.")
};";
// Introduce javascript function to reload the static image
$results = $results."
function reloadImg(id)
{
var obj = document.getElementById(id);
var date = new Date();
obj.src = '".$url.":".$port."/snapshot.cgi?user=".$user."&pwd=".$password."&t=' + Math.floor(date.getTime()/1000);
}
</script>";
// Insert the HTML <img> tag to load the static image
$results = $results."
<img src='".$url.":".$port."/snapshot.cgi?user=".$user."&pwd=".$password."&t=' name='refresh' id='refresh' class=".$class." onload='reload(this)' onerror='reload(this)' width='".$width."'>";
// Close the 'User is using IE IF block'
$results = $results."
<![endif]-->";
// Check if the user is NOT using IE
$results = $results."
<![if !IE]>";
// Insert the HTML <img> tag to load the videostream
$results = $results."
<img src='".$url.":".$port."/videostream.cgi?user=".$user."&pwd=".$password."' class='".$class."' width='".$width."' alt='Live Feed'/>";
// Close the 'User is NOT using IE IF block'
$results = $results."
<![endif]>
";
// Return function results
return $results;
}
// Register this function with the WordPress framework as a shortcode
add_shortcode('showCamera', 'showCamera');
// ********************************************************************************************************************
If you implement this code on your site, be certain to change the default values in line #23 to match those of your camera. Also, implementing camera streams with this method requires the cameras to have their own externally available addresses. It’s actually quite easy to do, and for the nominal fee of a domain (I think I paid about $13 for jkshay.com), I can get all the subdomains of jkshay.com for free. That is to say, “dockcam.jkshay.com” didn’t cost any more money than having “jkshay.com”.
I configured dockcam.jkshay.com to resolve to my public IP address, then simply forwarded port 84 on my router to the private IP address of my camera. I configured my camera to listen on port 84, and that handles the external connection to my camera.
I also configured the DNS on my router to resolve dockcam.jkshay.com to the camera’s private IP address, and that handled the internal connection to my camera. Check out my post on configuring the Verizon Actiontec router for more detailed information regarding this configuration.
Sample uses of the new [showCamera] shortcode:
- [showCamera] – shows the default camera at the default resolution – a width of 480px, a default CSS class value of “alignleft”, and the default IE refresh rate of 1 second (1000 milliseconds).
- [showCamera width=”240″] – shows the default camera at the reduced resolution – a width of 240px, with the remaining default values applied.
- [showCamera class=”alignright”] – shows the default camera with the “alignright” class attached for CSS styling purposes. This option is more useful when combined with a reduced width, such as
- [showCamera width=”240″ class=”alignright”] – shows the default camera at a reduced width with the CSS class “alignright” attached.
- [showCamera refresh=”500″] – shows the default camera at the default resolution, but with a reduced refresh rate of 500 milliseconds. This setting only applies to viewing in Internet Explorer.
- [showCamera url=”http://othercameraurl” port=”80″ user=”visitor” password=”cookie”] – shows the camera found at “http://othercameraurl” on port 80 using the camera user with the username “visitor” and the password “cookie”. Default width, class, and refresh values would be applied.
To summarize, I added PHP code to my theme’s functions.php file to show the videostream of my network camera. I wrote the code to accept several parameters, allowing the function to be used for multiple cameras. I registered the function with the WordPress framework as a shortcode, and finally listed several examples of how to use the shortcode with parameters.
P.S. It has become evident that this may not work for all themes. For example, I tried the Esquire theme and saw that it didn’t work properly (I’m pretty sure my issue was with the article starting with the shortcode. Anyway, note that my current theme is a [allowphp]echo wp_get_theme($stylesheet, $themeroot );[/allowphp] theme, and it works here (in Chrome, that is).
I’ve also discovered that the IE-only code seems to break if a user is logged into the site. If they log out, the camera stream renders properly. I’m currently investigating this issue.
Leave a Reply