這兩天用 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