みかづきブログ・カスタム

基本的にはちょちょいのほいです。

OpenCV.js

OpenCV.jsで映像を二極化して白い部分をトラッキングする 📷

赤外線カメラで再規制反射材を撮影して、再帰性反射材をトラッキングすることを目指しました。まず、こちらが赤外線カメラの前で再規制反射テープを振り回している映像です。 今回は、こちらの映像をCanvasにレンダリングした後、OpenCV.jsを使って、❶ 二極…

OpenCV.jsでスマートフォンのカメラを使った動体検知を実装する 📷

かつて、 OpenCV.jsを使ってフレーム差分のみを表示するDEMO をつくりました。blog.kimizuka.orgしかし、若干複雑かつ、取り回しにくいコードになってしまっていたため、今回はフレーム差分を検知した際にコールバックイベントを実行するだけのシンプルめな…

OpenCV.jsを使って、グリーンバック撮影用のカメラをウェブページ上で実装する 🟩

はじめに 今回つくったもの 動作原理 ソースコード index.html index.js index.css 実装時のあれこれ RGBからHSVへの変換 赤の取得 マスク画像との差分の取り方 video要素の消し方 今回使用した色見本 おわりに はじめに この記事は OpenCV Advent Calendar …

OpenCV.jsを使ってカメラで撮影した映像にブラーをかける際はksizeに大きな値を入れすぎないようにする 📷

medianBlur、GaussianBlur、blurを使えば簡単に画像にぼかすことができますが、それなりのFPSを出したい場合は注意が必要です。docs.opencv.org docs.opencv.org docs.opencv.org基本的にどれも使い方に大差はないのですが、今回はmedianBlurで実装してみま…

OpenCV.jsを使って画像から特定の範囲の色が使われている部分だけを抽出し、その割合を算出する 🎨

inRange関数 を使えば、特定の範囲の色のピクセルのみを抽出することができます。docs.opencv.org特定の範囲の色の指定方法ですが、今回はHSVを使って指定しました。ja.wikipedia.orgRGBからHSVに変換する際の選択肢として、COLOR_RGB2HSV と COLOR_RGB2HSV_…

OpenCV.jsを使って2枚の画像の差分を表示する 🖼

blog.kimizuka.org前回の記事がもりもりだったのですが、今回はシンプルにabsdiff関数だけを使ってみます。docs.opencv.org cv.absdiff(matA, matB, 出力先のmat); で、差分が取れるのでものすごく手軽に使えます。早速、下記2枚(1.png、2.png)の画像の差…

OpenCV.jsを使ってカメラで撮影した映像のフレーム差分を算出し、動いているもののみを表示する 📷

まだ、完璧ではないのですが、カメラの映像の中から動いているものだけを表示するスクリプトを書きました。全部で9個canvasがありますが、役割は下記の通りです。9個の小さなCanvasを左上からA、B、C、つまり、 A B C D E F G H Iと呼んだとき、A. 現在(カ…

OpenCV.jsを使ってカメラで撮影した映像を二極化する 📷

blog.kimizuka.org前回は、OpenCV.jsを使ってカメラで撮影した映像をモノクロにしました。 今回は、前回作成したモノクロ画像を更に二極化してみます。 ソースコード JavaScript const Module = { onRuntimeInitialized() { const medias = { audio: false, …

OpenCV.jsを使ってカメラで撮影した映像をモノクロにする 📷

opencv.orgカメラで撮影した映像をモノクロにするだけであれば、ピクセルデータを編集したり、CanvasRenderingContext2D.filterを使ったりすれば良いのですが、OpenCV.jsを試してみたかったので、今回はOpenCV.jsで実装します。blog.kimizuka.org blog.kimiz…