この二日間、navigator.mediaDevices.getDisplayMedia() と jsQR.js を使って、QR コードを認識する小さなものを作りました。具体的な考え方は、navigator.mediaDevices.getDisplayMedia() というメソッドを使ってブラウザの画面共有機能を呼び出し、特定のウェブページやソフトウェアの画面をキャプチャし、それを canvas に描画し、次に jsQR.js を呼び出してページ内の QR コードを解析するというものです。画面共有機能には全画面をキャプチャするオプションがあるため、理論的にはどこにでもある QR コードを認識できるはずですが、解像度の制約により、比較的小さな QR コードは検出できないことがあります。
IE ブラウザを除いて、すべてのデスクトップの現代ブラウザは navigator.mediaDevices.getDisplayMedia() をサポートしていますが、モバイル端末では現在このメソッドをサポートしているブラウザはありません。
この記事は Mix Space によって xLog に同期更新されました。元のリンクは https://www.vinking.top/posts/codes/qr-code-scanner-with-getDisplayMedia です。