Shape Detection APIでQRコード検出を試しました

Last updated at 2019-05-24Posted at 2019-05-24

はじめに

初めまして、ｋ．ｓ．ロジャースの西谷です。

直近でPCカメラからQRコードの読込を行いたい話がありました。
利用者の環境が未定であったことから、ブラウザ上で動作するQRコードリーダがあれば良い話があり、調査しておりました。
こちらの記事を紹介頂き、非常に参考になりました。

しかし、Shape Detection APIが全てのブラウザで非対応は「何かあるのでは？」と考え調査と検証を行いました。

間違い・助言等があればコメントにてお知らせいただけたらと思います。

顔検出、ORコード読込、テキスト認識の3つのAPIを提供します。
これらはハードウェアアクセラレーションに対応しており、既存のWebライブラリに比べて低い負荷で実行することができます。

また、本APIは2019/05時点では草案で、試験的な機能となります。

本来上記３つの機能がありますが、今回は要件がQRコード読み取りであるため、QRコード周りの検証を行います。

chromeの以下URLからExperimental Web Platform featuresをEnabledにすることで利用できるようになります。

chrome://flags/#enable-experimental-web-platform-features

QRコード識別の部分に関してはdetector.detect(image)をするだけで、後は識別した後のデータを返してくれます。
検証はこちらのコードを利用して進めました。
https://qiita.com/massie_g/items/a203cf2071f96d910743

今回の一番の嵌りどころでした。
本APIはハードウェアアクセラレーションを利用するため、利用デバイスによって挙動が異なります。

私の手元のデバイスではそれぞれ次のようになりました。

こちらは正常動作しました。

QRコード以外にDataMatrixなども検出できます。

macOSはサポート済み判定されており、detect関数もエラーなく動作していました。
しかし、公式サンプルの固定画像でもQRコードを認識出来ませんでした。

Windowsは公式で非対応との記載があり、QRコードは対象外になります。
iOSのChromeはenable-experimental-web-platform-featuresがなく、非対応となっています。

今回はWebブラウザでQRコードを認識する予定でしたが、現状のShape Detection APIはかなりデバイスに依存することが分かりました。
標準化後に依存周りが良くなれば、開発コストやパフォーマンスを改善に期待できると思います。

今回は知見がほぼないため、間違いや改善案などがあれば是非教えて頂けたらと思います！

Techブログに加えて会社ブログなどもやっているので、気になった方はぜひ覗いてみてください。
https://www.wantedly.com/companies/ks-rogers