Edited at

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


はじめに

初めまして、k.s.ロジャースの西谷です。

直近でPCカメラからQRコードの読込を行いたい話がありました。

利用者の環境が未定であったことから、ブラウザ上で動作するQRコードリーダがあれば良い話があり、調査しておりました。

こちらの記事を紹介頂き、非常に参考になりました。

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

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


Shape Detection APIとは

顔検出、ORコード読込、テキスト認識の3つのAPIを提供します。

これらはハードウェアアクセラレーションに対応しており、既存のWebライブラリに比べて低い負荷で実行することができます。

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

本来上記3つの機能がありますが、今回は要件が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はハードウェアアクセラレーションを利用するため、利用デバイスによって挙動が異なります

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

OS
バージョン等
検証結果

Android
Nexus 5X
正常動作

iOS
iPhone8
Chromeのフラグが存在せず

macOS
Mojave 10.14.1
動作するがQRコードを検出せず

Windows
windows10 1809
非対応


Androidについて

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

image.png

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

image.png


macOSについて

macOSはサポート済み判定されており、detect関数もエラーなく動作していました。

しかし、公式サンプルの固定画像でもQRコードを認識出来ませんでした。

スクリーンショット 2019-05-23 4.47.53.png


その他のデバイス

Windowsは公式で非対応との記載があり、QRコードは対象外になります。

iOSのChromeはenable-experimental-web-platform-featuresがなく、非対応となっています。


参考資料

https://wicg.github.io/shape-detection-api/#introduction

https://www.chromestatus.com/feature/4757990523535360


おわりに

今回はWebブラウザでQRコードを認識する予定でしたが、現状のShape Detection APIはかなりデバイスに依存することが分かりました。

標準化後に依存周りが良くなれば、開発コストやパフォーマンスを改善に期待できると思います。

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


Wantedlyでもブログ投稿してます

Techブログに加えて会社ブログなどもやっているので、気になった方はぜひ覗いてみてください。

https://www.wantedly.com/companies/ks-rogers