スマホでペット用監視カメラを作ってみた

はじめに

スマートフォンを使った監視カメラシステムを作ってみました
作ろうと思い立ったきっかけですが、昨年ワンちゃんを一頭飼い始めて
最近もう一頭増えたのと、その子が保護犬ということでなかなか目が離せないということもあり、スマホを使って外出先から自宅のワンちゃんの様子を確認出来る仕組みを作ってみようと思ったのがきっかけです

1頭目	2頭目
チョコ(2歳♂)	コロネ(5歳♀)

アプリの仕組みについて

作成したアプリはカメラ側と閲覧側の2種類あり、それぞれ以下の処理を行っています

[カメラ側]
スマートフォンでカメラ撮影用のサイトへアクセスする
一定時間毎にカメラで撮影し、撮影した画像ファイルをサーバへアップロードする

[閲覧側]
PCかスマートフォンでカメラで撮影した画像を閲覧出来るサイトへアクセスし、閲覧する
複数台設置する可能性があるので閲覧するカメラを切り替えられるようにする

ソースコード

カメラアプリの主要なコードは以下になります
スマートフォンのカメラにアクセスする必要があるので、mediaDevicesのgetUserMediaメソッドを実行してアクセスを許可します

カメラ使用許可

    navigator.mediaDevices.getUserMedia({
        video: { facingMode: 'environment', width: w, height: h },
        audio: false
    }).then( handleSuccess )
    .catch(err => {
        console.log( JSON.stringify(err) );
    });

※facingModeを「user」にすると、フロントカメラが起動します

画像アップロード

const objFormData = new FormData();
videoCanvasObject.style.display = 'block';
videoCanvasContext.drawImage( videoObject, videoObject.style.left, videoObject.style.top, videoCanvasObject.width, videoCanvasObject.height );
videoCanvasObject.style.display = 'none';
const blob = dataURItoBlob( videoCanvasObject.toDataURL() );
objFormData.append( 'file', blob );
objFormData.append( 'camera_no', cameraNo );
ajaxSendFormData( SERVER_URL, objFormData, 'appCameraRecvEndCallback' );

画像ファイル(バイナリデータ)をアップロードする必要があるので、FormDataにデータをセットしてPOSTしています

[閲覧アプリ側]
こちらはサーバ上の画像ファイルを取得して表示しているだけで特別特殊な処理はしていません
閲覧する時に、1頭目の様子だけ確認したいということがあるかもしれないと思ったので
表示するカメラの画像を切り替えられるようにしました

1台目表示	2台目表示

両方のカメラ画像を同時に表示すると以下のように見ることが出来ます

運用イメージ

ケージの横にスマホを置いて撮影しています

今は2台運用ですが、スマホがあれば簡単にカメラを増やすことが可能です

今後の展望など

以下のようなことが出来ると良いなと思っています
・閲覧側から撮影側のスマホに向かって音声を送れるようにする
→ワンちゃんに向かって話しかけられるようになると安心させられるかも
・画像だけでなく動画も撮影出来るようにする

最後に

外出中に自宅のワンちゃんの様子が見れるようになったので安心して外出出来るようになりました
更に機能を追加し、これからもワンちゃんと安心して暮らしていけるようにしたいと思います