Continuing our series, this article focuses on the consumer range of Panasonic IP cameras, specifically the cameras which have a BL or BB prefix.
These ranges of Panasonic cameras are very popular and sell very well. They cover a wide range of uses from entry-level (BL-C1/C20) up to a professional pan-tilt-zoom model (BB-HCM581) and this guide will work with them all.
This guide is suitable for the following Panasonic cameras:
BL-C1, BL-C20, BL-C101, BL-C121, BL-C10, BL-C30, BL-C111, BL-C131, BL-C140, BL-C160
BB-HCM3xx Series, BB-HCM5xx Series, BB-HCE481
Step 1 – Download the HTML examples
On their website, Panasonic provide you with a series of 10 HTML examples which shows you how to embed images from your camera in a website. These examples are taken from their open CGI documentation which you can download for free here:
We are going to look at ‘Sample 1’ from these examples which shows you how to display the basic image from your camera refreshing 5 times every second. For other examples please download the samples and try them out:
This file is a self extracting zip archive. We recommend you create a new folder on your desktop and extract the files to that location. Once extracted you will find 24 files:
These files are in an HTML format and are linked together to form a simple website. To start the website double-click on the ‘index.html’ file, this is the home page. You will be presented with a page like the one shown below:
Don’t expect these files to work straight away as the IP address for the camera is set to default. To get the samples to work with your camera you need to edit the HTML.
Let’s take a look at the code from Sample 1.
Step 2 – Extracting the required code from the HTML sample
We browse to our folder and select the HTML file titled ‘sample1.html’ and open it in our text editor:
This code is formatted in such a way that it will run as a stand-alone web page. What we need to do is extract the sections of code which do the work and embed them into our own web page, ignoring the rest of the HTML as that should already exist on your existing web page. Of course, if you do not yet have an existing web page you can use the code as-is.
We have extracted the code you require for the embedded camera image. Before you can use this though you will need to adjust the IP address so that it points to your Panasonic camera.
There are 2 areas you need to change, we have highlighted them in yellow below:
Instead of the default IP address of 192.168.0.253 insert the IP address of your own camera. This can be a local IP address or a public IP address and if your camera is on a non-standard port number you must include that also. (e.g. for a non-standard port you would specify the port after the IP address using a colon so it would look something like http://192.168.0.253:4440/SnapshotJPEG?Resolution=320×240&Quality=Standard&Count=)
Once you have changed the IP address in the two locations then you should save your HTML page and upload to your web site. You should be able to browse to your new webcam page and view a live image from your camera.
Note that if you want to make your webcam images open to the public so that it will show without asking for a username and password then you will need to log into the camera and permit access from guesy users. You do this in the setup pages on the Administrator page:
Remember though that when access is permitted to guest users anyone who has access to your camera will be able to view the live image without having to log in first.