BarcodeScanner の例 — セルフサービス Kiosk (従来)
BarcodeScanner を使用してセルフサービス kiosk として機能する Lightning Web コンポーネントの詳細な例を次に示します。
HTML テンプレートでは、ユーザインターフェースをスキャンするために最小限必要な機能が提供されます。スキャンの結果を表示する要素、若干の静的なヘルプテキスト、スキャンを開始するボタンがあります。
このサンプルは、「BarcodeScanner の例 — 連続スキャン (従来)」のコードサンプルの多くの部分を流用しています。この例での違いは、セルフサービスキオスクのユースケースに必要なすべての基本的な要素を提供している点です。スキャンには前面カメラを使用し、連続的なスキャンライフサイクルを採用することでユーザの操作を最小限に抑え、さらにカスタム UI を定義して使用しています。
この例では、スキャンされたバーコードを意味のある方法で処理しません。そのため、processScannedBarcode() 関数の実行速度は速すぎます。タイミングの問題が発生し、例が失敗する可能性があります。この問題を回避するために、次のスキャンを開始する前に 1 秒の遅延が挿入されています。実際のバーコード処理は通常、時間がかかるためこの問題は発生しません。その場合、遅延を含む行と continueScanning() 関数の前にある async キーワードを削除できます。
beginScanning() と continueScanning() がどのように連携して連続スキャンサイクルを作成するかについての説明は、「複数のバーコードのスキャン (従来)」を参照してください。
関連トピック