昨今、ブラウザ上でWebカメラ映像を扱い、画像処理を行うことが容易になりました。特にOpenCV.jsを用いることで、Webブラウザ内で高度な画像処理をリアルタイムに行うことができます。今回は、Webカメラの映像から「台形（四角形）を検出」し、その領域を台形補正して表示するまでのステップを紹介します。さらに、検出した台形の辺の長さ（ピクセル単位）を映像上に表示する方法も解説します。
こんな感じ
手順概要
1. Webカメラ映像取得
navigator.mediaDevices.getUserMedia()を用いて、<video>要素にWebカメラ映像をストリームとして設定します。
2. OpenCV.jsの初期化
opencv.jsのロード完了後、onRuntimeInitializedでOpenCVが利用可能になったら、画像処理を開始できます。
3. 台形（四角形）検出
フレームを<canvas>に描画してcv.imread()で読み込み、グレースケール化、二値化などの前処理を行います。
cv.findContours()で輪郭検出し、cv.approxPolyDP()で四角形近似します。最も大きい四角形を「台形」とみなします。
4. 台形領域に赤線と半透明フィルを描画
台形の4頂点を取得したら、<canvas>に赤い線や半透明色で強調表示します。
5. 辺の長さ表示
4辺の中点を計算し、distance()関数で長さ（ピクセル）を計算。fillText()で中点付近に長さを表示します。
6. 台形補正（透視変換）
getPerspectiveTransform()とwarpPerspective()を用いて、台形を正しくトリミング・補正します。
頂点を正しい順序（top-left, top-right, bottom-right, bottom-left）で並べ替え、warp後の画像を別<canvas>に表示します。
おわりに
このように、Webカメラ映像を活用し、OpenCV.jsでリアルタイム画像処理を行うことで、台形の検出・補正、辺の長さ表示といった多彩な応用が可能です。
書類スキャンやARコンテンツ表示、簡易計測ツールなど、工夫次第で活用の幅は広がります。
コメント