Refreshing a webcam image in Joomla


This article is part of the Webcam Cool Project. You should check the project homepage first!

So I finally got my webcam running in Linux, now I wanted the image to refresh automatically. I'm using Joomla for this site and there are two ways to do a quick refresh...

Method 1: Meta refresh
The following bit of HTML can be pasted in to your HTML editor:
<Meta Http-equiv="Refresh" Content="60"> 
The downside of this is that the whole page will be refreshed (every 60 seconds in this example). This is pretty inefficient if there is a lot of other content on the page and it increments the hit counter in Joomla with each refresh.

Method 2: Java refresh
This is a lot nicer as it refreshes only the specified image and not the rest of the page:
<img src="http://URLorPATHtoimage/image.jpg" mce_src="URLorPATHtoimage/image.jpg" name="refresh" width="320" border="1" height="240">
      <script language="JavaScript" type="text/javascript">
      <!--
      var t = 60 // interval in seconds
      image = "
PATHtoimage/image.jpg" //name of the image
      function Start() {
      tmp = new Date();
      tmp = "?"+tmp.getTime()
      document.images["refresh"].src = image+tmp
      setTimeout("Start()", t*1000)
      }
      Start();
      // -->
      </script>

Some Joomla editors (such as TinyMCE) strip out certain HTML or script tags so you may find pasting the above into a Joomla editor doesn't work as it will be removed when you apply the changes. To get around it you can set the Default WYSIWYG editor to 'None' in Joomla's Global Configuration as a temporary measure allowing you to directly edit the HTML of the page. You can also set TinyMCE so that it won't strip out the code although this may leave you open to malicious types doing things you don't want them to do to your website.

To change the behavior of TinyMCE, from a commnd line on your Joomla server do the following:

nano /path-to-your-Joomla-site/htdocs/plugins/editors/tinymce.php

Change extended_valid_elements to include script
Change the following section:

if ( $cleanup_startup ) {
                        $cleanup_startup = 'true'; 
-set to false
                } else {
                        $cleanup_startup = 'false';
                }

Change the following section:

case '1': /* Clean up front end edits only */
            if ($mainframe->isadmin())
                   $cleanup = 'true';
-set to false
                   else
                   $cleanup = 'false';

Change the following section:

default:  /* Always clean up on save */
            $cleanup = 'true';
-set to false

I must admit, I don't know what that gobbeldegook all means or what the full implications of making those changes to tinymce.php are but it does stop it from stripping code out of the HTML editor.

Hopefully your webcam will have something more interesting to view than mine does.

Related articles on this site:
Webcam Project homepage
Using a Video4Linux (V4L) compliant webcam with camE
Using a Video4Linux2 (V4L2) compliant webcam with fswebcam
Making a weatherproof webcam for outdoors
The view from my corner of Leamington Spa via my TV aerial mounted webcam!
The electro-mechanical USB reset circuit
One year on...