ブラウザ上でカメラを使って色認識

getUserMedia APIに対応したブラウザでは、カメラで取り込んだ画像などをブラウザ上で処理できます。
参考サイト:[HTML5]getUserMedia APIを使ってカメラを表示させてみる – o24ブログ


これを使って、先日作ったトレジャーパーク・ソルバに、カメラを使って色入力ができるようにしてみました。
(ただしChromeでしか動作を確認していません。)


使い方は、ソルバにアクセスして「カメラで認識」をクリックします。すると、カメラへのアクセスを求められるので、許可してください。カメラで撮影された画像がリアルタイムで表示されるので、白枠の中にトレジャーパクのシートがぴったり収まるようにします。

認識に成功すると、自動入力されたソルバ画面にジャンプします。

仕掛けとしては、一定時間ごとにcapture()関数で画像をvideoからcanvasに複製し、ctx.getImageData で5×5のパネルに対応する画像の中心部分10x10ピクセルを切り出して平均の色を計算します。あとは、RGBの各値が一定のしきい値を超えているかをもとに色を判別しています。5色×5個がそろった時点で認識成功としています。しきい値の設定はカメラや環境に依存するので、環境によってうまく認識できないかもしれません。


To-Do:しきい値の自動調整。あと、人間が枠に収めるのではなく、位置認識までさせると面白いかも。