IP Camera Learning blog

HOWTO: Embed the live image from your IP camera in a web page. Part 1 – Y-cam

January 19th, 2009 by Greg Innes

“How can I show the live image from my IP camera on my web page?”

We get asked this question a lot.  Whether it’s from a customer of ours who has a business they would like to promote, say from the leisure or tourism industry or from a customer who is an end user and is working on their family website, we can help with the answer.

We will be running a number of these guides to cover as many camera manufacturers as possible.  This guide will focus on the Y-cam.  The Y-cam is ideal for use as a streaming IP webcam as it is affordable and can be placed outdoors using it’s specially designed Shell housing.

This guide will be suitable for:

Y-cam White
Y-cam Black
Y-cam Knight

It will work for both 1st and 2nd generation models.

Note: when embedding the Y-cam video in your web page it will only work with the Y-cam’s ActiveX component.  This means that this will only work in Microsoft Internet Explorer browser.

HOWTO:

Step 1 – Download the HTML file

Y-cam provide a couple of files to help get you started.  You can download them here:

Y-cam HTML Demo files

Inside the zip file you will find the following files:

- demo.htm
This is the HTML file containing the code you will need to embed into your website

- how to view live video from a website.doc
This is a readme file containing instructions in a Microsoft Word format

- ipcamera_V1224_YCAM.cab
This cab file must be placed in the same folder as the HTML code or in the root directory of the web host

Step 2 – Set up a guest user in the camera

We don’t want to use the administrator username and password in the HTML code because when you embed this code in your web page then the password will no longer be secure.  To protect your camera’s settings we need to create a guest account.

Log in to your camera and go into the camera settings by choosing the ‘settings’ option.

From the menu on the left choose ‘User Management’ under the ‘Tools’ heading.  This will open up the Camera User list.

Click the ‘add’ button to add a guest user.

Enter the desired username and password and click ‘add’ to finalise your guest user account.

Keep a hold of these details, we will need them in Step 3.

Step 3 – Adjust the code in the HTML file to suit your camera

The code provided looks something like this:

To tailor the code to suit your specific camera you need to adjust 4 settings:

ServerIP: Change the value of the ServerIP parameter to match your Y-cam.  This can be a local IP address, public (external) IP address or DDNS hostname.

HttpPort: Change to match the HTTP port number of your camera

Username: Change to match the username of the camera.  Important, use the guest username you created in Step 3.
Password: Input the password for your camera. Important, use the password you created for the guest user in Step 3.
Step 4 – Embed code and upload

Now take the code between the BODY tags and place it between the BODY tags in your webpage to embed the live image. Save page and upload your new webpage to your web server.

Finally you need to copy the ‘ipcamera_V1224_YCAM.cab’ file to your web server.  Copy it to the same path as your HTML code or in the root directory of your web host.

Finish

That’s all there is to it.  How you format the rest of your web page is entirely down to you.

Please remember, do not use your camera’s administrator username and password as the details stored in this HTML code are not secure.  You should set up a new user as per the instructions in Step 2.  That way if people gain access to your camera they won’t be able to access the settings.

Also this will not show in Internet browsers without ActiveX support so it will only appear if the users view your web page with Microsoft Internet Explorer.