表紙を写すと本のレビューが読めたりするHTML5アプリを作ってみた

最近のブラウザはgetUserMediaという機能でJavaScriptからカメラを操作してリアルタイムに動画を読んだりできるようなので、画像認識のデモ的なものを作ってみた。

表紙検索

PCのGoogle Chrome、Opera、AndroidのOpera Mobileの場合

動画が読めるといっても実際のところ一部のブラウザでしか使えなかったので段階的に対応してみた。
まず、PCのGoogle ChromeとOpera、AndroidのOpera Mobileの最新バージョンが全ての機能が使えるブラウザです。

これらのブラウザで hyoushi.me というドメインを開くと、サイトのトップに「カメラ起動」というでかいボタンが表示されています。

IS05 + Opera Mobile

（僕はウェブカメラを持っていないのでこれはIS05 + Opera Mobileのキャプチャです）

カメラ起動ボタンをクリックすると、こんな感じでページ内にカメラからの映像が表示されます。

このまま適当に床に落ちている本を写して映像部分をクリックすると、決定かと聞いてくるので、

OKを押すと映像がブラウザ上でリサイズされた後サーバーに送信されて、

検索結果が表示されます。

サーバーは さくら VPS 2GB 1台で動かしていて、今僕が一人で使っている分には1秒ちょっとで結果が帰ってきていますが、他の人が使っていると激重になるかもしれません。

検索結果はとりあえず2件返しているので、正解があれば正解の画像をクリックすると、本の詳細やレビューなどが表示されます。

ここでAmazonへというボタンをクリックして購入すると僕にアフィ収入が入るというビジネスモデルを採用しています。

僕のIS05だと動画の解像度が240x320しかなくて、かなり画質が悪いし、動画なのでピントを合わせたりが難しいのですが、結構適当に写しても検索されます。

2冊同時でもいける。タイトルをアップで写すと似たようなフォントで同じ文字列を含むタイトルが検索されたりもします。
ぶれてたり、反射していたり、遠すぎて本が小さかったり、斜めになってパースが効いていたりしなければ大体目的の本が出てくるのではないかと思います。
全体を写そうとするよりは、タイトルやイラストなど特徴的な部分をアップでくっきり写したほうが精度がよいです。

家にあった本を大体試したけど、Amazon.co.jp： 時間衝突 (創元推理文庫): バリントン・Ｊ・ベイリー, 大森 望: 本という本がどうやっても出なかった以外は、出てたので、大体出るのではないかと思います。（カメラにもよるかもしれない）

あと検索結果として表示される本の詳細や表紙画像、レビューなど全ての情報はAmazonのItemLookupで検索毎に最新の情報を取得しているので、検索した時点でAmazonに無い本は出てきません。
またAmazonのAPIは1時間に2000回しか叩けないので、このサイトも（一人あたりではなく全体で）1時間に2000回しか検索できません。

Windows7 + Opera

ウェブカメラは持っていないのですが、ニコニコミュニティという仮想カメラソフトを使うと、デスクトップや指定した写真をカメラの入力にできるらしいので一応動くか試してみた。

普通に動いた。動画サイズ(解像度)はJavaScriptから指定できないので、カメラによって縦横比が変わったりします。一応はみ出ないように最大幅を超えている場合はフレームをリサイズして表示しています。

Windows 7 + Google Chrome

Google ChromeはWindows XPでは動いたけど、Windows7では動きませんでした（いまWindows7なのでキャプチャは無い）。
これはたぶん、
Issue 136238 - chromium - getUserMedia stopped working on Windows - An open-source project to help move the web forward. - Google Project Hosting
のバグで、機種によってはカメラの初期化に失敗するようなので、パソコンの場合は実質対応しているのはOperaだけかもしれません……

getUserMediaに対応していない場合

JavaScriptからカメラが操作できない場合は、普通にファイル送信しかありません。画像ファイルを選択するとその画像で検索できます。便利。

（これはFirefox Mobileのキャプチャです）

ただカメラが内蔵されている機器を使っている場合は、ファイル選択からカメラが選択できる場合があって

この場合は、普通にカメラアプリが起動して撮影すると検索されます。こっちのほうがフォーカスが効くし、解像度が高いのでいい気がしますね……
ただ、この場合だとたまに撮影後にブラウザがリロードされて検索できないことがあって、ブラウザのバグなのか僕が悪いのか分かっていないです。あとなにか重い感じするし、シャッター音がします。

僕のAndroid 2.3 標準ブラウザでは、カメラ選択は出なくて無理でした。

追記

ファイルが選択された場合（ファイル選択からカメラを起動した場合）にFile APIで読み込んでリサイズしてアップロードしていたのですが、iPhone5のSafariで画像がバグるらしいのでとりあえず無効にしました（そのままファイルアップロードする）。これだとiPhone5のSafariでも使えているようです。

まとめ

JavaScriptで動画は扱えるけどブラウザを選んだり、動画なのでフォーカスが効かなかったり、解像度が低かったり、散々な感じでしたが、全体的には未来っぽい感じにできたと思います。携帯端末とか得に意識しなくてもブラウザが対応していれば勝手に動いてくれるのもいいです。Javaとか環境を作るだけでだるいですし。

本の検索に関しては、僕の感覚ではこの規模のデータを『さくら VPS 2GB 1台』でこの精度この速度で検索できるなら、現時点で実用レベルに達していると思うので、"きれいなデータ"さえあればいろいろ応用ができるのではと思います。
僕はデータを提供することはできないですが（そもそも画像データ自体は保存していない）、このサイトで使っている画像検索エンジンのライブラリを公開しているので、興味のある方は使ってみてください。

nagadomi/otama · GitHub
このotamaというライブラリの bovw512k_iv_kc というドライバを使っています。

このライブラリは2年くらい前に前職の関係で開発したもので、その後も地道にいじりながらなんか使い道ないかなと思っていたのですが、特に使い道が見つからないまま先月退職したのと、個人で作っていてクレジットは僕が持っていたので、githubにでも置いとくことになったものです。
2年も前から作っているならすごく完成度が高そうだけど、ここ1ヵ月くらい無職の力を使ってハチャメチャに書き直したので、まだかなりアルファっぽい感じです。ベースが2年前なのでいろいろ古いし。
詳しくはREADME.mdなどを見てください。

今年中くらいはフラフラしてようと思うので、その間気が向いたらいじったりすると思いますのでよろしくお願いします。