javascript - Multiple IP Camera Feeds On Same Webpage - Stack Overflow

IT技术

更新时间：2025-04-091

admin管理员组
文章数量:1397184

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!

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 Improve this question edited Oct 12, 2012 at 18:49 spolto 4,5514 gold badges28 silver badges34 bronze badges asked Oct 12, 2012 at 18:43 nweston 631 gold badge2 silver badges5 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

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 acplish it...

    // JS 9 CAM...

    //LAN.JS add http : // if you need

    var URL11='IP:Port/snapshot.cgi?&user=XXXXX&pwd=XXXXX';
    var URL12='IP:Port/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=XXXXX&pwd=XXXXX';
    var URL13='IP:Port/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=XXXXX&pwd=XXXXX';
    var URL14='IP:Port/snapshot.cgi?&user=XXXXX&pwd=XXXXX';
    var URL15='IP:Port/snapshot.cgi?&user=XXXXX&pwd=XXXXX';
    var URL16='IP:Port/snapshot.cgi?&user=XXXXX&pwd=XXXXX';
    var URL17='IP:Port/snapshot.cgi?&user=XXXXX&pwd=XXXXX';
    var URL18='IP:Port/snapshot.cgi?&user=XXXXX&pwd=XXXXX';
    var URL19='IP:Port/snapshot.cgi?&user=XXXXX&pwd=XXXXX';

    var L=window.location.search;
    L=L.substring(1,5);
    if(L=="")L=1;
    NewImage=new Image();
    var I=new Date().getTime();
    var imgW=320*L;

    function kamera1011(){document.getElementById("imgDisplay11").src=URL11+'&'+I++;};
    function kamera1012(){document.getElementById("imgDisplay12").src=URL12+'&'+I++;};
    function kamera1013(){document.getElementById("imgDisplay13").src=URL13+'&'+I++;};
    function kamera1014(){document.getElementById("imgDisplay14").src=URL14+'&'+I++;};
    function kamera1015(){document.getElementById("imgDisplay15").src=URL15+'&'+I++;};
    function kamera1016(){document.getElementById("imgDisplay16").src=URL16+'&'+I++;};
    function kamera1017(){document.getElementById("imgDisplay17").src=URL17+'&'+I++;};
    function kamera1018(){document.getElementById("imgDisplay18").src=URL18+'&'+I++;};
    function kamera1019(){document.getElementById("imgDisplay19").src=URL19+'&'+I++;};
    function kamera1020(){document.getElementById("imgDisplay20").src=URL20+'&'+I++;};
    function kamera1021(){document.getElementById("imgDisplay21").src=URL21+'&'+I++;};
    function kamera1022(){document.getElementById("imgDisplay22").src=URL22+'&'+I++;}

    <! HTML-index.htm >
<html>
<script language="JavaScript" src="js/lan.js"></script>
    <body onload="kamera1011(); kamera1012(); kamera1013(); kamera1014(); kamera1015(); kamera1016(); kamera1017(); kamera1018(); kamera1019();>

    <table border="1" width="100%" cellspacing="1" cellpadding="1">

    <tr>
    <td width="100%" align="center">

    </td>
    <td>
    <a href="index.htm">
    Updates Cams...
    </a>
    </td>
    </tr>

    <tr>
    <td>
    <! Cam 1 >
    <img id="imgDisplay11" border="1" width="412" height="318" onload=setTimeout("kamera1011()",10) onerror=setTimeout("kamera1011()",100)>
    </td>

    <td>
    <! Cam 2 >
    <img id="imgDisplay12" border="1" width="412" height="318" onload=setTimeout("kamera1012()",10) onerror=setTimeout("kamera1012()",100)>
    </td>

    <td>
    <img id="imgDisplay13" border="1" width="412" height="318" onload=setTimeout("kamera1013()",10) onerror=setTimeout("kamera1013()",100)>

    </td>
    </tr>

    <tr>
    <td>
    <img id="imgDisplay14" border="1" width="412" height="318" onload=setTimeout("kamera1014()",10) onerror=setTimeout("kamera1014()",100)>
    </td>

    <td>
    <! Cam 5 >
    <img id="imgDisplay15" border="1" width="412" height="318" onload=setTimeout("kamera1015()",10) onerror=setTimeout("kamera1015()",100)>
    </td>

    <td>
    <! Cam 6 >
    <img id="imgDisplay16" border="1" width="412" height="318" onload=setTimeout("kamera1016()",10) onerror=setTimeout("kamera1016()",100)>
    </td>
    </tr>

    <tr>
    <td>
    <! Cam 9 >
    <img id="imgDisplay17" border="1" width="412" height="318" onload=setTimeout("kamera1017()",10) onerror=setTimeout("kamera1017()",100)>
    </td>

    <td>
    <! Cam 8 >
    <img id="imgDisplay18" border="1" width="412" height="318" onload=setTimeout("kamera1018()",10) onerror=setTimeout("kamera1018()",100)>
    </td>

    <td>
    <! Cam 9 >
    <img id="imgDisplay19" border="1" width="412" height="318" onload=setTimeout("kamera1019()",10) onerror=setTimeout("kamera1019()",100)>
    </td>
    </tr>
    </table></html>

Just put the following javascript in your page, changing the interval parameter to your like:

<script type='text/javascript'>
        var interval = 5; //Interval in seconds, to retrieve images
        setInterval(function loadImage() {
            var now=new Date();
            document.getElementById('the_img').src='image.jpg?'+now.getTime();
        }, interval * 1000);
</script>

and in the html just insert the image wherever you want, like this:

<img id='the_img' src='image.jpg'>

本文标签： javascriptMultiple IP Camera Feeds On Same WebpageStack Overflow

版权声明：本文标题：javascript - Multiple IP Camera Feeds On Same Webpage - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1744129123a2592088.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

javascript - Multiple IP Camera Feeds On Same Webpage - Stack Overflow

3 Answers 3

更多相关文章