背景: 小規模なプログラム環境には多くの制限があるため、WeChat 環境を取り除くために、h5 側でスキャン機能を実現できることが期待されています。
解決策 1: <input type="file" />
<input type="file" /> は現在、ほとんどのモバイル ブラウザでサポートされており、互換性が高く、カメラやフォト アルバムを開いてファイルを選択し、画像を解釈できます。
欠点:
1. カメラの電源を入れた後、カメラのコンテンツをキャプチャすることはできず、現在一般的な QR コードをスキャンする方法は実現できません。
2. 写真の品質要件は高く、少しぼやけていると認識に失敗します。
アドバンテージ：
1. 優れた互換性
ブラウザの互換性をテストします。
1. UCブラウザは成功するが、カメラが認識されないことが多い
2. 360 ブラウザが正常に動作しました
3. QQ ブラウザは正常に動作しますが、写真が認識されないことがよくあります
4. Sogou ブラウザが正常に動作しました
QR コードをテストします:
解決策 2: navigator.getUserMedia
HTML5 のgetUserMedia API は、ユーザーがハードウェア デバイス メディア (カメラ、ビデオ、オーディオ、地理的位置など) にアクセスするためのインターフェイスを提供しますが、現在、ブラウザーはこのインターフェイスを十分にサポートしていません。
navigator.getUserMediaで取得したビデオストリームをvideo.play()に変換し 、 canvasを使用してビデオをキャンバスに変換し、キャンバス上の画像を解析してQRコード情報を取得できます。
欠点:
1.ブラウザの互換性が低い
2. 携帯電話は QR コードをスキャンするときに対面する必要があります
3. QR コードは非常に鮮明である必要があります
アドバンテージ：
1. 現在主流のQRコード読み取りを実現可能
ブラウザの互換性をテストします。
1. UCブラウザが失敗しました
2. 360 ブラウザが正常に動作しました
3. QQ ブラウザが正常に動作しました
4. Sogou ブラウザが失敗しました
QR コードをテストします:
上記のテストに基づくと、携帯電話ハードウェア上のブラウザーの制限により、h5 がカメラを呼び出して QR コードを認識するのに適した一般的なソリューションは現在ありません。