这两天用 navigator.mediaDevices.getDisplayMedia()
和 jsQR.js
做了一个识别二维码的小东西。具体思路是用 navigator.mediaDevices.getDisplayMedia()
这个方法去调用浏览器的屏幕分享功能来抓取某个网页或者软件的页面,然后绘制到 canvas
里面,再调用 jsQR.js
来实现解析页面中二维码的效果。因为屏幕分享功能有一个选项是抓取整个屏幕,所以理论上可以识别任何地方的二维码,但是受制于分辨率,一些比较小的二维码会检测不出来。
除了 IE 浏览器,所有桌面端的现代浏览器都支持 navigator.mediaDevices.getDisplayMedia()
,移动端的话目前没有任何一款浏览器支持这个方法。
此文由 Mix Space 同步更新至 xLog
原始链接为 https://www.vinking.top/posts/codes/qr-code-scanner-with-getDisplayMedia