Joomla! component: Axis Webcam

Zur deutschen Version..

About
Screenshot
Features
Configuration
Installation
Bugs and limitations
Download

NOTICE:
Unfortunately I have no longer access to any AXIS webcam. I also do not work with Joomla very much these days. Therefore this project gets not updated anymore. So I cannot give you any guarantee that it will work under current Joomla versions or with other webcams. Just try it if you want but understand that I cannot give you very much support.

The code is open-source licensed under the GPL so if you want to use it or develop it further just feel free. I hope I could help at least some people with this project.

Kind regards, John :-),   July 2010


About

AXIS 206 network webcam This component for Joomla! and Mambo integrates the video stream of an AXIS 206 network webcam into a Joomla! webpage in several different formats. It also checks if the camera is online and prints an offline message if the camera is not available.
This is the very first component I have written for Joomla! Therefore it may need some improvements. (feel free to help me with this.. :-)
Tested with Joomla! 1.0.7 and an AXIS 206 webcam (software version 4.21). It should work also with older versions of Joomla! and Mambo and maybe also with some other AXIS network webcams. Please test this and report me the results: john@zweng.at.
Top


Screenshot

The component in action, displaying a live stream from an AXIS 206 webcam:
Screenshot
Click the image for full size
Top


Features

This component enables you to present a video stream of an AXIS 206 (or maybe also other Axis webcams) on your Joomla! or Mambo page in several modes.

One nice thing I found out about the AXIS 206 webcam was that it offers the video stream in several different formats. With this component you can display the webcam's video stream in all these formats on your Joomla! page so that nearly every browser can display the video instantly with almost no need to install additional software/plugins.

The AXIS 206 network webcam offers the video stream in following formats:
  • video playback via ActiveX control (for Internet Explorer only)
  • playback via Java Applet (works on all browsers when Java is installed)
  • playback as Flash movie (seems not to work everywhere, see note below)
  • as MJPG stream (seems to work with every browser except Internet Explorer and konqueror)
  • display a snapshot as JPG image (works on every browser)
The component also includes following features:
  • simple browser detection to choose initially the right streaming format for most browsers
  • the user can choose 4 different sizes for the video (like on the internal webpage of the AXIS camera)
  • it prints an offline message, when the camera is not available at the moment

Top


Configuration

There is no admin interface yet. I have no idea (yet), how to do this. If you feel motivated to do this don't hesitate and extend the source code. :-)

At the moment all configuration has to be done in the file configuration.php. Extract this file from the zip archive and open it with your editor of choice before installing the component:
// full website URL
// Enter here the full URL to your Joomla! webpage
// TODO: (how do I get this from joomla?)
$website_url = 'http://www.your_domain_here.com/';

// the IP-address or host, where the camera is to find.
// This would be either the address of the camera itself
// or the address of the router if you use portforwarding
// to reach a webcam in your internal network.
$camera_ip = '111.222.333.444';

// the port, where the camera is to reach
// This will be port 80 or something else if the camera
// sits behind a port-forwarding router (check your router's settings)
$camera_port = 80;

// jpeg compression from 0 to 100 (0 means no compression which
// means best quality but highest bandwith usage, 100 means maximum
// compression, which means lower quality, but also lower bandwith usage)
$compression = 10;

// if set to true, the picture will be 640x480, if set
// to false it will be 320x240
$big_picture = true;

// if set to true, debug messages will be printed
// on the webpage. Use it if you have problems for some reason..
$axis_debug = false;
   
Zip it back into the archive file afterwards and install the component in Joomla!. If you have shell access to your webserver you can edit this file also later directly on the webserver.
Top


Installation

1) Install it via Joomla! backend

Screenshot component installed successfully Log into the Joomla! backend and install it like any other component:
Choose "Installation" -> "Components" from the menu, click the Browse... button, locate the component's zip file on your hard drive and upload it. You should see the component in the list of installed components afterwards (see picture on the right).

2) Create a menu item on your Joomla! page

In the Joomla! backend open the menu editor with one of your site's menus (for example mainmenu). Click the button "New" to add a new menu item. As type choose "Component" and on the next page click on "Axis Webcam" in the listibox. Then click the "Save" button and you're finished!! :-)

Click on the images for full size
Top


Bugs and limitations

  • Problems with <base href="..."> tag when playing as flash video
    I noticed that I just see a black screen when I tried to display the stream as Flash movie. It turned out that the swf-file in the camera references the video source relatively and therefore it cannot find the stream source when displayed on a webpage outside the camera. As workaround I insert a <base href="..."> tag which points to the camera's address, when displaying the video as Flash movie.

    The one big drawback of this is that it makes EVERY RELATIVE LINK on the resulting html-page invalid because they now all point to the camera. But this only takes effect, when choosing playback mode "flash".
    If someone knows another solution for this problem, please contact me!

  • Problems inserting the <base href="..."> tag on some browsers
    To be able to add the <base href="..."> tag into the page's <head> section I use Javascript DOM manipulation. But for some reason this does not seem to work on all browsers. I noticed that it has no effect on Firefox, Netscape and Opera browsers. This leads to the effect described above that the flash movie shows only a black screen (but the relative links are working).

    Maybe these browsers don't allow manipulations of the <head> section. I don't know..
    As said before, if someone finds a beautiful solution to get flash movie mode working without drawbacks, please contact me!

  • Missing administration interface
    This component really should have an admin interface for setting the camera options (ip address, port, quality, size,...). But as I just started developing for Joomla! I have no idea at the moment how to do this (and also not that much time for this project).
    So if anybody wants to write a beautiful admin extension for the backend, feel free! Take the code and extend it to your needs! It would be nice if you'd contact me when doing so.

  • Missing browser plugin detection functionality
    It would be nice, if the component could detect automatically which plugins a user has installed and choose the according stream format automatically. At the moment there is only a simple browser detection included which chooses some initial defaults for every browser.
Top


Download

You can download the current version in the download section.
Top