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
HOWTO:
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:
Click to enlarge
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=)
Finish
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.
May 16th, 2009 at 1:41 am
Is there a way to embed the stream for Macintosh users? These examples seem to require ActiveX to work correctly. Interestingly enough, when connecting to the camera directly with a Mac, ActiveX doesn’t seem to be used. Do you think it would be possible to somehow embed the stream for Mac users without having it rely on ActiveX?
May 16th, 2009 at 3:02 am
The short answer is no, since this code is aimed at Internet Explorer only. It should be relatively easy, though, to simply link to the MJPEG output or the snapshot jpeg output of the camera and embed that in a web page. With a bit of nifty programming you could get it to automatically refresh for the Mac (and Firefox/Safari/Chrome user on Windows - they are the same thing) user.
May 16th, 2009 at 3:03 am
In the sample files folder you should see a number of examples that are compatible with Mac/Safari/Firefox/Chrome users.
May 18th, 2009 at 12:55 pm
Thank you for the response. What I would like to do is embed the live stream along with audio for both Mac and PC users. Do you have any idea on how this might be possible? I looked at every example, and the only ones I found that worked for the Mac did not include audio. I did find a way to isolate the MPEG stream, but I would really like away to embed the audio and video to fit the theme of an existing website. Any insight would be appreciated.
May 20th, 2009 at 6:04 am
Audio is only supported using ActiveX in a Panasonic camera. You won’t get audio from these cameras on a Mac I’m afraid.
May 20th, 2009 at 11:10 am
I do get audio on the Mac if I connect directly to the camera via the Safari or Firefox web browser. Maybe Panasonic has some kind of ActiveX wrapper coded for Mac users. It would be really nice to extract that code so I could embed this stream into a branded website. We really want the audio, or nothing at all.
May 20th, 2009 at 11:20 am
What camera do you have Jeff? Is it one of the older Panasonic models?
May 21st, 2009 at 11:26 am
It is a new BB-HCM331A.
June 7th, 2009 at 11:29 am
Following your guide I was able to get live video from the BL-C140 embedded, but for some strange reason, it only works in Firefox 3.0 and not IE 8. Did IE8 change the rules in any way?
~Dave
June 8th, 2009 at 3:21 am
@DaveM:
I did a quick test of the above example in IE8 this morning and it was fine. Double-check you haven’t disabled Javascript in your browser.
June 8th, 2009 at 8:54 am
Greg,
I took your suggestion and checked to confirm that javascript has been enabled. Unfortunately it is. And I also used 3 other pcs with IE8 installed and had the same results. Thanks for taking a look.
~Dave
June 9th, 2009 at 1:12 am
Thanks for the input, but the goal for me would be to get this working in the Safari web browser for Mac users. It works fine with Safari for audio and video when using the cameras interface, but the problems come up when trying to embed just the audio and video without anything else. I can access the video stream, but I haven’t found a way to get the audio working with it outside of the camera interface. I had no problem getting it to work for IE users.
June 11th, 2009 at 11:51 am
@DaveM:
Which sample are you using from Panasonic’s files?
June 11th, 2009 at 11:52 am
@Jeff:
Try samples 3 or 4 from Panasonic’s files. These are the only cameras with audio capabilities which work on a Mac. The newer Panasonic models use ActiveX for audio.
July 3rd, 2009 at 2:38 am
Hello evryone ,
i tried the html namely “V3_Mpeg4_ClickCentering_DigitalZoom.html” but i was getting exception in the js function play() and setParam() that the “Object does not support this property or method”
i cross checked the code from panasonic manual and everthing was same except the IP . I dont where i am going wrong .
July 27th, 2009 at 12:40 am
I’ve added a camera at
www/snugharborflorida.com/camera1.htm
Any way I can get to view it from my LF EnV Touch cell phone? I think verizon blocks port 5000, and I was hoping this might work around it. Suggestions?
July 29th, 2009 at 6:06 am
@T.J. Gill: Mobile Access: http://www.networkwebcams.com/ip-camera-learning-center/2008/06/19/howto-view-your-panasonic-ip-camera-from-your-cell-phone-or-mobile-device/
or
Port Forwarding:
http://www.networkwebcams.co.uk/blog/2007/10/22/howto-port-forwarding-101/
August 31st, 2009 at 12:39 pm
My MPEG4 embed spawns a pop-up window when trying to control the camera via the option:
.
Is there any way to suppress the window, or make it so that the window auto closes?
Quite annoying.
You can look at my site at:
http://www.freethfamily.com/recreation/reef/reefcam2mpegext.php
Thank you for any advice.
September 1st, 2009 at 4:16 am
I’ve taken a look at your site and it doesn’t open any pop-up windows when I move the camera. I’m using IE8 on Windows XP Pro. What browser are you using? What exactly is shown in the pop-up window?
September 19th, 2009 at 4:48 am
Hi.
thanks for this great thread, using these instructions i have set up a panasonic BB-HCM547 Version 3.51R00 which appears to be working really well in Firefox but is refreshing too slowly in IE8.
i take it this is the relevant code and i wonder if anyone can point me to getting it to refresh better, i have unlimited bandwidth and would like to get it to look as good as possible. many thanks
September 19th, 2009 at 4:53 am
It wont let me post the code it appears - its just a bit flickery in IE can anyone assist please?
thanks
September 21st, 2009 at 4:52 am
@Richard:
Maybe it’s a compatibility issue with IE8? Have you tried turning on compatibility mode?
October 1st, 2009 at 6:15 am
thanks for getting back to me - nope thats not helping, im getting some stick that the camera is rubbish - which clearly isnt the case so desperate to get the streaming right.try again with code snippett:
onload=”setTimeout(’ImageRefresh()’, 200)” onerror=”setTimeout(’ImageRefresh()’, 60000)” onabort=”setTimeout(’ImageRefresh()’, 60000)”
October 2nd, 2009 at 1:38 am
thanks for suggestions - its not a compatibility issue - anyone can tell me which bit of code is relevent to stopping the flickering in IE ? thanks
October 5th, 2009 at 5:58 am
@Richard:
Which sample file are you using?
October 16th, 2009 at 1:35 am
thanks greg - i have tried all of them i think! my camera is a panasonic BB-HCM547 which do you recommend ?
October 23rd, 2009 at 3:11 pm
How can I get a copy of sample1.HTML?….. I went to the hyperlink mentioned in the article…..I cannot open Sample1.html (after executing the index.html)….Would it be possible to get an editable copy of Sample1.html so that I can modify it and use it on my own website (www.EarlMadison.com)?
October 26th, 2009 at 7:28 am
@Earl:
The file sample1.html will be in the folder you extracted the contents too.
Use a text editor to open the file. If you double-click the file it will probably open it using a browser by default.
February 6th, 2010 at 8:57 am
What numbers do I change so that it only refreshes every 30 seconds or so…
Thanks
June 27th, 2010 at 8:19 am
Could you post a working Sample of how the video sample,. I am not finding that the samples work with the BL-C20A
Version 1.30
June 28th, 2010 at 3:17 am
@keith:
Please follow the link above for the HTML samples. It will provide you with the sample HTML code for the BL-C20A.