Question

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

我想要做的是构建一个自定义网站，其中包含两个直播Feed。我不想使用<iframe>。我宁愿使用Javascript或类似的东西。

我对HTML有基本的了解，但很少有Javascript经验。我可以很明显地查看代码，了解发生了什么，但这让我很难过！

任何帮助将不胜感激！

Answer 1

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

谢谢@ A.M.K。修复我的代码中的一些愚蠢错误：

<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地址一起提供给该函数。

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

Answer 2

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

Answer 3

只需将以下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'>

同一网页上的多个IP摄像头源

3 个答案: