Home/ Questions/Q 8669797
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T18:33:46+00:00

I have 2 IP Cameras that have a internal server page (i.e. http:\192.168.1.10\video.html). This

  • 0

I have 2 IP Cameras that have a internal server page (i.e. http:\192.168.1.10\video.html). This page receives jpeg images from the camera and auto-refreshes (loads) using javascript.

Source code from the video.html

<html>
<head>
    <title>ipCam - JPEG Video</title>
    <style type='text/css'>
        html,body
        {
            background-color:white;
            color:black;
            font-family:arial;
            font-size:12pt;
        }
        a,a:visited,a:active
        {
            color:grey;
            text-decoration:none;
        }
        a:hover
        {
            text-decoration: underline;
        }
        h1
        {
            background-color:black;
            color:white;
            padding:5px;
        }
        h2
        {
            background-color:lightgrey;
            padding:5px;
        }
    </style>
    <script type='text/javascript'>
        function loadImage()
        {
            var now=new Date();
            document.getElementById('the_img').src='image.jpg?'+now.getTime();
        }
    </script>
</head>
<body>
    <img id='the_img' src='image.jpg' onload='loadImage()' onerror='loadImage()'>
    <br><br>
    <a href='.'>Home</a>



</body>

What I would like to do is build a custom site that has both live feeds in it. I would prefer not to use <iframe>. I would rather use Javascript or something of the sort.

I have a basic understanding of HTML but very little Javascript experience. I can obviously look at the code a get a good idea of what is going on, but this has stumped me!

Any help would be appreciated!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I would guess that you could create a new HTML page (just copy the video.html from one of the cameras) on a local webserver and modify the script to include the ID of the img element you are updating and the IP address of the camera you are grabbing the feed from…something like this (which is set to automatically update the images every 4 seconds) — (disclaimer: air code, not tested)

    Thanks @A.M.K. for fixing some stupid mistakes in my code:

    <script type='text/javascript'>         
    function loadImage(imgID, address)         
    {             
        var now=new Date();
        document.getElementById(imgID).src='http://' + address + '/image.jpg?'+now.getTime();
    }          

    setInterval(function() {
        loadImage("the_img_1", "192.168.0.1");
        loadImage("the_img_2", "192.168.0.2");
    }, 4000); //Interval to refresh at, in milliseconds
</script>

    Then just setup another img tag to receive the image:

    <body>
    <img id='the_img_1' src='http://192.168.0.1/image.jpg'>     
    <br><br>     
    <img id='the_img_2' src='http://192.168.0.2/image.jpg'>

    <a href='.'>Home</a>    
</body>

    Note that you have two img elements now, each with a unique id which is fed to the function along with the IP address of the camera.

    That may not work exactly in your situation, but that should give you an idea of how to accomplish it…

    • 0