2

我有 2 个具有内部服务器页面的 IP 摄像机（即 http:\192.168.1.10\video.html）。此页面从相机接收 jpeg 图像并使用 javascript 自动刷新（加载）。

源代码来自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>

我想做的是建立一个自定义站点，其中包含两个实时提要。我宁愿不使用<iframe>. 我宁愿使用 Javascript 或类似的东西。

我对 HTML 有基本的了解，但很少有 Javascript 经验。显然，我可以查看代码以了解正在发生的事情，但这让我很困惑！

任何帮助，将不胜感激！

4

3 回答 3

3

我猜您可以在本地网络服务器上创建一个新的 HTML 页面（只需从其中一个摄像头复制 video.html）并修改脚本以包含img您正在更新的元素的 ID 和您的摄像头的 IP 地址正在从...获取提要（设置为每 4 秒自动更新一次图像）--（免责声明：空气代码，未经测试）

感谢@AMK 修复了我的代码中的一些愚蠢错误：

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

然后只需设置另一个img标签来接收图像：

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

请注意，您img现在有两个元素，每个元素都有一个唯一的 id，该 id 与摄像机的 IP 地址一起馈送到函数中。

这可能不适用于您的情况，但这应该让您了解如何完成它......

于 2012-10-12T18:56:41.200 回答
1 
    // 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>
于 2014-11-24T19:01:15.823 回答
0

只需将以下 javascript 放在您的页面中，将interval参数更改为您喜欢的：

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

并在 html 中将图像插入到您想要的任何位置，如下所示：

<img id='the_img' src='image.jpg'>
于 2012-10-12T19:00:01.860 回答