These past two days, I used navigator.mediaDevices.getDisplayMedia() and jsQR.js to create a small QR code recognition tool. The basic 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 can theoretically recognize QR codes from anywhere, but due to resolution limitations, some smaller QR codes may not be detected.
Apart from IE, all modern desktop browsers support navigator.mediaDevices.getDisplayMedia(), while currently no mobile browsers support this method.