You are playing with something very new.

Nov 13, 2022#工具 #JavaScript83

AI Translation

This post is translated from Chinese into English through AI.View Original

AI-generated summary

Recently, I created a small tool to recognize QR codes using `navigator.mediaDevices.getDisplayMedia()` and jsQR.js. The idea is to use the screen sharing feature to capture a webpage or application, draw it on a canvas, and then use jsQR.js to decode any QR codes present. While the screen sharing can capture the entire screen, smaller QR codes may not be detected due to resolution limitations. All modern desktop browsers, except Internet Explorer, support `navigator.mediaDevices.getDisplayMedia()`, but no mobile browsers currently do.

In the past few days, I created a small tool for recognizing QR codes using navigator.mediaDevices.getDisplayMedia() and jsQR.js. The specific idea is to use the navigator.mediaDevices.getDisplayMedia() method to call the browser's screen sharing feature to capture a webpage or software interface, then draw it onto a canvas, and finally call jsQR.js to achieve the effect of parsing QR codes on the page. Since the screen sharing feature has an option to capture the entire screen, it theoretically can recognize QR codes from any location, but due to resolution limitations, some smaller QR codes may not be detected.

All modern desktop browsers support navigator.mediaDevices.getDisplayMedia(), except for Internet Explorer. Currently, no mobile browser supports this method.

This article is synchronized and updated to xLog by Mix Space. The original link is https://www.vinking.top/posts/codes/qr-code-scanner-with-getDisplayMedia