この 2 日間、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