1. Skip to navigation
  2. Skip to content
  3. Skip to sidebar


Home icon

The NW blog (USA)

Panasonic WV-SW175 Panasonic WV-SW175
HD 720p with pan&tilt
Buy now for just £359 / €420

HOWTO: Embed the live image from your IP camera in your web page. Part 2 – Panasonic

April 23rd, 2009 by Greg Innes

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:

Panasonic CGI Documentation

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:

Panasonic HTML Samples

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:

Sample directory listings of HTML samples folder from Panasonic

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:

HTML samples home page from Panasonic

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:

Web page integration code from Panasonic - example sample 1
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:

Web page integration code from Panasonic - example sample 2

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:

Panasonic IP Security Camera User Settings 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.

48 Responses to “HOWTO: Embed the live image from your IP camera in your web page. Part 2 – Panasonic”

  1. Jeff says:

    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?

  2. Kevin says:

    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.

  3. Kevin says:

    In the sample files folder you should see a number of examples that are compatible with Mac/Safari/Firefox/Chrome users.

  4. Jeff says:

    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.

  5. Greg Innes says:

    Audio is only supported using ActiveX in a Panasonic camera. You won’t get audio from these cameras on a Mac I’m afraid.

  6. Jeff says:

    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.

  7. Greg Innes says:

    What camera do you have Jeff? Is it one of the older Panasonic models?

  8. Jeff says:

    It is a new BB-HCM331A.

  9. DaveM says:

    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

  10. Greg Innes says:

    @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.

  11. DaveM says:

    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

  12. Jeff says:

    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.

  13. Greg Innes says:

    @DaveM:

    Which sample are you using from Panasonic’s files?

  14. Greg Innes says:

    @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.

  15. Kevin V says:

    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 .

  16. T. J. Gill says:

    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?

  17. GilF says:

    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.

  18. Greg Innes says:

    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?

  19. Richard says:

    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

  20. Richard says:

    It wont let me post the code it appears – its just a bit flickery in IE can anyone assist please?
    thanks

  21. Greg Innes says:

    @Richard:

    Maybe it’s a compatibility issue with IE8? Have you tried turning on compatibility mode?

  22. Richard says:

    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)”

  23. 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

  24. Greg Innes says:

    @Richard:

    Which sample file are you using?

  25. thanks greg – i have tried all of them i think! my camera is a panasonic BB-HCM547 which do you recommend ?

  26. Earl Madison says:

    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)?

  27. Greg Innes says:

    @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.

  28. Cwazy Wabbit says:

    What numbers do I change so that it only refreshes every 30 seconds or so…

    Thanks

  29. keith says:

    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

  30. Greg Innes says:

    @keith:

    Please follow the link above for the HTML samples. It will provide you with the sample HTML code for the BL-C20A.

  31. po says:

    when i save the HTML file from the above link it appears to have foreign characters in it and it says lhaplus extractor

  32. Greg Innes says:

    @po:

    You may be trying to actually “save” the above link.

    Just click the link. It will take you through to the Panasonic website where you can download the files.

  33. Russ says:

    Hello,

    I installed a test camera (BL C-140), it works great and put the code on my site and it views a live image perfectly. Question: is there any way of concealing the code so anyone interested in my image can’t view the source code and copy to their site? I encrypted the code so it is not super easy to find, but if you copy the encrypted code, it can be put on anyone’s site in encrypted form and work.

    Any suggestions? Thanks in advance…

  34. Greg Innes says:

    @Russ:

    No easy way to hide the code I’m afraid Russ.

    You could relay the image from your camera to a webserver if bandwidth is a concern, other than that it involves building a web app in something like Flash to display the image only if the app is running on your domain (errors if people use it on a different website). That’s what our Streamdays interface does (www.streamdays.com)

  35. Hong says:

    Is there any ways that system automatically access webcam with username and password but does not show Authenticated Dialog to ask for inputting username and passwor?

    Currently, i try the be below solutions

    1. I put username and password in URL. This way is not security
    2. I write the code for login automatically but it still show Authenticated Dialog to ask for inputting username password. I use function ‘setCredentials’ for login automatically.

  36. Russ says:

    thanks for the answer Greg, sort of suspected this was the case….another question: I am displaying the C-140 views on a web page that I created but even when I change the camera to show 640×480 and change the code accordingly, it stays at 320×240….should this happen? Again, thanks in advance, Russ

  37. Russ says:

    oops, just figured out what I was doing wrong….!! Russ

  38. Mas says:

    Hi, good posting for still images “SAMPLE 1″. I have tested it and it works, even try to combined multiple camera on 1 page.

    HoOwever, I tried to have a live streaming format view on my webpage by amending sample “SAMPLE 5″, it did not work. My cameras are BL-C1 & BL-C101

    Can you advise?

  39. Devon says:

    Thank you for the post. I was able to get Sample 1 & 2 working with my BL-C30 but my free WordPress wouldn’t allow for the use of java script (gets pulled out). I’ve at least got an image though. Thanks again!

  40. joshua says:

    What about an example of MJPEG for the HCM715 camera?

  41. Dominique says:

    Has anyone faced the problem when Panasonic Audio plugin gets corrupt when scrolling the webpage? I see this in IE7, 8 and 9.
    If I create a webpage without MJPEG plugin (i.e. only audio plugin + jpegs + text), it works fine. But if I try to combine both audio and video plugins (like in Panasonic samples 3/4), audio toolbar corrupts upon scrolling. You can try this also: just edit sample 5, putting some dummy images before and after camera plugins, and then try to scroll this page.

    Surprisingly I never saw such effect on Panasonic embedded pages (e.g. Multi View etc.). Possibly because those pages use frames?

  42. Kipper says:

    We’re worried about security. Don’t want to expose the IP in embedded code. We can FTP images periodically to our domain host server, but we need to select the most recent image in the folder for viewing. We think grabbing the latest time-stamped image from the image repository on our domain host server will do the trick. But how? Is there a more elegant or simpler solution?

    Thanks.

  43. Andy C says:

    Thanks for the useful info. I’ve tried the basic Sample1 code, edited it so it reflects my camera’s IP and published it internally. It works beautifully.

    Unfortunately the same code doesn’t work if I publish externally. As you might expect I just get a blank rectangle where the ActiveX control should be. I’m guessing that this is because there’s no way an Internet-connected browser can see my internal LAN addresses, let alone the camera. Is some sort of port-forwarding required on my router?

  44. Kav says:

    Yes, you will need to do some simple port forwarding to the camera.

  45. Mickey Flouse says:

    Hi, I got two webpages working with Sample1 script.
    One is working with a BLC-131 and one with BB-HCM715.
    But now I try to make one webpage with both scripts and cams on the same page, so a multipleview page, and this page shows just a still image of both cams.

    Anyone knows how to get them both working on one webpage?

    Much obliged.

  46. Akmal says:

    Hi, may i know how would be the code if i’m using a Panasonic camera wv-sf332?

  47. Paul says:

    I’ve used the sample 1 and replaced the Ip’s with mine but want to use the sample 3 and have true video and not jpeg every second. Not tech enough to figure out how to put in the ip like the sample 1 already had in it.

Leave a Reply

Categories