You are playing with something very new.

Nov 13, 2022#工具 #JavaScript82

AI Translation

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

AI-generated summary

Recently, I created a small tool using `navigator.mediaDevices.getDisplayMedia()` and jsQR.js to recognize QR codes. The approach involves using the screen sharing feature to capture a webpage or application, drawing it onto a canvas, and then using 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 for Internet Explorer, support this method, but no mobile browsers currently do.

In the past two 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 invoke the screen sharing feature of the browser 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, theoretically, it can recognize QR codes from anywhere, 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 browsers support 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