Specialist IP Camera Store since 2004
Public Sector & Education • Business & Enterprise • Home Security
-
0151 633 2111
How to embed live images from your Y-cam in a web page
“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.
Step 1 – Download the HTML file
Y-cam provide a couple of files to help get you started. You can download them here:
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.
56 Responses to “How to embed live images from your Y-cam in a web page”
I have a ip cam how can i make it move to desired locations to take pictures an have the new picture it takes stay current on a website for example like this persons http://www.dimensionpoint.org/ops/beauExternalPanorama.php
hello i have html page work on camera its perfect but i cant use any software to connect it on pc ?
any idea ?
Is there any chance to integrate the LIVE-Stream (motionjpg) of the Y-Cam in a homepage for ALL browsers (Firefox, IE, Opera, Safari, Chrome and iPad/iPhone)?
Any scripts around??!?
Help would be nice!
Thanks,
stasha
Can you tell me how to imbed a live image from a Toshiba 15A camera into my web site?
Thanks Much!
David
Hi!
Ist there any chance to integrate the LIVE-Stream (motionjpg) of the Y-Cam Bullet in a homepage for ALL browsers (Firefox, IE, Opera, Safari, Chrome and iPad/iPhone)?!?
Any scripts around??!?
Help would be nice!
Thanks,
Nils
Hi Eliot,
The above won't work on a MAC as it relies on ActiveX which is only available using Internet Explorer.
@ Greg
I've got the Sharx SCN2607. Can I embed the feed into a web page that will work in all browsers?
If so would you be able to post the code to do that?
I'm on Mac and I'm getting the "missing plugin" error on FF and Safari when embedding the code per the instructions on this page.
Thanks!
Hi Greg,
Many thanks for your reply.
This is beyond me.
I have added a text widget into the side bar but it uses the .cab file which it cannot find as I'm unsure how the sidebar works and finds the .cab file.
Hi,
Many thanks for posting this.
I have a J-Cam Knight and would like to include the live stream (Bird Box Cam) from a self hosted WordPress blog is this possible?
Many thanks for any help
Hi James,
If you use the above technique it should be possible. It probably won't be an easy drag and drop solution though as you will need to add the code into the same path as the page you want the camera to be displayed.
What would be even more clever is adding a thumbnail view from the camera as a sidebar widget, perhaps using an HTML code module?
This is nothing I've tested unfortunately but I don't see any reason why it wouldn't be possible.
Hi, this method works great, but is it only for local area network? how can we implement this page for public view over the internet?
Thanks in advance, I hope its possible
Try logging into the camera and adding a date/time stamp. Should be in the camera settings under OSD setup. (on-screen display)
I have your code working well. However the image does not show the date and time stamp. How can I add that?
With this version of demo files how can i take 320×240 video resolution in browser? I tried to set it up from ip camera settings but always got 640×480.I also tried to set it from object tag but it hides 3/4 of the picture.
Will you make a report that covers Foscam? Thanks!!
@Ben:
It can be done on the newer models of Y-cam but there is a bit of web development involved.
Quicktime is used for non-IE browsers (ActiveX for IE). If you open the live view page of the Y-cam in Firefox and view the page source the last part of the script is the html code that uses the Quicktime plug-in. Check this page for help in understanding the script: http://soundscreen.com/streaming/embed_streams.html#ref
Note that you will still need to use ActiveX for IE browsers so some development would be required to determine which operating system and browser the viewer is using before selecting the method of integration.
It's definitely do-able but not super easy I'm afraid.
With the new SD and Bullet series cameras is it possible to use this same technique to embed live video in a web page that will be viewable in all internet browsers, specifically Firefox and Chrome? If not, what other methods are available to embed live video from a Y-cam Bullet into a web page?
@Debbie:
Hi Debbie. This is actually even simpler for an Axis 207W.
Log in to your camera and enter the setup pages. On the menu on the left click on 'Live View Config' and then on the sub-menu that opens below click 'HTML examples'.
This will give you a page where you can select how you want your image to look on your website and then it spits out the code you need to embed into your webpage.
Hello, this is helpful. Do you have one using Axis 207W?
Thanks for your help!
Embedding this control is great. Thanks for the code.
Problem is that I can only get it to work from my hosting service (godaddy) and not from my own home based IIS7 server. Is there something I need to do to enable ActiveX/CAB publishing?
All I see when browsing to http://server/demo.htm is a grey box on the web page. I have set the internal IP, port and user correctly.
Help greatly appreciated.
@mike:
Just use a Google mail account to 'send' emails. You can send the emails to any account you wish.
please tell me code of live video through webcam
Just got the black y-cam and your tutorials really help; however, I have an aol account and don't understand how to send email alerts to that account; your explanation for gmail was great but how does it apply to an aol account.
thanks
mike
The server can be anywhere.
You FTP an image to a server using the same filename each time (overwriting).
Then I would probably use Flash to build an app to retrieve the image from the server and update on the page at a set time period. But you can probably use Javascript too.
Alright, I understand.
But can this server be located somewhere else? Does it need to be on the same network as the Y-cams?
And what kind of web-app are we talking about? I know of a program called "webcamxp" that can host these types of things for example.
Can you explain it more in detail, how you would have solved it?
Thanks for helping 🙂
@Nimrod:
Yeah, you can't do that using the above method Nimrod.
If you want unlimited web viewers what you would need to do is host the stream or image on a server and have your viewers view the server instead of connecting directly to the camera.
You would need to build a small web-app to display the image though.
Hi Greg!
I want to stream my Y-cam on my website for everyone to see, without setting a username/password and without the limit of being maximum 16 watchers simultaneously.
Do you know a way of doing this?
I actually pasted my code but it didnt show for security I assume 🙂
I have tried embedding onto my webpage for my Axis-2130 and cant seem to get it going.
this is what I came up with
and it wont work
obviously the IP address would be the camera's network IP address and the port being 3351
I know my router is setup correctly because I can access my camera's default webpage and see the image. but I am trying to just embed the stream into the webpage not give visitors access to the entire User Interface.
@JonH: Try this: 'http://[camera ip]/snapshot.jpg'
Hi Greg
I need de only url where the generated image for IE for put this page in automation system.
I'm using http://.stream.jpg but in IE appear ASCII codes( error)….
If I put only ipaddress it will open the software the camera but this software not run in the system because the system not permit install plug ins
Thanks your replay
@Jonh:
The default IP address for the Y-cam is: 192.168.1.150
If you get nothing on that IP address you can check that address using the setup tool found on the CD-ROM.
Hi All
I want to kwon the exactly URL that y-cam use in the IE.
Thanks
Jonh
Hi Greg,
that was not, what i meaned.
Is it able, that the User, who is right there on the Webpage, could log-in himself? Dont know how to describe this better, my english is horrorable. 😉
I want to reach, that every User can log on with HIS Username/Password.
How to do that?
Greets and thank You for Your reply!
Pony
@ponyrieman:
See Step 3:
The code shown lists the username and password for the camera. My advice was not to use the administrator username and password, set up a non-admin user and use those details.
You can download the example files from the link in the article.
Hi,
is it able, to ask for Username/Password in this HTML-Code? How to change the Code?
@kerry:
It's very easy to post a link to the URL of the Y-cam. However some users prefer to just embed the stream into their existing website for a seamless integration.
i use yawcam. it makes its own web page with a public ip. wouldent it be easeyer to just post a link to the page.. http:xxx.xxx.xxx.xxx:8081.. as the page example.
most new web cams do this
@Sharon:
No problem Sharon. Let me know if you need any more help.
Hello Greg
Thanks for all your help….time is running short. I have created an iframe to show two seperate pages linking to the http://ip of each camera. No ideal but a workaround for the time being. I guess i will re-visit the problem when I'm not so stretched.
@Sharon:
Can you see the cameras in a browser when you type in the IP address into the address bar?
If you can see both cameras in a browser then I don't think there should be any issues seeing them when they are embedded in a web page.
Hello Greg
The demos aren't loading at all. No probs with bandwidth, webcams are on local network with access bypassing the proxy. Clutching at straws I thought it may be an ie browser issue but have the same problem with 8,7 and six.
@Sharon:
It couldn't be just a bandwidth limitation? Have you let the page sit for a while to allow it to connect. I know the Y-cam demos take a few seconds to load for me here.
i.e. are you accessing your Y-cams on the local network or across the Internet?
Hello again Greg
This is even more puzzling…. i can show 2 streams of the same camera on one page but not one for each. When embedding the two different cameras no matter which way round, the first embed shows a beige square where the embed is supposed to be and the second embed is the only one showing.
Hello Greg
Sorry to be an utter pain! All I am getting with the demo is two beige colour squares. So I thought about substituting settings to show my cams. When I changed the parameters for my webcams, only the second embed shows…. back to square one!! I wish I could figure out why i could get two images (different embed methods) the other day and only one now.
Thanks
Hi Sharon,
I've tested this for you and managed to get 2x Y-cams embedded on a single web page quite easily.
Here's a sample html file using Y-cams demo cameras: https://www.networkwebcams.co.uk/downloads/2-y-cam-demo.htm (right click – save as).
Remember you will need the ActiveX cab file in the same directory as this .htm file and it will only work using Internet Explorer.
Thanks Greg for your quick response
I have already tried your suggestion without any luck… I even tried to create a second version of the .cab file and point one of the webcams to that.. also no luck.
Bizzarly enough, I did have some luck by using the steps in this tutorial for one camera and bog standard etc for the other. This is the only way so far I have had both cameras to show in one webpage running together. Now this doesn't even work since moving the cameras to a different location.
I have installed the multilive camera viewing software and it works great but it only shows 1, 4 and 9 cameras at the same time. I only want 2 cameras showing side by side with some scope for more personalised appearance (reason for embedding in a webpage).
Media player is ok with embedding two players in one page, but realplayer doesn't seem to like it. Also realplayer now asks for an update which it can't find… ah the joys!!
@Sharon Spedding:
Personally it's not something I've tried Sharon. I would test it by using the same code (above) twice but altering the server IP and port number accordingly.
Are you aware of Y-cams free Multi-camera viewing software, Y-cam MultiLive? More info here: https://www.networkwebcams.co.uk/blog/2008/01/09/y-cam-multilive-multi-camera-viewing-software-now-available-and-free/
Is there a way to show streams from 2 webcams at the same time in one webpage?
@Andres:
16 concurrent users for a Y-cam (dependent on bandwidth limitations)
Yes, traffic from the camera should affect your monthly transfer rate.
If I show the live image from my Y-Cam on my web page, how many concurrent users can I support?
Is the video going to increase the monthly data transfer available in my web server?
@KevinJBowman: Why, yes we do!
https://www.networkwebcams.co.uk/blog/2009/04/23/embed-live-image-from-panasonic-ip-camera-in-webpage/
Do you have this Howto done for a Panasonic BB-HCM yet?
Hi Mike,
I will be doing one of these articles for the Panasonic consumer range of cameras (BL-C, BB-HCM ranges) in the future so stay tuned.
You don't need to pay me though but thanks for the offer!
I would PAY to have you provide this same time of documentation that you've posted HERE for the Panasonic IP cams such as the 280 and 581A's.
Hi, nice tutorial.can you make one too using TrendNet's TV-IP410W?
Im looking forward for your response.
Thank You!