How to Embed Video from Your Foscam FI8918W/FI8910W Wireless Camera Into Your Web Page

Foscam Camera Embed Video
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

Camera URL
Guest Account Password

API Documentation

Comments

  1. Patrick Jackson says

    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.

  2. says

    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.

    • The Mad Hermit says

      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

        • says

          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?

          • The Mad Hermit says

            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

          • The Mad Hermit says

            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

        • The Mad Hermit says

          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.

          • says

            Here are the variations I tried to get the code.

            http://www.prescottaz.tv/
            http://www.prescottaz.tv
            http://prescottaz.tv
            www.prescottaz.tv
            http://prescottaz.tv/
            www.prescottaz.tv/

            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.

          • The Mad Hermit says

            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.

            http://yoursite.com:portnumber

            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

  3. says

    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

  4. says

    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?

    • The Mad Hermit says

      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.

  5. says

    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…

    • The Mad Hermit says

      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

  6. says

    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.

    • The Mad Hermit says

      Ugh! Not sure why this is happening. When I figure it out I will let you know. Thought I had that problem licked.

      -Mark

  7. DavidL says

    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.

      • DavidL says

        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.

        • The Mad Hermit says

          Understood. Wish I had better news for you. If you find a good solution please let me know.

          -Mark

  8. Emanuele (from Italy) says

    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

    • The Mad Hermit says

      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

  9. says

    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!

  10. says

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

  11. says

    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?

  12. Rick Rodriguez says

    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?

  13. Doug says

    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

    • Doug says

      Never mind it works perfectly now ,,, for some reason did not like my login/password in lowercase changed to capital letters works great

    • The Mad Hermit says

      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

      • The Mad Hermit says

        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.

  14. Peadar Donnellan says

    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

    • The Mad Hermit says

      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.

      • Peadar Donnellan says

        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.

  15. says

    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

    • The Mad Hermit says

      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

  16. says

    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?

  17. says

    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 !

  18. says

    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

  19. says

    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.

    • The Mad Hermit says

      Add a height=”240″ width=”320″ parameter to the img line.

      Example:

      1
      
      <img src="http://yourwebsite:yourcameraport/snapshot.cgi?user=123&pwd=123&t=" name="refresh" id="refresh" onload='reload(this)' onerror='reload(this)' height="240" width="320">
  20. says

    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.

  21. says

    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.

  22. Charley says

    How do I make my streaming video able to be seen by guest without them having to put in username and password?

    • Mark A. Barros says

      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

  23. says

    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!

  24. Mr G says

    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

  25. says

    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

    • Mark A. Barros says

      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

      • says

        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.

        • Mark A. Barros says

          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

  26. says

    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.

  27. Mr G says

    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

    • Mark A. Barros says

      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

  28. says

    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.

    • says

      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

  29. says

    I was trying to display two cameras on one page but find that it will initially display both but then they both display one Camera. I know I’m missing something but can’t put my finger on it, if you have any idea please enlighten me.

  30. John says

    Will my Foscam HD outdoor camera work with this ? Please advise. Model number is F19802W.

  31. Nick says

    Why does a “visitor” have the ability to listen, pan, tilt, etc??? Why cant just the “operator” accounts do that? Is there a way to only allow the raw video feed with no control?

    • says

      Nick,

      The “visitor” shouldn’t. But you should always assume they can. Never put an Internet Connected IP Camera in a place where you wouldn’t want someone from the Internet to see or hear what is going on in that space remotely. It’s just good common sense.

      I was able to remotely enable the audio and video feed of one of my own cameras as a visitor even though you are not supposed to. This resulted in my placing that disclaimer on my web site so that others are mindful of this.

      I think we take a lot for granted in this day and age so we have to be extra careful when using technology. Take precautions. Be safe.

      Here’s a recent story that confirms this. If you haven’t seen it check it out.

      Baby monitor hacked, spies on Texas child

      • Nick says

        Thanks Mark. Makes sense what you said. But really sad that the software/firmware doesnt control security better so that visitors have only view rights and operator a bit more rights and admin full rights, you know. Oh well – just venting.

        I had seen that story in the news a few weeks ago.

        • says

          Yeah Nick,

          It’s pretty scary stuff. At the end of the day you have to be your own advocate when it comes to tech. With great power comes great responsibility. ;)

          The manufacturer’s should have safeguards in place, and hackers shouldn’t hack, but what are you going to do. Just be aware and take precautions.

          • Nick says

            One more question, I noticed that some of the “visitor” accounts that I set up for family never appear in the log when they view the stream. They’re viewing the camera but I never see any entries in the log that show they are.

  32. says

    Mark,
    I’ve now run into a small problem.
    On my computer the webcam shows up just fine. But some people on a PC cannot see the cam although the rest of the page does display, however. I reloaded flash but that didn’t help. Is there something else that needs to be done to display in Firefox and IE? I think it must be something with the computer and not the browser as it all looks fine on my system in several browsers.
    THANKS,
    Dave

    • says

      Mark,
      I guess the code does not work for any Mac product and it doesn’t seem to run on Windows XP. Is there an alternate code we can use for those?

      • says

        Dave,

        There are two versions of code listed on this page. Try them both. Also, make sure your viewers are using Chrome or Firefox as their browser (or whatever you are using when it works) in order to debug the problem. Right now their are too many variables.

        -Mark

  33. Joe says

    So I just want to go on record and state that the Foscam FI9802W DOES work with this script. Thank you for such a great tool!