2

内部サーバーページ（つまり、http：\ 192.168.1.10 \ video.html）を持つ2台のIPカメラがあります。このページは、カメラから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

ローカルWebサーバーで新しいHTMLページを作成し（カメラの1つから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現在、2つの要素があり、それぞれがカメラのIPアドレスとともに関数に供給される一意のIDを持っていることに注意してください。

それはあなたの状況では正確に機能しないかもしれませんが、それはあなたにそれを達成する方法のアイデアを与えるはずです...

于 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 に答える