入力フォームの値をQRコードで入力できるようにしたい。

ホームページ等の入力フォームで、（例えばカード番号のように）長い数列の入力を簡単に行えるようにするため、QRコードを用いて入力する機能を設けたいと考えています。

「QRコード」ボタンをクリック（タップ）するとカメラアプリ？が起動し、読み込みができたら入力項目にQRコードから取得した数列を反映させたいと思っています。


私の知識では「QRコードリーダー」などのアプリを使用しないと読み込みができないと思っていますが、ブラウザのみでこの環境を構築するのは難しいのでしょうか？

また、ブラウザベースの仕組みでは構築ができず、専用アプリとして設計が必要になってしまうのでしょうか？

No.5 ベストアンサー 回答者： naktak 回答日時： 2023/03/29 14:10

こんなん見つけました。

https://webty.jp/staffblog/production/post-377/# …

https://paiza.hatenablog.com/entry/2017/08/17/PC …

https://frostmoon.net/?p=383

ただ、システム的には、事前に受け入れが可能なQRコードを用意しなければならないわけですから、特定環境で利用するシステムならまだしも、公開するようなシステムの場合、発想自体が不要と思います。

No.6 回答者： なすどんぐり 回答日時： 2023/04/04 06:05

QRコードの読み取りならjsQRを使うのが一般的ですね。

有名なので使い方は検索すればたくさん出てきます。

No.4 回答者： osamuy 回答日時： 2023/03/29 10:22

今時のWebブラウザならカメラ利用可能ですが、

> 長い数列の入力を簡単に行えるようにするため
qrコードを生成するデータは誰が入れるか次第で、もっと簡単なソリューションがありそうな。

No.3 回答者： sumbody 回答日時： 2023/03/29 09:40

全然詳しくないですが方法はあるみたいです。

Barcode Detection APIでブラウザ上からQRコードを読み取る
https://sbfl.net/blog/2020/04/12/barcode-detecti …
下の方に
＞カメラとの連動
と。

No.2 回答者： kikyuuu 回答日時： 2023/03/29 09:03

出来ますが、パソコンならEdgeブラウザ(カメラ付きパソコンは必須)、

スマホならカメラアプリで撮影するだけでQRコードは読み取れます。

ただフォームの途中でQRを読み込む機能はおそらくないので、その場合はブラウザの機能で写真として読み取り、非同期でサーバー側で値を返却するというAPIを作成する必要が出てくるかなと思います。

なので途中でQRを読み込むのではなくて、
最初にQRを読み込んでページを開くのでもよければ(該当項目を入力状態にする)、そちらの方が実装が楽かなと思います。

No.1 回答者： bx2 回答日時： 2023/03/29 09:00

キーボードインターフェースの2次元バ―コ―ドリ―ダ―を購入すれば簡単に可能です。

アプリを開発する必要はありません。

スマホを使用するなら、バ―コ―ドリ―ダ―アプリで読み取った後、貼り付けたらよいです。

QRコードに限らず、バーコード（CODE39 や CODE128）でも可能です。