5

複数の出力を持つ Axis カメラがあり、そのうちの 1 つは jpg 画像です。この画像は、ロード時にカメラから撮影された静止画です。ページ全体をリロードせずに (30 秒ごとに) 画像をリロードする方法を実装したいと考えていますが、空白の画面が表示されないように、更新する前にコードで画像を完全にダウンロードしたいと考えています。

私が見つけた最も近いものは、この投稿Using AJAX / jQuery to refresh an imageでしたが、違いは、私が持っている画像フィードが php ファイルではなく実際のカメラ自体から来ていることです。私は自分の URL でこれを機能させるためにいくつかの方法を試しましたが、javascript の知識がないために失敗しました。

画像を取得するために現在使用しているコードは、単純な画像タグです...

<img src="[camera ip]/jpg/1/image.jpg">

ブラウザ ウィンドウを更新すると、現在のビデオ ストリームのスナップショットが表示されます。

どんな助けでも大歓迎です！

よろしく、
ハビエル

4

2 に答える 2

2

これをテストするためのさわやかな画像を備えたウェブカメラをオンラインで見つけることができませんでしたが、これはあなたにとってトリックになると思います...または少なくともあなたを本当に近づけます...

<script>
// URL to your cam image
var cam_image = 'http://absdev.ws:8000/jpg/1/image.jpg';

var buffer = {};
function preload() {
    buffer = new Image();
    // attaching the seconds breaks cache
    buffer.src = cam_image + '?' + (new Date()).getTime();
    buffer.onload = function() {
        setTimeout(preload, 30000); // 30 seconds refresh
        document.getElementById('myimg').src = buffer.src;
    }
}
preload();
</script>
于 2012-11-30T22:14:44.267 に答える
0

画像の静的なグループで作業している場合 - ファイル名は既にわかっていて変更されない場合 - 最初にすべてを html にロードし (空白の画面の問題を解決します)、次に jquery プラグインを使用して画像を回転/更新します。 30 秒など、指定した間隔で画像を表示します。

したがって、html は次のようになります。

<ul>
  <li><img src="[camera ip]/jpg/1/image.jpg"></li>
  <li><img src="[camera ip]/jpg/2/image.jpg"></li>
  <li><img src="[camera ip]/jpg/3/image.jpg"></li>
  ...
</ul>

そして、プラグインはそれらを循環します。

プラグインの場合、次の 2 つのいずれかを使用します。

http://nivo.dev7studios.com/

http://jquery.malsup.com/cycle/

幸運を！

于 2012-11-01T19:31:57.220 に答える