This process describes how to display the real-time video feed of your Foscam FI8918W or FI8910W Wireless Camera or on your website. I have tried to make this as simple as possible by allowing you to plug in a few values and then returning the corresponding code to you which you can then copy and paste into your own website.
In addition, the script below will allow you to test your settings and verify that your camera’s live feed is available outside your network (a common problem for many trying to get their camera up and running).
If you would like to embed code for a Foscam FI9821W into your webpage or are interested in embedding multiple foscam cameras into a single web page click the corresponding link.
To Embed Video from Your Foscam FI8918W follow these steps
Step 1
Using the Foscam Control Panel setup a guest account with visitor privileges.
!!! WARNING !!!
Do not use your admin account otherwise your guest will be able to take total control of your camera.
Also keep in mind that guest users WILL BE ABLE TO control various aspects of your camera like enabling/disabling the video feed, speaker and mic, panning and tilting the camera, etc.
Translation: People on the internet WILL BE ABLE TO listen to, view, and record whatever your camera is next to. Even if that was not your intent.
Step 2
Enter the following information about your Foscam Camera:
Note:Your URL must be externally accessible and include the port number you assigned it: http://yoursite.com:portnumber
About Mark A. Barros
Excellent! Having had my foscam camera for 2 years now, had always wanted to get around to being able to embed the feed into website as a webcam.
Now just need to trick my network into resolving the domain name internally, and then I can just popup the camera feed any time to watch the kids without needing to login first.
Thanks Patrick.
If you haven’t already done so try setting up dyndns so that you can access your camera externally. Check out the following documents for more info on how to do this:
FI8918W User Manual.pdf
FI8918W-Quick-Installation-Guide.pdf
-Mark
I got it to work. Very nice but I have one problem… The video stream cuts out after a few seconds and I have to reload the browser for the video to come back. Could this be a restriction from the web host or ISP?
When I access the camera directly it’s functioning fine and does not cut out. I can also access the camera through dyndns.org and don’t have any problems.
Rick,
Just tested it and was able to reproduce what you are saying. It worked flawlessly before when I originally posted it. I have since upgraded my firmware so perhaps that is the cause.
In any event, I made a code change that appears to fix the problem. Refresh this page and re-enter your camera’s URL and public login credentials and let me know if works for you.
-Mark
Now I can’t get the code generator to make a valid code. No feed shows up.
I haven’t made any changes to the site but the video appears to be more stable.
Have you fixed something that the embedded code on my site is reporting to?
Yes, made a small change that seems to make things more stable. The time variable that we add to the string was reporting back in milliseconds since some date in 1970. Changed it to report back in seconds.
This is a little trick so that new images that we fetch every second or so are displayed in your browser.
Without changing the url the browser will display a cached picture (and not the updated one).
-Mark
Just re-read your question. The change I made requires you to get a new copy of the code by going through the above process.
If things appear more stable and you have not grabbed the new code then it is purely a coincidence as the code I provide does not report back to me in any way.
Just want to make that clear.
-Mark
OK, I think you added a trailing slash to your URL. I added some code that strips this out because a trailing slash breaks things.
Here are the variations I tried to get the code.
The user name and password are the same and the camera is still working with the old code. It is still cutting out but not as frequent.
Strange that there are two issues going on:
1) The camera is working better and I haven’t changed the code yet.
2) I can’t get new code to show up on this page using the same info I used before to get the code.
Rick,
1) Make sure you refresh the page and refill the form to get the new code. I think this one will work more reliably.
2) Make sure when you enter your camera’s url that you include the port number.
In the examples you provided, no port number was listed. This may be why you were unable to get a picture with the tool.
-Mark
I tried using the port number with no luck. Strange I didn’t use a port number last time I was able to grab the code. Can you try it for me? It’s port 80. site: prescottaz.tv User: balloon pass: saycheese
Alright I got it working. Let’s see if it’s more stable now.
Thanks Mark
Camera still cuts out with the new code. I did modify the refresh rate from 1000 to 10 so that the camera shows more fluid motion. Could that be causing a glitch. If so what’s a reasonable speed?
Rick,
I recently had to replace the primary hard drive on this server. Yesterday it came back online. I could have sworn that I responded to you telling you port 80 was a bad choice because it is reserved for http protocol requests.
I don’t see that comment here so I am going to repeat it. Try to use a non reserved port like 8100 for example.
In addition, I made another code change because I saw the problem you originally reported again. Please reenter your camera parameters to see if the new version resolves things.
Essentially what I did differently here is I added onerror=’reload(this)’ to the image reference. I believe an error is occurring which is why the feed stops. By handling the error I hope that in the event that an error occurs it will be handled more gracefully.
Please let me know how this goes and thanks for being my guinea pig.
Mark-
I did get one of your replies via email that didn’t show up on this thread. I did use another port.
Now I have tried your new code. So far no problems. This may be it! I don’t mind being your guinea pig:-)
Thanks for your help…
Mark-
3 hours and going strong. I think you did it! Thanks a bunch…
Awesome! Nothing better than a willing lab rat to operate on.
Good to hear that it’s still alive and kicking after 3 hours. I think the unhandled error was mucking things up. You will notice that with the new code your feed may appear to hang or even disappear from time to time but it should correct itself.
And thanks for helping me with my sanity. I thought I was going crazy cause I was sure I mentioned the port thing. :)
-Mark
Got exited too fast. I appears the problem occurs during the day. It’s around noon right now and the embedded camera view goes out after a minute or less. I have to refresh the browser to get it back on.
The camera is working fine because the stream via dyndns.org doesn’t cut out. I watch them side by side.
Ugh! Not sure why this is happening. When I figure it out I will let you know. Thought I had that problem licked.
-Mark
Is there any way to get an audio stream as well? I want to use this to broadcast classes that I give on the web, so the audio is key.
David,
Not sure. I will say that the mic and subsequently the audio is horrible from this thing. I mean really bad. It would be doubtful if a few words you said were understood even if you could get it to work, not to mention a whole lecture.
For your application I would suggest a decent web cam and a free service like which is designed for that sort of thing.
Hope that helps.
-Mark
Thank you. I was hoping to do it with an ip camera so I wouldn’t have to worry about lugging around and starting up a laptop each time, but I guess not meant to be. Thank you for telling it to me straight.
Understood. Wish I had better news for you. If you find a good solution please let me know.
-Mark
Hello,
finally I can put my little-little town on the web.
Thank you.
One last thing … There is a way to add the time and date on video? (:-o
Happy New Year
Emanuele,
Not natively. But that does not mean you can’t add a little bit of Javascript to your page to show the current time and date.
See this fantastic tutorial that takes you step-by-step through the process.
This is what the output of the above script looks like.
Let me know if that is an acceptable solution for you.
-Mark
Thank you for this great tutorial! I was able to embed my live video feed with no problems. Now I just need to purchase more cameras!
Awesome Scott!
Glad to hear it. Thanks for the feedback.
-Mark
Hi There,
I have been through this tutorial, a dozen times and typed every bloody thing i can think of into your code maker above, but i cant get a bloody thing !!!
This stupid camera is starting to P$$ me off.
Of course, it is me making the mistake, but i cant figure out where !!!!!!
Can you help ???
Can i post my IP and router addreses here or is that dangerous, i dont know. I dont care who looks at my camera.
I have it working and can see it if i type its address into the address bar. But i cant seem to get it to talk to the net???
By the way, I do also have my own domain registered, if that helps. I want to put the cam image at
http://www.ozdrdj.com/webcam.htm
Hey Col,
Before you can embed your camera into you webpage you have to configure things so your camera is accessible outside your network. The above script will not do that for you.
Make sure you look at:
FI8918W Quick Installation Guide
FI8918W User Manual
They provide graphic step-by-step instructions on how to make your camera accessible outside your network. Once you get that working you could use the above script to embed your camera’s video into your web page.
-Mark
I read that but still i am confuzzled. If I already have my own domain do i need to use dyndns? Is there something other than dyndns, as its no longer free? Why do i need these anyway? The images show up on some sort of html page i guess, why cant i steal code from that page and add it to my own? I spent hours on this yesterday and am still none the wiser?
I have put everything i can think of into that box and nothing works
Hi I was wondering if you could help me out on a project that I was doing. It involves the foscam and me developing an ios app to view cam from device and record to macbook. Do you think you could give me an assist?
Rick,
If you have a specific question I will do my best to answer it.
-Mark
Mark
Just tried this I get the image embedded fine on my webpage but everytime I access the page it wants the account and password before I can view the page , maybe Im doing it wrong do I just copy all of the displayed html ?
My goal is to have the webcam show on the webpage without the viewers having to enter a login or pwd
thanks
Never mind it works perfectly now ,,, for some reason did not like my login/password in lowercase changed to capital letters works great
Doug,
If you enter the guest login credentials before you run the script all you will have to do is cut and paste. Also, if you enter the wrong login credentials when creating the script or if you have an error in your camera’s configuration it will not work and as a result, ask visitors to your site to login to see your camera feed.
-Mark
Thanks for responding with the ultimate solution. I started writing my response a few hours ago but then I got pulled away from my computer before I was able to hit submit.
Hi.
Firstly, Great piece of code worked perfectly first go.
Is there any way of increasing the displayed video size. My camera is set to 320*240 and i dont really want to change this as it messes with my lighting compensation.
Any ideas?
P
It will probably look very grainy but you could add width=”640″ height=”480″ to the img portion of the html. This will in essence double the display size of your image. Let me know if that works for you.
Thanks for that. Worked a treat. Did look a bit grainy but had the desired effect as I was just adding a web page to the extras of Windows Media Centre which allowed me to access the cameras without leaving Media Centre. ( if that makes sense :) )
Thanks again.
Awesome Peadar! Glad it worked out. Thanks for the feedback.
-Mark
Thanks awesome code!! Send me your newsletter.
Thanks John.
Hi there;
I found your site very helpful, just having a problem getting the f18910w to stay loaded on the site… any suggestions? will this even work with the new foscam? Cheers; Ivan
Ivan,
I have to look into this again. What web browser are you using? As far as it working with the new foscam I can’t be sure because I don’t have one. If you end up buying one and trying it out please let me know.
-Mark
Is there a code that you can write that will be able to tell which web browser some one is using and display the video feed accordingly instead of having to have two separate feeds on my website depending on wich browser someone is using? Please see how I have it set up on my site and advise. Thanks. go to http://www.deercam.net/membersonlyaccess.htm Also can I time stamp and show local temp inside of your html?
In html : http://www.quirksmode.org/css/condcom.html
In PHP : http://www.anyexample.com/programming/php/how_to_detect_internet_explorer_with_php.xml
You guys understand this way more than I do, can you please write out an example for me to enable me to use your html with both formats without having to have two separate html codes and thus two separate video screens? Please advise…
Still confused can you set up an example like you folks set up to help me change the size of IE?
In this case I want to use both codes to display on camera feed depending on what one they are using if they are on chrome it will display chrome HTML and if they are on IE it will display IE HTML.
I know I could soley use IE but like you note it is a little slower in its refresh rate. Please advise in simple terms and perhaps an example.
This solution is working great, I’Ve been trying for days to stream MJpeg to Internet Explorer without success.
I have a few “performance” question.
Is it possible to imporve the 1 frame per sec to get a more “streaming” like feeling?
I don’t realy think I can with my setup because it seem that I can’t do bettre than 400-600 ms to download the 30 kB snapshot every second (do everybody get this kind of performance?)
Will it perform well even with multiples connections (20/50/100 viewers) or it will get choppy ?
btw, a big think for this great solution maker !
Hi Mark,
IE shows only the famous little boxed “X” instead of a video.
I assume that it is a setting in my browser.
Do you know what setting should be enabled in IE8?
Peter
Hi,
How could you put a watermark or a text on the image?
Regards.
Can I just tell you that you are SO my hero? I just plugged in my info, and there it was, complete with embeddable code — soon to be live on my site.
It’s people like you who make the Internet great. Thank you.
Hi Tamar,
Thanks for the love. :)
-Mark
How can I change the size of the screen when using the ie explorer html code?
Add a height=”240″ width=”320″ parameter to the img line.
Example:
Thanks works great can shrink it down now!!
Thanks for all your help with the Foscam Mark!
I’m trying to embed three cameras on one page, The only way I could get it to work was to make three separate web pages and use frames on the main page. http://www.kevinspage.com What parameters do I need to change in the script so multiple cams will work on one page?
Thanks!
~Kevin.
Hey Kevin,
In your case the code would look like this:
Click Link and Copy Code On Next Page
-Mark
Wow!
Thanks so much, You Rock!!
Anytime my friend. :)
Hi Mark!
Me again.
I am trying to embed a Trendnet TV-IP410 IP cam and have had a little success see http://www.kevinspage.com
I have noticed that the images don’t play well on IE, is there a way to keep the current image until the new image has loaded and then instantaneously switch from the old to the new image so IE displays the webcam image without loading clitches?
I saw a site that had codes for the preset positions on the Foscam cameras. Pan tilt is difficult due to the lag but presets would work well. How would I add preset buttons below the webcam images.
Thanks!
~Kevin.
How do I make my streaming video able to be seen by guest without them having to put in username and password?
Charley,
You have to setup a “Guest Account” (see Step 1 above). If you do it right, users will not have to enter anything when they view your feed on your webpage. If for some reason you don’t setup the “Guest Account” properly then you will get a pop-up that requests users to log in.
-Mark
I am having trouble getting the name/password pop up off when someone else wants to view the camera.
Is there a script I can put in before?
Thanks…great forum…tons of help!
fixed…ahh networking…
Thanks for the update. I love when things work themselves out.
Hi Mark
This is a great site, got my Foscam F18918 and managed to set up up no probs. works well
currently we are streaming a live meeting once a week onto the internet vie justintv but there are toomany distractions and ads . so bought the foscam hoping we can stream this meeting into our own site using wordpress. I read your site and using your embed code it works a treat. changed the height and width to suit and everything is running fine.
we can log direct into the camera using the local IP address or over VPN and hear people talking through the inbuilt mic. on the iphone if i download the ‘baby monitor app’ by sunshine apps then i can both see and hear audio. although not fully tested the quality. have any improvements been made since the comments form DanL in Jan. can we play the audio through the site also??
Many thanks in advance
Geof,
Audio quality on this camera is an atrocity. For conferencing I would suggest starting a hangout with Google+.
-Mark
Great site, really appreciate the code generator, it works perfectly and is exactly what I was looking for.
Someone asked earlier in this thread but there was no reply, does it matter how many users are viewing the page simultaneously? Will it slow down the stream or cause lags or crashes? I tried googling this question but can’t really find anything, all the hits are usually pertaining to embedded youtube videos and not specifically a live streaming IP cam feed.
Thanks again and look forward to your answer- Jon
Hi Jon,
I have not run any tests so I can’t give you a quantitative response, but it is reasonable to assume that the more people that are simultaneously viewing your web cam, the slower the feed will be for everyone. I am not sure where you are but typically in the United States ISP upload speeds are a tiny fraction of the advertised download speed. This is because ISPs try to maximize their bandwidth and thus assume you will downloading movies, webpages and videos, and uploading mouse clicks (i.e. you will be downloading more than you upload).
Since the camera “uploads” data to user’s viewing your feed it will consume portions of that upload bandwidth. Just keep that in mind if your network becomes a bit slow and unresponsive.
-Mark
Thanks for the reply. One other question if you don’t mind, here at home, I watch these cameras directly from my network (http://192.168.xx.xx:etc)…does this count against bandwidth? I assume the signal is sent straight from my router to my computer without the need for internet, so it shouldn’t affect my internet bandwidth or those viewing my page, is that right? Thanks, and I’ll leave you alone now.
Btw, I should add that I used your code generator for my f18910w (not f18918w) and it works fine with the newer camera. You should add that to your title so that people with the newer camera find this page.
Correct. If you are using the internal IP address to access your camera from within the same network then it shouldn’t impact your ISPs upload bandwidth.
Thanks for the feedback regarding the fi8910w. I uploaded the page as you suggested.
-Mark
So, when I’m on my network, I can view the camera with no problem…when off my network, no image…any ideas why?
Thanks
I put the test code on this page: http://oakstbeach.com/Contact.php
,,,and after some time it just works…maybe the no-ip took over night
Glad you were able to sort things out.
I actually haven’t been able to get it. The code works on this page, on my network computers, but not on any outside machines or phones. It worked last night for some reason…now nothing.
I tried rechecked the code…the no-ip reset on its own.
I changed it back…but it may be taking a long time again…who knows.
…The problem was in the camera itself. Once I unplugged the camera and plugged it in…of course it worked.
Awesome! Nothing like a reboot to get the electrons-a-flowing. ;)
Hi Mike
Thankyou for your response
The customer has a good quality external mic which they would like to plug in which we hope may help
By downloading the baby monitor app (sunshine apps) onto my iphone I can hear audio via the built in Foscam mic. But hot how can I translate audio into my WordPress site. Do you have a code which would allow this or do you know of any plugins?
Sorry it’s a bit of a long shot
Other than this the customer may need some screen capture software (which maynot capture audio) and maybe a break out box of some discription
Look forward to hearing from you
Geiff,
I tried an external mic to no avail. Let me know if you are successful with your test.
As far as playing audio through your wordpress site. I don’t have a solution. You should be able to play sound as admin through Internet Explorer. Perhaps if you investigate how that is done you can craft a solution. Just a thought.
-Mark
Hi, Mark,
Congratulations for your good work. I put this code in my site and it’s very interesting ! So now, I want to improve my site adding moviment control. Is it possible? Do you have any code wich I can add movimment control in the camera? Another question, I want to put in my site an manner to the cliente full fill the parâmeters of it’s camera and can see it’s camera itself. Is it possible? Do you have the code for it?
Tks.
Vanger,
Thanks for the feedback. You should be able to add movement controls with the API as well.
Up
decoder_control.cgi?command=0&user=&pwd=
Down
decoder_control.cgi?command=2&user=&pwd=
Left
decoder_control.cgi?command=4&user=&pwd=
Right
decoder_control.cgi?command=6&user=&pwd=
I didn’t understand the rest of your question but any other functionality you want to implement will be found in the API specification.
I believe this is it API Specification
Hope that helps.
-Mark
Will my Foscam HD outdoor camera work with this ? Please advise. Model number is F19802W.
found the your other site at http://www.themadhermit.net/how-to-embed-video-from-your-foscam-fi9821w-wireless-camera-into-your-web-page/
Works great but how to I change the size of the camera feed?