skip to Main Content
Display Webcam Images On A WordPress Site

Display Webcam Images on a WordPress Site

stream-webcam-on-wordpressHow to Display Webcam Images on a WordPress Site

We had a requirement to install three webcams within a workshop and stream images from these cameras live into a WordPress website. The images would be automatically refreshed every 2 seconds. You can see them working by visiting the Autohaus Webcams

Having tested several solutions we have discovered a nice simple setup that works well… plus several that didn’t or had very poor documentation!

Click Here for our Timelapse Video Service

The Failures

https://wordpress.org/plugins/netcam-live-stream/

We installed this plugin but did not successfully get it to work. The limited documentation meant that we were unable to correctly form the shortcode within wordpress to display our own webcam images. The example shortcode they give does work however so others may be more successful. However, the simple html code we use in our page works well and negates the need for this plugin.

http://outerbridge.co/webcam-image-handler/

Copies images from the remote webcam server to your WordPress installation and displays either the most recent image or plays a slideshow of images. The problem with this plugin is it uses the default WordPress scheduler function which only gives options of downloading images twice a day (or longer). This means you cannot display a live image from a webcam. To remedy this issue would require setting up a cron-job on your server to automatically copy the images from the remote server to the WordPress installation – something that sounded too complicated.

https://wordpress.org/plugins/videowhisper-live-streaming-integration/

This video service is most likely suitable from live streaming (continuous streaming) of webcams which was more than our requirements and came with higher costs and more technical setup.

Our Solution to Stream Web Cam Images on a WordPress Page or Post

The Webcam

We purchased a cheap DB Power IP camera for testing purposes and found it relatively simple to install. The camera comes with the option to automatically upload an image to a remote server via FTP with a specified interval.

http://www.amazon.co.uk/dp/B003VUY5PW

Whilst this system works it has two fundamental issues:

  • Images are copied to the remote server and placed in a series of subfolders denoted by Dated, Camera Model & Pictures. It is then difficult to establish the URL of these images and would require some coding to compensate for the change of date folder each day.
  • Adding your FTP details within the camera makes them susceptible to hacking (see post here)

We therefore discovered the simplest system was to save the webcam images to the computer and uploaded them to the remote server using a dedicated piece of software.

Active Webcam Pro

http://www.pysoft.com/ActiveWebCamMainpage.htm

This software allows the user to set up several cameras (USB, IP etc), upload images to the remote server with a specified interval, plus save copies of the images on the local computer as either separate images or a video file. We used the same filename for each camera (webcam1.jpg, webcam2.jpg etc) which means the image is overwritten on the server. This has two benefits:

  • The server does not become full of images, increasing storage and backup requirements
  • The path to the image remains the same and simply requires the image to be updated at the specified interval.

Refreshing the Image

To refresh the image we initially used a very simple piece of HTML code within the web page. We later discovered a simple plugin called Image Autorefresh Shortcode which did the job more easily. You simply specify the image URL, size, refresh interval etc.

https://wordpress.org/plugins/image-autorefresh-shortcode/

<table>
<tbody>
<tr>
<td align=”center”><img src=”https://www.newvisionmedia.co.uk/wp-content/uploads/webcam-images/capture1.jpg alt=”Image will refresh every 0 Minutes 5 Seconds” width=”640″ height=”480″ name=”tcimage0″ border=”1″ /></td>
</tr>
<tr>
<td>This is my webcam…</td>
</tr>
</tbody>
</table>
<script type=”text/javascript” language=”JavaScript”>// <![CDATA[
var tcimages = new Array();
tcimages[0] = “https://www.newvisionmedia.co.uk/wp-content/uploads/webcam-images/capture1.jpg”;
interval = 5000;
function Refresh() {
for (i=0; i<=0; i++) { tmp = new Date(); tmp = “?” + tmp.getTime(); document.images[“tcimage” + i].src = tcimages[i] + tmp; } setTimeout(“Refresh()”, interval); } Refresh();
// ]]></script>
</tbody>

</table>

Benefits of our WordPress Webcam Setup

Images are collated locally on a computer and simply uploaded via FTP which means your FTP details are kept behind a firewall (not in the camera which could potentially be hacked)

Your server will not be full of images collected every 5seconds (or whatever interval your choose). This reduces storage space.

You can use a really cheap webcam with minimal features. So long as it produces an image you can use it. The only benefit of a more expensive camera may be improved optics and light levels.

You can have multiple cameras set up and images saved locally to the computer as either separate images or a video file.

You do not need to establish a Static IP address

No monthly hosting fees

Very easy to set up

  Back To Top