6

次の HTML Web ページがあります。

<html>
<body>
<IMG SRC='http://85.46.64.155/axis-cgi/mjpg/video.cgi'>
</body>
</html>

この Web ページには、MJPEG データをストリーミングする IP カメラのフィードが表示されます。ここで上記のコードを試すことができます: http://jsfiddle.net/jU4aq/ (IE からは動作しません)

私の質問は、そのフィードのスナップショットを作成する方法です。基本的に、ユーザーがクリックするとダイアログがポップアップし、画像を保存するオプションが表示されるボタンを追加したいと考えています。

4

3 に答える 3

3

ストリームは現在機能していないようですが、次のようなキャンバス JavaScript を少し試してみてください。

<html>
<body>
<IMG id="myImage" SRC='http://85.46.64.155/axis-cgi/mjpg/video.cgi'>

<input type="button" id="save" value="Save to PNG"> 

<script type="text/javascript">
document.getElementById('save').onclick = function () {

var c = document.createElement('canvas');
var img = document.getElementById('myImage');
c.width = img.width;
c.height = img.height;
var ctx = c.getContext('2d');


ctx.drawImage(img, 0, 0);
//window.location = c.toDataURL('image/png');
window.open(c.toDataURL('image/png'))
};

</script>

</body>
</html>
于 2011-02-28T18:25:21.663 に答える
3

AXIS API を使用してスナップショットを取得します。ここから取得できます: http://www.axis.com/techsup/cam_servers/dev/cam_http_api_index.php

あなたの場合、URLは「http://your.server/axis-cgi/jpg/image.cgi」です

また、解像度や圧縮などの追加パラメーターを使用することもできます

于 2013-06-13T07:34:21.760 に答える
1

一部の IP カメラには、スナップショットのパスがあります。たとえば、Vivotek は「/cgi-bin/viewer/video.jpg?streamid=0」で実行されます。

「src」属性としてその URL を持つ IMG DOM 要素を作成する JS イベントをトリガーする HTML ボタンを設定できます。ただし、クロスドメインの問題http://en.wikipedia.org/wiki/Same_origin_policyを回避する必要があるでしょう。

私がよく目にする解決策は、php、node、python、ruby などのサーバー側言語を使用して、スナップショットをダウンロードし、Web ページの公開ファイルとして保存することです。

于 2011-08-16T17:26:20.953 に答える