3

カメラからの画像を画像コントロールに継続的に供給するJavaScriptを含む単純なHTMLページがあります。私の懸念は、Google Chrome でリソースを見ているときに、同じ画像ファイル名で何度もいっぱいになっていることです。新しく更新された画像ごとにコピーが作成されているようです。

これについて心配する必要がありますか？キャッシュがいっぱいになったり、それらの線に沿って何かが起こる可能性はありますか? それとも、ブラウザはこれを尊重し、それに応じて処理しますか?

ちょうど今、この質問を入力しているときに、実際に画像で過負荷になったかのように、Google Chrome の開発パネルが私のこのページから消えました。だからこれは良くないと思います。ただし、イメージのストリームは引き続き設計どおりに機能します。

現在、毎秒2フレームで、これが私のコードです:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Camera View</title>
    <script type="text/javascript" language="javascript">
        var camurl = "";
        var fps = 1;
        var loop = null;

        onload = function() {
            camurl = getParameterByName('camurl');
            fps = getParameterByName('fps');            
            LoopProc();
        }

        onunload = function() {
            if (loop != null) 
                clearTimeout(loop);
        }

        function getParameterByName(name) {
            name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
            var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
                results = regex.exec(location.search);
            return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
        }

        function DelayTime() {
            if (fps < 1) fps = 1;
            return (1000 / fps);
        }

        function NewUrl() {
            return camurl + "#time=" + new Date().getTime();
        }

        function LoopProc() {
            document.getElementById("CamImage").src = NewUrl();
            loop = setTimeout('LoopProc();', DelayTime());
        }
    </script>
</head>
<body>
    <img id="CamImage" src="" alt="" />
</body>
</html>

そして、このページへのサンプル呼び出し:

http://localhost:8081/?fps=2&camurl=http://192.168.1.150/image.jpg

キャッシュにトリックを使用していることに注意してください-NewUrl()追加している関数#time=[datetime]で、キャッシュが新しい画像であると認識できるようにします。

camurlこれは、クエリ文字列とは別の画像 URL を使用して、ネット上の任意の画像で実際にテストできます。このシナリオをテストするために必ずしもカメラである必要はありません。

アップデート

20 時間実行した後、フレーム レート 3 fps の Web ブラウザー (Google Chrome) でまったく問題はありません。これは ~3,600 フレームで、それぞれが ~165 KB です。つまり、半分以上のギグがダウンロードされます-ブラウザにまったく問題はありません. しかし、開発ツールは、開いてから 30 分も経たないうちにクラッシュしました。

4

1 に答える 1