Embedding an Axis brand camera into WordPress

Standard
Share

[showAxisCamera url=”208.42.203.54″ port=”8588″]
After I posted my article about embedding a video feed into my WordPress site, I received an e-mail from a reader in the UK looking for assistance configuring an Axis brand camera in a WordPress site. Ultimately, I ended up creating a more robust version of my original code, but for Axis brand cameras. I thought I would share that code here, with a brief explanation of the changes from the original article and a few examples of implementation.

I’m not claiming authorship of this code; rather, I just tweaked existing code the reader provided to get it working in WordPress (including the creation of a short code).

In this code, I implement the ability to use a single shortcode with multiple cameras at different subdomains. I won’t go into how to add this code to your WordPress site (I explain how to do this in the original article). Just know that it should be added to your theme’s functions.php file.

// **************************************************** showAxisCamera ****************************************************
// *                                                                                                                  *
// *      showAxisCamera will display the video feed from an IP-based Axis brand camera.  It accepts the following parameters:       *
// *      url - this is the full url of the camera (http://dockcam.jkshay.com, for example)                                *
// *      protocol - this is the protocol of the video stream ("http", for example)                                *
// *      subdomain - the subdomain of the particular camera to display ("dockcam", for example)                                *
// *      domain - the domain of the particular camera to display ("jkshay.com", for example)                                *

// *      port - this is the port on which the camera is listening                                                    *
// *      sc_user - this is the username used to access the camera                                                       *
// *             I suggest creating a camera user with the username 'guest'                                           *
// *      sc_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 showAxisCamera($parameters)
{
extract(shortcode_atts(array('protocol' => 'http', 'subdomain' => 'dockcam', 'domain' => 'jkshay.com', 'port' => '84', 'url' => '',  'sc_user' => 'guest', 'sc_password' => 'guest', 'width' => '320', 'height' => '240', 'refresh' => '1000', 'class' => 'alignleft',), $parameters));

$sc_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


$sc_results = $sc_results."

<script>
var BaseURL = '".(((!isset($url) || trim($url) === '') ? $protocol."://".$subdomain.".".$domain : $url)).":".$port."/'; 
 
// DisplayWidth & DisplayHeight specifies the displayed width & height of the image. 
// You may change these numbers, the effect will be a stretched or a shrunk image 
var DisplayWidth = '".$width."'; 
var DisplayHeight = '".$height."'; 
var CSSClass = '".$class."';

// This is the path to the image generating file inside the camera itself 
var File = 'axis-cgi/mjpg/video.cgi?resolution=320x240'; 
// No changes required below this point 
var output = '';
if ((navigator.appName == 'Microsoft Internet Explorer') && 
(navigator.platform != 'MacPPC') && (navigator.platform != 'Mac68k')) 
{
// If Internet Explorer under Windows then use ActiveX 
output += '<OBJECT ID=\"Player\" width='; 
output += DisplayWidth; 
output += ' height='; 
output += DisplayHeight; 
output += ' CLASSID=\"CLSID:DE625294-70E6-45ED-B895-CFFA13AEB044\" '; 
output += 'CODEBASE=\"'; 
output += BaseURL; 
output += 'activex/AMC.cab#version=3,20,18,0\">'; 
output += '<PARAM NAME=\"MediaURL\" VALUE=\"'; 
output += BaseURL; 
output += File + '\">'; 
output += '<param name=\"MediaType\" value=\"mjpeg-unicast\">'; 
output += '<param name=\"ShowStatusBar\" value=\"1\">'; 
output += '<param name=\"ShowToolbar\" value=\"1\">'; 
output += '<param name=\"AutoStart\" value=\"1\">'; 
output += '<param name=\"StretchToFit\" value=\"1\">'; 
output += '<BR><B>Axis Media Control</B><BR>'; 
output += 'The AXIS Media 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 
theDate = new Date(); 
output = '<IMG SRC=\"'; 
output += BaseURL; 
output += File; 
output += '&dummy=' + theDate.getTime().toString(10); 
output += '\" HEIGHT=\"'; 
output += DisplayHeight; 
output += '\" WIDTH=\"'; 
output += DisplayWidth;
output += '\" class=\"';
output += CSSClass;  
output += '\" ALT=\"Camera Image\">'; 
} 
document.write(output); 
document.Player.ToolbarConfiguration = \"play,+snapshot,+fullscreen\" 
</script>";

return $sc_results;
}

add_shortcode('showAxisCamera', 'showAxisCamera');
// *******************************************************

Note: the default values in the code above don’t point to a valid URL. Therefore, no image stream will be provided for the default values above.

The primary differences between this code and my original article are:

  • Written specifically for Axis brand cameras
  • Allows for passing subdomain value. This eases implementation of multiple cameras at different subdomains
extract(shortcode_atts(array('protocol' => 'http', 'subdomain' => 'dockcam', 'domain' => 'jkshay.com', 'port' => '84', 'url' => '',  'sc_user' => 'guest', 'sc_password' => 'guest', 'width' => '320', 'height' => '240', 'refresh' => '1000', 'class' => 'alignleft',), $parameters));

In line #24, if you compare this code to my original article, you’ll note that we’re allowing a few additional parameters to be passed to the script. Instead of just a domain (like http://dockcam.jkshay.com), you can now pass a protocol, subdomain, and domain (“http”, “dockcam”, and “jkshay.com”, to continue our example). Note that the default value for the $url parameter is the empty string. We’ll talk next about how this is used in line #34 to determine how to build the BaseURL variable value.

var BaseURL = '".(((!isset($url) || trim($url) === '') ? $protocol."://".$subdomain.".".$domain : $url)).":".$port."/';

In line #34, you can see where we’re using the parameters to build the URL to display.

Basically, this statement reads:

  1. Check if the variable $url has not been set, OR
  2. the $url variable is an empty string
  3. If…
    1. the $url variable IS set,
    2. the $url variable is NOT null (both conditions checked by the isset function),
    3. and the $url variable is equal to the empty string,

    then the URL was passed as a variable. Set the BaseURL value to the $url parameter value

  4. if the URL was NOT passed as a parameter, we’ll proceed building our BaseURL value by concatenating the $protocol, $subdomain, $domain, and $port values.

The usage of this shortcode is almost identical to that in my original article. Let’s make the following assumptions:

  1. There are three cameras, located at
    1. sub1.domain.com,
    2. sub2.domain.com, and
    3. sub3.domain.com
  2. All three cameras use a username and password value of “guest”
  3. All three cameras are at port 80

If we configure line #24 to use “sub1” as the subdomain default value, “domain.com” as the domain default value, “80” as the port default value, “guest” as the sc_user default value, and “guest” as the sc_password default value, then we can place a request to render the first camera by simply inserting the shortcode “[showAxisCamera]”. Since the URL variable is not being passed as a parameter, the short code will assemble the individual URL parts (using default values in this instance) into a valid base URL.

In order to configure the second camera, we’d simply have to pass a different subdomain value in the shortcode – “[showAxisCamera subdomain=”sub2″]”. And to configure the third camera, we just need to change the requested subdomain – “[showAxisCamera subdomain=”sub3″]”.

And there you have it – the necessary code to create a WordPress shortcode that allows you to configure multiple Axis brand cameras located at various subdomains of a primary domain.

10 thoughts on “Embedding an Axis brand camera into WordPress

  1. Randy

    Thanks for the code!!
    After 3 days of Googleing everything I could think of, your website popped up.
    It works great for my Axis camera published on a WordPress site!
    I’m green to WP so copying and pasting your code to my functions.php was a little puzzling. I was overjoyed to see my camera after clicking “view page.”

    Randy

  2. Thank you for posting this information. I have a question. Is it necessary to have an externally available addresses rather than an IP address with port forwarding? I have 6 cameras I would like to stream. Thanks again.

  3. Jurgen

    Hi thanks for this. It was very helpfull

    Ive added the script to my wordpress and i can see that the camera is attached to the page. Only thing is, whenever i go to the page a pop up asks me for the credentials. it seems that the script is not passing the credentials.

    do you have an idea?

      • Jurgen

        Thanks for you reply!

        The credentials are the same. When I enter the credential (same as in code) the camera appears. So my conclusion is that the script is not sending the credentials allong with the request.

        Is there a way to specify the credential in the shortcode call?

        • Yes, you can pass the credentials in the shortcode implementation. Use the parameters “sc_user” and “sc_password”. I’m not sure why the credentials wouldn’t otherwise be passed by the script.

          Can you browse directly to the camera stream with the credentials in the URL and see the stream without it explicitly asking for the credentials?

          • Jurgen

            Funny thing is even when i pass the parameters in the shortcode it does not work. If i copy the link “…..320×240” it asks me for the credentials

          • I’m thinking the camera software has been changed to not accept credentials in the url. I don’t have access to a camera to test this hypothesis, but if you can’t browse directly to the camera without being asked for credentials, this script won’t fix that.

Leave a Reply

Your email address will not be published. Required fields are marked *