Atomcamは、安価に手に入り、小型でかつ屋外使用も可能なため非常に使いやすいネットワークカメラです。
ただ、純正のアプリがよく落ちるのと、APIなどが公開されているわけではないので、凝ったことをしようとするとびみょーに使い勝手が良くない。。
そこで、有志の方々（mnakada氏、bakueikozo氏）が開発してくれたatomcam_toolsを使って、まずはWebブラウザ上で映像確認を行えるようにします
リンク
atomcam_toolsとは
atomcam_toolsは、こちらのGithubにて公開されているatomcamの拡張ツールです。
SDカードに指定ファイルを保存するだけで、atomcam_tooolsによって拡張された純正では使用できない機能が使用可能になります
・Webブラウザからのアクセス
・webhook機能
・動体検知の不感知機関の短縮などなど
詳細はリンク先の最新情報を確認お願いします。
また、リンク先にも記載されていますが、atomcam_toolsを使用する場合はすべて自己責任です。
他人に迷惑をかけることはやめましょう。
Webブラウザでの画像表示
atomcamの画像取得方法
画像取得には、atomcam_toolsの現時刻の映像をjpgの画像として取得する機能を用いる。
実施することは非常にかんたんで、下記のアドレスにアクセスするだけで、画像を取得できます。
http://"atomcamのIPアドレス"/cgi-bin/get_jpeg.cgi
atomcam_toolsはmNDSに対応しているため、IPアドレスではなく設定したデバイス名（デフォルトだとatomcam）を使ってアクセスすることも可能です。
http://atomcam.local/cgi-bin/get_jpeg.cgi
画像の定期更新
上記の画像取得方法は1回のみの画像取得のため、atomcamの画像を更新するためには、Webブラウザでリロードし続ける必要がある。
それは非常に手間なので、画像を自動で再取得するスクリプトを記載したHTMLを使用する。
使用する場合は、下記をHTMLファイルとして自身のデスクトップやWebサーバ上に保存し、そのファイルを開いてください。
<html>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script>
<head>
<title>atomcam</title>
<meta charset="utf-8">
<style>
.thumnail-box{
display: flex;
flex-wrap:wrap;
padding-left: 0px;
}
.thumnail-box li {
width: calc(100%/2);
padding:5px 5px;
box-sizing:border-box;
list-style: none;
}
.thumnail-box li img {
max-width:100%;
height: auto;
border:solid 2px #ccc;
}
</style>
</head>
<body>
<!--サムネイルで複数の画像を表示。クリックすると拡大して表示-->
<ul class="thumnail-box">
<li>
<a id="link1" href="http://"1個目のatomcamのIPアドレス"/cgi-bin/get_jpeg.cgi" data-lightbox="group">
<img name="atomcam1" src="http://"1個目のatomcamのIPアドレス"/cgi-bin/get_jpeg.cgi">
</a>
</li>
<li>
<a id="link2" href="http://"2個目のatomcamのIPアドレス"/cgi-bin/get_jpeg.cgi" data-lightbox="group">
<img name="atomcam2" src="http://"2個目のatomcamのIPアドレス"/cgi-bin/get_jpeg.cgi">
</a>
</li>
<script type="text/javascript">
cam1 = new Image();
cam1.src = document.atomcam1.src;
cam2 = new Image();
cam2.src = document.atomcam2.src;
webcamTimer(); //*1
function webcamTimer() {
var now = new Date();
//a要素を取得する
let link1 = document.getElementById('link1');
//キャッシュ対策として画像取得urlの後ろに時刻を追加する
document.atomcam1.src = cam1.src + "?" + now.getTime(); //*2;
//追記したurlをa要素のhref属性に設定する
link1.setAttribute('href', document.atomcam1.src);
let link2 = document.getElementById('link2');
document.atomcam2.src = cam2.src + "?" + now.getTime();
link2.setAttribute('href', document.atomcam2.src);
//5000ms=5sごとの更新
setTimeout("webcamTimer()",5000);
}
</script>
</body>
</html>
上記のAtom cam2の画像の出典元
コメントを投稿