canvasを使って動体感知。BLOGアソビュー株式会社のテックブログ2020-01-14canvasを使って動体感知。canvas犬アレルギーだけど犬が大好きな相原(@raihara3)です。実家で定期的に起こる、ワンコのとある事件の犯人を捕まえるべくcanvasを活用して簡単につくった監視ツールの紹介です。名前の通り、トイレの話です。汚い表現は極力控えていますが、苦手な方はご注意ください。実家には現在3匹のワンコがいます。犬あるある「他の子の排泄物を口にしてしまう子」がうちにもいるんです...母性本能で良い事なんですが、みんな成犬なのでやめて欲しい...犯人はもう分かっています。(なぜ分かったかは省略)でも、いつも人間の目を盗んで犯行を行う為証拠もなく、注意できずにいます。差分がある場合は、被疑者が近づいては危ないので(4)(5)のような流れになります。排泄物あり)仕組み※この先折り紙を丸めたものが排泄物として登場します。15000)モーション検出Diffy.jsというライブラリを使用しました。フレームを少しずらしたWebカメラのスナップショットを取得し、ハイコントラストの差分があれば"モーション検出"される仕組みです。トイレに末っ子がやってきました。15に映像を分割し、matrixに白〜黒のカラーコードが配列で渡されます。差分がなければ白が入ります。モーション検出の条件に設定している割合は、カメラからの距離や映り込む被写体の大きさによって前後すると思うので要調整です。動きがなくなった5秒後に最初の状態と変わりないか確認します。}}dataプロパティで取得したRGBAから+-30を許容値としました。これは白のトイレシートと排泄物の明暗差からざっくり決めました。差分が検出されると人間に向けた通知音を流します。trueの状態でモーション検出すると、音と共にcanvasから写真のダウンロードリンクを生成します。音といっても、あまりビックリさせても良くないので知らない犬の鳴き声にしてみました。canvas.toDataURL("image/jpeg");document.getElementById('evidence-box').appendChild(aTag);この音に気を引かれてやめてくれるか、人間が駆けつけて止めるか、です。被疑者の長女がやってきました。音のする方を気にしてくれてます。止めることができなくても、リンクから画像をダウンロードすればしっかり証拠が手に入ります。排泄物がある状態ではモーションを検出している間、5秒おきに写真を撮り続けます。その為ただトイレをしにきただけだった、という場合もちゃんと確認できます。毎回人間の目を盗んで犯行を行うなんて賢いけど、しっかり撮ってるからね...これから取り締まっていこうと思います。13:06canvasを使って動体感知。canvasを使って動体感知。月別アーカイブ検索はてなブログをはじめよう!asoviewtechさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。