getUsermediaでのH5バーコードとQRコードスキャン

H5ページは、主にGetUserMediaを呼び出してカメラの権限を取得し、リアルタイムの識別のためにデコードライブラリと組み合わせて、バーコードとQRコードスキャン機能を実現します。 1.最初に、getUsermediaを使用してカメラの権限を取得し、ビデオストリームを

H5ページは、主にgetUserMediaを呼び出してカメラの権限を取得し、デコードライブラリを組み合わせてリアルタイム識別を組み合わせて、バーコードおよびQRコードスキャン機能を実装します。この機能はネイティブアプリでは非常に一般的ですが、特に軽量のQRコードスキャンシナリオに適したH5を通じて優れたエクスペリエンスを実現することもできます。

カメラのアクセス許可を取得することが最初のステップです

getUserMediaを使用してカメラの権限を取得することは、プロセス全体の出発点です。ブラウザは承認リクエストをポップアップし、ユーザーが同意した後にのみ継続できます。このステップの鍵は、ビデオストリームが正しくロードされ、 <video></video>タグにバインドされて表示されることを確認することです。

getUserMediaへの呼び出しにはHTTPS環境が必要であり、ローカルテストがLocalHostを通過できることに注意する必要があります。さらに、さまざまなデバイスがカメラに異なるサポートがある場合があります。たとえば、モバイル端末はデフォルトで背面カメラをオンにしますが、一部のブラウザはデバイスIDを手動で指定する必要がある場合があります。

呼び出しの基本コードは次のとおりです。

 navigator.mediadevices.getusermedia（{video：true}）
  .then（stream => {
    videolement.srcobject = stream;
  }）
  .catch（err => {
    console.error（ 'カメラを取得できない'、err）;
  }）;

ビデオフレームのインターセプトと画像処理

カメラ画面が表示された後、次のステップは、識別のためにビデオからフレームを傍受することです。通常、現在のビデオフレームは<canvas>を介して描画され、画像データが抽出されます。

このステップでは、周波数制御に注意が必要であり、すべてのフレームを処理するわけではありません。そうしないと、パフォーマンスの消費が高すぎます。 requestAnimationFrameを使用するか、タイマー（100msごとに1回など）を設定して、認識周波数を制御できます。

特定のプロセスは次のとおりです。

• ビデオの現在のフレームをキャンバスに描画します
• キャンバスを使用して、画像ピクセルデータを取得します
• 識別のために画像データをデコードライブラリに渡す

これにより、ビデオストリームの直接動作を回避し、認識効率を改善できます。

識別にはデコードライブラリを使用します

現在、最も一般的に使用されるデコードライブラリは、 QuaggajsとZxingです。これらはすべて、さまざまなバーコードおよびQRコード形式をサポートしており、プロジェクトの要件に従って選択できます。

Zxingを例にとると、デコーダーを初期化した後、識別のために画像データを直接渡すことができます。

 const codereader = new zxing.browsermultiformatreader（）;
codereader.decodefromvideodevice（未定義、videolement、（result、err）=> {
  if（result）{
    console.log（ '認識結果：'、result.text）;
  }
}）;

認識結果が遅延または繰り返される可能性があることに注意する必要があります。複数のトリガーを避けるために有効なコードを特定した後、1回アンチシェイク治療を実行することをお勧めします。

互換性とパフォーマンスの最適化

さまざまなデバイスやブラウザでのコードエクスペリエンスをスキャンする場合があります。たとえば、一部のAndroidブラウザは、デフォルトで前面カメラを使用するか、高解像度のサポートが不十分です。この時点で、ビデオの制約を設定することで最適化できます。

 {ビデオ：{facingMode： '環境'}} //背面カメラの強制使用

さらに、モバイル端末のコードをスキャンして認識成功率を改善するときに、自動フォーカスをオンにし、輝度とその他の操作を調整することをお勧めします。 UIを使用して、スキャンエリアのQRコードを調整してインタラクティブエクスペリエンスを改善するようにユーザーに促すこともできます。

パフォーマンスの観点から、メインスレッドで頻繁に画像処理タスクを避けるようにしてください。メインスレッドブロックを減らすためにWebワーカーを使用してデコードすることを検討できます。

基本的にそれだけです。実装するのはそれほど難しくありませんが、アクセス許可、画像回転、さまざまなデバイスの互換性など、すべてテストおよび処理する必要があるなど、詳細に詰まらせるのは簡単です。

以上がgetUsermediaでのH5バーコードとQRコードスキャンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。