Rest Term

Flash, HTML5 Canvas + OpenCV

Pocket

前回はWSGIアプリケーションからOpenCVを利用する例を挙げましたが、今回はクライアントをFlashとHTML5の両方で試してみます。といっても特別なことをする必要はなくて、公開されたURIからリソースを取得すればいいだけです。
、、
ということで既に先が見えて飽きてしまいましたが、簡単なデモと方針だけでも気力を振り絞って書いておきます。後はアプリ層の方々におまかせ;;

OpenCVはPythonバインディングを使いますので、この部分は前回と同じくFlaskを使うことにします。クライアントがFlashの場合はテンプレートエンジン不要で、URIルーティングを行うためのWerkzeugがあれば十分です。ただ、Flaskなら情熱がなくてもたぶん最後まで書ききれるのでオススメ。最後に処理結果ですが、今回はStar Detectorのデモを作ろうと思うので、以下のようなJSON形式で返すことにします。

* Star Detector
Starキーポイント検出器、例では1つのパラメータを公開しています。また、画像の読み込みはI/Oが発生する重い処理ですので memcached にキャッシュしておきます。

画像のストレージ周りは各々の環境に合った方法で。レスポンスをJSONにするなら flask.jsonify() を使うと楽です。以下、クライアントをFlash(Flex)で作ったデモになります。

Demo: Flash + OpenCV Integration

デモのソースコードを上げておきます。特に難しい所はないはず。
(zip: opencv_client)

次はこれをHTML5 Canvasと併せてみます。Canvasに画像データをdrawImageして上からデータを乗せていくだけ。

もしクライアント側でのデータ処理が複雑になってきた場合は、Web Workersを使って後ろに処理を投げておけばいいかと。ここで一番重要なのは、サーバ側のコード修正は必要ないということです。つまりクライアントはURIを知っていればいいということになります。

HTML5版ではパラメータを全て設定できるようにしました。
(Firefox3.6, Safari5.0, Chrome10.0, Opera11.0で動作確認)

Demo: HTML5 Canvas + OpenCV Integration

Star Detectorのアルゴリズムは厳密には知らないのですが、星形範囲(正方形とそれを45度回転したものを重ねた範囲)を積分する際、SURFと同様にIntegral Imageを使うことでO(1)で求めています。

また、ライン(エッジ)上に特徴が出るのを抑えていますが、その辺りはしきい値としてAPIで細かく指定できました。SIFTと比べて精度は劣るようですが、高速なのは魅力的です。Star Detectorって名前も綺麗ですね。
(参考: Common Interfaces of Feature Detectors)

今回のようにWebアプリケーションとして作る場合、サーバ側では「いかにI/Oを発生させないか」ということに集中し、画像処理のロジックはOpenCVを便利に使う感じでいいかと。基本的にはRESTful APIを提供する形で作ると綺麗になります。

あわせて読む:

Pocket

 

Tags: , , ,

Comments

No comments so far.

  • Leave a Reply
     
    Your gravatar
    Your Name