Announcement

Collapse
No announcement yet.

A How To Embed Any IP Camera In Webpage Using 1 Line

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    A How To Embed Any IP Camera In Webpage Using 1 Line

    Many people have asked for ways to embed their IP Cameras in webpages having the images from their cameras refresh automatically. Here is a way to do it using one line in a HTML file.

    Works with any IP Camera

    Accessible From ANY Computer, Laptop, Tablet, Phone and TV

    These same methods can be used with many imaging devices as well as refreshing weather picture information automatically at scheduled intervals while setting the size as well. As some examples.

    Some things need to be explained and a working example is also provided.

    You can add as many IP Cameras as needed on the same webpage each only requiring 1 line of HTML code.

    Here is the one line needed in the webpage:

    HTML Code:
    <img src="YourIPCamInfo&t=" width='' onload='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 1000)' onerror='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 5000)' alt='' />
    Example lines using the above for both MJPEG and H.264 Based IP Cameras:

    MJPEG Based Foscam IP Camera:

    HTML Code:
    <img src="http://DDNSorISPIPAddress:PortForCamera/snapshot.cgi?&user=admin&pwd=YourPassword&t=" onload='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 1000)' onerror='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 5000)' alt='' />
    H.264 Based Foscam IP Camera:

    HTML Code:
    <img src="http://DDNSorISPIPAddress:PortForCamera/CGIProxy.fcgi?cmd=snapPicture2&usr=admin&pwd=YourPassword&t=" onload='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 1000)' onerror='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 5000)' alt='' />
    Note: Replace the DDNS or IP Address and Port above as well as the admin and YourPassword with valid IP Camera User Id and their password and leave the &t= at the end before the double quotes.

    You can also add text in the alt='' tag like alt='MyIPCam' as an example. So that when people hover their mouse over the image of your camera they see a name.

    Additionally. If you notice in the first example there is a width='' statement. You can add width='640' for example if your IP Cameras image by default is large to control the size displayed with any value you wish while keeping the aspect ratio height of your IP Cameras image if needed. Of course you can also use height='' as well if needed.

    It's suggested to create a visitor User Id for your IP camera when doing this. So that nobody could use the User Id and Password used to move your camera. Such as an Operator User Level Id. For sure, please NEVER use an Admin User Level Id for your IP Camera for anything that will be public.

    The value of 1000 represents the refresh rate which is 1000 Milliseconds which equals 1 second. If you want your IP Camera to refresh more or less often then please change 1000 to the value of your choice.

    The value of 5000 represents how often an attempt should be made to refresh when there is an error which also is in Milliseconds which equals 5 seconds. If you want to retry refreshes that fail sooner or later then please change 5000 to the value of your choice.

    Working Example ("Which has a 2 minute limit for demonstration purposes included") using a MJPEG based IP Camera:

    http://107.170.59.150/V31/EmbedIPCam...ageOneLine.htm

    The above methods are NOT secure methods. Meaning that they expose the DDNS and/or IP Address location and Port of your IP Camera and a User Id and Password for your IP Camera. The same methods can be done securely as well. In fact the working example shown here is using the secure methods.

    Please see this list for those methods:

    Note: Some images are small in some of the live IP Camera demonstrations. They can be any sizes.

    Complete List With Links To All Live IP Camera Example Demos:

    http://107.170.59.150/

    Don
    Last edited by TheUberOverLord; January 20, 2015, 03:33 AM.

    #2
    Thank you TheUberOverLord.

    Here have been using Zoneminder such that the calls to each of the camera feeds are identical whatever camera is attached; IP or Analog. (many many years).

    I the last couple of years have played with generic IP HD, Ubiquiti Aircams and Grandstream.

    Many new HD IP cameras now provide both H.264 and MJPEG video streaming.

    That said I have not seen any consensus to date relating to methodology of streaming using CGI's and a variety of directories which the CGI's reside.

    Historically MJPEG was easiest to stream where today many cameras have multiple RTSP streams of various pixel resolution et al.

    Can you please provide an example with the Foscam IP HD camera using the following example posted for the Foscam cameras?

    <img src="YourIPCamInfo&t=" width='' onload='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 1000)' onerror='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 5000)' alt='' />
    Is the piece "YourIPCamInfo" equal to what you posted as a src above?

    Yup here mostly utilize VLC to test and when I click on an RTSP stream the browser window does open up a VLC window for the streaming video.

    I haven't tried the above methodology but curious about it embedding an VLC video inside of the browser page.
    - Pete

    Auto mator
    Homeseer 3 Pro - 3.0.0.548 (Linux) - Ubuntu 18.04/W7e 64 bit Intel Haswell CPU 16Gb
    Homeseer Zee2 (Lite) - 3.0.0.548 (Linux) - Ubuntu 18.04/W7e - CherryTrail x5-Z8350 BeeLink 4Gb BT3 Pro
    HS4 Lite - Ubuntu 22.04 / Lenovo Tiny M900 / 32Gb Ram

    HS4 Pro - V4.1.18.1 - Ubuntu 22.04 / Lenova Tiny M900 / 32Gb Ram
    HSTouch on Intel tabletop tablets (Jogglers) - Asus AIO - Windows 11

    X10, UPB, Zigbee, ZWave and Wifi MQTT automation-Tasmota-Espurna. OmniPro 2, Russound zoned audio, Alexa, Cheaper RFID, W800 and Home Assistant

    Comment


      #3
      Originally posted by Pete View Post
      Thank you TheUberOverLord.

      Here have been using Zoneminder such that the calls to each of the camera feeds are identical whatever camera is attached; IP or Analog. (many many years).

      I the last couple of years have played with generic IP HD, Ubiquiti Aircams and Grandstream.

      Many new HD IP cameras now provide both H.264 and MJPEG video streaming.

      That said I have not seen any consensus to date relating to methodology of streaming using CGI's and a variety of directories which the CGI's reside.

      Historically MJPEG was easiest to stream where today many cameras have multiple RTSP streams of various pixel resolution et al.

      Can you please provide an example with the Foscam IP HD camera using the following example posted for the Foscam cameras?

      Is the piece "YourIPCamInfo" equal to what you posted as a src above?

      Yup here mostly utilize VLC to test and when I click on an RTSP stream the browser window does open up a VLC window for the streaming video.

      I haven't tried the above methodology but curious about it embedding an VLC video inside of the browser page.
      You are very welcome.

      You can call me Don. I got this handle because of software I created many years ago. More here:

      http://airforce.togetherweserved.com...heUberOverLord

      The H.264 example in the first post is the Foscam HD IP Camera example syntax for automatic Snapshot refreshes.

      Yes the "YourIPCamInfo" can be replaced with any IP Cameras CGI Snaphot command and the method will refresh that Snapshot command automatically at the interval selected. Each camera can have it's own unique refresh rate.

      As my first post states. I would always use a IP Camera Visitor User Id Level when using the method above for security reasons when it's in the clear. The first post also has a link to show secure methods being used with this method as well.

      There are potential connection limitations when creating direct video streams to the Foscam MJPEG cameras and the Foscam H.264 cameras. This may apply to other IP Brands and their models as well.

      You would need to implement a video server. Because the IP Cameras have a finite limit on the number of concurrent formally logged in connections the camera can support. That limit is four. This limit is any combination of copies of the Standard camera interfaces which are running and logged in. Third-party applications that are formally logged on and connected to the camera and video streams ("For the MJPEG based cameras") not sure ("Need to do testing again") what this maximum number of video streams is for the H.264 based cameras. It's still four even for the H.264 based cameras with any combination shown above minus video streams. This is because ALL these connections formally logon to the camera and because of that are considered long-term connections.

      This means that when this limit is reached. The camera WILL reject ANY connection for the camera to login to the camera, until one of those connections is released. This could/can cause you the camera owner to NOT even be able to logon for example. If four people were viewing the video of your MJPEG camera concurrently.

      You can emulate and create this connection limit yourself to see it with your own eyes. By as one example opening up four browser windows and using the standard camera interface that comes with the camera in those browser windows. Logging into the camera in each browser window. When you open a fifth browser window that logon request will be rejected. Unless/Until you free up one of the connections in use by closing one of the other browser windows.

      Please note: If you happen to have anything currently using one of these four connections already running. You may get rejected before reaching four when using your browser window test above.

      Sadly. Most IP camera owners are not aware of this finite limit. It's usually only when they have many things at the same time logged into the same camera that they see it.

      Whereas when using Snapshots. Those requests use short-term connections and have a maximum limit of 80 concurrent in flight ("Not yet responded to") connections. So in real life about 100 concurrent people requesting Snapshots vs. the maximum of 4 for MJPEG cameras and x for H.264 based cameras. Even if this short-term connection limit is reached because it uses no long-term connections. Reaching the short-term connection limit will never lock out a camera owner as reaching the long-term connection limit can and will.

      So. I would never use a publicly accessible method for live video streams directly to the cameras because of this unless a video server was being used so that only one video stream connection directly to the camera would be required to support the public video server.

      Many Media players, like VLC, FFMpeg and many others can be used on a dedicated system to act as this video server. However even when using a video server. It's very easy especially more so with the H.264 based cameras to reach a ISP monthly bandwidth limit. Which can/could cause that ISP to suspend that Internet connection or add on more charges. The refreshed Snapshot image method at least allows you to control the refresh rate having more control of the bandwidth.

      Here are some links that show the syntax for pulling video streams from Foscam H.264 based cameras:

      http://foscam.us/forum/how-to-fetch-...28.html#p20263

      http://foscam.us/forum/how-to-use-rt...26.html#p23464

      Here is a tool I created that can quickly record/play the RTSP video streams and MJPEG based Foscam camera video streams using FFMpeg:

      http://foscam.us/forum/free-tools-th...58.html#p34609

      Currently the above tool does not support the MJPEG stream for H.264 based Foscam cameras.

      I will soon do some testing to get the maximum video streams that can be run concurrently with the H.264 based cameras. But..The limit of Four still applies even to H.264 based cameras when using the other things mentioned. It's just that video streams for H.264 based cameras now have their own unique pool for connections which are dedicated to video streams only and I need to find out what that pool connection finite limit is for them.

      That said would you ever want the camera to be able to be able to stream directly say on average, 4 people at the same time 24/7/31 for a month? Even with a video server being used to support more then any maximum the cameras can support at the cameras location for example. One could still have ISP bandwidth limitation issues because of this.

      I have heard "Stories" I call them this because none of them have ever been confirmed. That people have had others create multiple connections to their cameras so that their ISP account would become suspended for the rest of that month. How true these stories are. Is anyone's guess.

      Above and beyond all the potential issues when using video streams which are publicly accessible referenced above. There is also the compatibility issue. Not every device which is Internet browser capable can support live video. Whereas these Snapshot refreshed image methods work with any Internet browser capable device which is running any OS ("Operating System") and using any browser. From Computers to Tablets, to Phones and TVs. With no compatibility issues of any kind.

      I mention this because there are private and emergency uses for this method besides the public uses.

      Imagine yourself stranded someplace without any of your normal Internet browser capable devices with you. Pondering if your IP Camera is online or not at the same time you were with someone you knew. Who had a Internet browser capable device at that time but they had no app on it for your IP Camera on their device. If you stored a copy of these methods. Say as a Email attachment. You could use their device to access your Email and grab that email attachment run it on their device. Even if their device had no app for your camera and be sure that your camera was online.

      You could also store a copy of this method on any of your Internet browser capable devices and use that copy as needed from them for private use as well.

      Don
      Last edited by TheUberOverLord; March 28, 2014, 08:13 AM.

      Comment


        #4
        A How To Embed Any IP Camera In Webpage Using 1 Line

        Don, this is interesting information. But how does it relate to HS3? How would the "one line of code" be used in HS3?

        Steve Q


        Sent from my iPad using Tapatalk HD
        HomeSeer Version: HS3 Pro Edition 3.0.0.368, Operating System: Microsoft Windows 10 - Home, Number of Devices: 373, Number of Events: 666, Enabled Plug-Ins
        2.0.83.0: BLRF, 2.0.10.0: BLUSBUIRT, 3.0.0.75: HSTouch Server, 3.0.0.58: mcsXap, 3.0.0.11: NetCAM, 3.0.0.36: X10, 3.0.1.25: Z-Wave,Alexa,HomeKit

        Comment


          #5
          Originally posted by Steve Q View Post
          Don, this is interesting information. But how does it relate to HS3? How would the "one line of code" be used in HS3?

          Steve Q


          Sent from my iPad using Tapatalk HD
          Thanks.

          I would need to see the text of what you are currently using to do same posted here. There are so many machinations of how someone could be doing this currently. That I can't answer you in any general way without seeing specifics of how you are doing it now.

          Of course User Supported Scripts can be used as well. Of course this same single line method can be implemented in VB and other scripting languages not just JavaScript.

          I have seen others mention issues with refreshing weather images which this method can also be used for. While this method can be used for any IP Camera and imaging devices that support pulling Snapshots using one line of code using HTTP/HTTPS. The same method can be used to pull images at regular intervals that change as well, again using one line of code.

          It can also be used to poll devices for their status and receive the response as text not as an image securely at regular intervals using one line of code to do so per device.

          The goal was/is to minimize the lines of code required to perform repetitive tasks at a specific interval that can be used without additional security and with additional security with one line of code per task. Minimizing what other more complex scripting methods might be being used now. To do these same things. Making it easier and less complex for users to create/add tasks then what it might be today.

          Additionally. It's important to not lose sight of the fact that this method can also be combined with the secure method protecting ANY IP Camera data from being exposed over the Internet connection you are using at the time.

          Examples ("Just a few of the possible ones"):

          1. Your currently using some free Internet connection. Do you really wish to be accessing your IP Camera directly. Exposing the DDNS/IP Address, Port and User credentials over that Internet connection with a HTTP connection?

          2. Your at work and there is a proxy and/or limitations on accessing your IP Cameras because the workplace Internet connection only allows browsers there to use ports 80 and 443. Yet your IP Camera has a different Port number?

          3. You subscribe to a weather service that requires you to use a User Id and Password to grab images. Combining the secure method with this method allows you to get those images without exposing any User credentials while doing so. This same one line method can be used for text as well such as current temp or forecast.

          4. You have device(s) that you want to send a command to at specific intervals, but you don't want to expose the IP Address, Port and any User credentials that those device(s) may require while doing so over the current Internet connection you are using. You could use this single line of code per device, combined to do that with the secure method. Again those device(s) could respond with text using this method as well. Such as polling device(s) for their status at specific intervals, using one line to do so and securely. Without exposing any IP Address, Port or User credentials for those devices while doing so.

          Don
          Last edited by TheUberOverLord; March 28, 2014, 12:48 PM.

          Comment


            #6
            Thank you Don and will visit referring website.

            Yup here old ZM box is running 16 streams; 8 analog and 8 which are mixed IP SD and HD.

            Zoneminder box #2 is pure RTSP now running a hodgepodge of IP; no analog.

            I am also playing with a Grandstream encoder for use with the HAI Leviton legacy video to touchscreen server. Works fine.

            Homeseer 2/3 only access the ZM box and do not go directly to the cameras but playing also with snapshots and stuff.
            Last edited by Pete; March 28, 2014, 02:36 PM.
            - Pete

            Auto mator
            Homeseer 3 Pro - 3.0.0.548 (Linux) - Ubuntu 18.04/W7e 64 bit Intel Haswell CPU 16Gb
            Homeseer Zee2 (Lite) - 3.0.0.548 (Linux) - Ubuntu 18.04/W7e - CherryTrail x5-Z8350 BeeLink 4Gb BT3 Pro
            HS4 Lite - Ubuntu 22.04 / Lenovo Tiny M900 / 32Gb Ram

            HS4 Pro - V4.1.18.1 - Ubuntu 22.04 / Lenova Tiny M900 / 32Gb Ram
            HSTouch on Intel tabletop tablets (Jogglers) - Asus AIO - Windows 11

            X10, UPB, Zigbee, ZWave and Wifi MQTT automation-Tasmota-Espurna. OmniPro 2, Russound zoned audio, Alexa, Cheaper RFID, W800 and Home Assistant

            Comment


              #7
              Originally posted by Pete View Post
              Thank you Don and will visit referring website.

              Yup here old ZM box is running 16 streams; 8 analog and 8 which are mixed IP SD and HD.

              Zoneminder box #2 is pure RTSP now running a hodgepodge of IP; no analog.

              I am also playing with a Grandstream encoder for use with the HAI Leviton legacy video to touchscreen server. Works fine.

              Homeseer 2/3 only access the ZM box and do not go directly to the cameras but playing also with snapshots and stuff.
              You are very welcome.

              Don

              Comment


                #8
                @Don,

                Here over the last couple of years purchased a "few" different types of SD IP cameras. Thinking one of the first "test" IP cameras was the Panasonic. From there tested the Foscam and a few others.

                The above noted will be testing your methodology initially with SD IP cameras and will post provided HTML links.

                I have though moved to testing primarily Grandstream IP HD cameras mostly related to the included SIP stuff in their OS. That and I purchased many Grandstream IP HD boards and lens boards. I have pieces of these all over my little work bench. The camera boards are tiny.

                Part of the endeavor here is to DIY a "doorbell" camera using the SIP functions included in the OS of the Grandstream.
                - Pete

                Auto mator
                Homeseer 3 Pro - 3.0.0.548 (Linux) - Ubuntu 18.04/W7e 64 bit Intel Haswell CPU 16Gb
                Homeseer Zee2 (Lite) - 3.0.0.548 (Linux) - Ubuntu 18.04/W7e - CherryTrail x5-Z8350 BeeLink 4Gb BT3 Pro
                HS4 Lite - Ubuntu 22.04 / Lenovo Tiny M900 / 32Gb Ram

                HS4 Pro - V4.1.18.1 - Ubuntu 22.04 / Lenova Tiny M900 / 32Gb Ram
                HSTouch on Intel tabletop tablets (Jogglers) - Asus AIO - Windows 11

                X10, UPB, Zigbee, ZWave and Wifi MQTT automation-Tasmota-Espurna. OmniPro 2, Russound zoned audio, Alexa, Cheaper RFID, W800 and Home Assistant

                Comment


                  #9
                  Originally posted by TheUberOverLord View Post
                  Many people have asked for ways to embed their IP Cameras in webpages having the images from their cameras refresh automatically. Here is a way to do it using one line in a HTML file.

                  - snip -

                  Don
                  Don,
                  Thanks
                  for this code. I had been using a java script I had found years ago and this is much better.
                  Dick
                  HS PRO 2.5.0.81, WinXP, IE8, Shuttle XS35V3, 2.13GHz, 4GB, 40GB SSD drive, AC-RF2, ADIOcelot, Message Server, TI103, SNEVL CID, pjcOutlook, MCSTemperature, Powertrigger, BLBackup, BLFloorplan, BLIcon, BLOccupied, BLRadar, BLRfid, BLLogMonitor, ACPUPSD, UltraECM, WeatherXML & Stipus' script connector. 500+ devices, 260+ events, 1-wire weather station + temp/humidity sensors & Oregon Scientific temp & humidity sensors & 2 Brultech ECM-1240s

                  Comment


                    #10
                    Originally posted by RAM View Post
                    Don,
                    Thanks
                    for this code. I had been using a java script I had found years ago and this is much better.
                    You are very welcome. What's also good about this is it deals with errors.

                    As an example. If your IP Camera was offline, you don't want to be creating a "Race Condition" where when there is no error you are quickly going back to get refreshed images. Because the "On Error" logic is there in this example there would be a 5 second delay between requests when errors occur vs. only milliseconds, without that logic. Of course you can modify that error delay time to be more or less then the 5 seconds shown in the example.

                    Don

                    Comment


                      #11
                      @Don,

                      Yup; here updated the Zoneminder boxes to Ubuntu 14.04 and separated one box to do 8 analog feeds plus a few miscellaneous SD IP camera feeds. Box number 2 is just running with HD IP camera feeds.

                      Today fixed an issue that I was having with the time sync on the newer IP cameras. The times were all off due to a glitch in my PFSense firewall.

                      Running the CCTV off the two boxes feeds two systems today with no direct IP camera connections but rather just one configuration for the ZM boxes for a reverse proxy kind of configuration keeping the IP cameras access local only.

                      Now mostly playing around with different mechanisms of video compression codecs for HD stuff as installed on the ZM box to save space and CPU work. Sort of how much data and compression you can use to stream HD more easily these days.
                      Last edited by Pete; May 22, 2014, 08:23 AM.
                      - Pete

                      Auto mator
                      Homeseer 3 Pro - 3.0.0.548 (Linux) - Ubuntu 18.04/W7e 64 bit Intel Haswell CPU 16Gb
                      Homeseer Zee2 (Lite) - 3.0.0.548 (Linux) - Ubuntu 18.04/W7e - CherryTrail x5-Z8350 BeeLink 4Gb BT3 Pro
                      HS4 Lite - Ubuntu 22.04 / Lenovo Tiny M900 / 32Gb Ram

                      HS4 Pro - V4.1.18.1 - Ubuntu 22.04 / Lenova Tiny M900 / 32Gb Ram
                      HSTouch on Intel tabletop tablets (Jogglers) - Asus AIO - Windows 11

                      X10, UPB, Zigbee, ZWave and Wifi MQTT automation-Tasmota-Espurna. OmniPro 2, Russound zoned audio, Alexa, Cheaper RFID, W800 and Home Assistant

                      Comment

                      Working...
                      X