為客戶項目實現 QR Code 讀取功能

最近為一位客戶的項目中，需要實現類似數位新冠病毒健康證明查驗程式的功能，其中涉及到讀取 QR Code。在評估不同的 JavaScript 庫來讀取 QR Code 時，主要考慮了兩個選項：

1. jsQR: 以快速反應和易用性著稱。

   • 示範網站：https://cozmo.github.io/jsQR/。

2. html5-qrcode: 每次掃描都需要選擇前置或後置攝像頭，且 QR Code 必須放置在特定框框內。

   • 示範網站：https://blog.minhazav.dev/research/html5-qrcode.html。

這兩種庫各有優缺點。html5-qrcode 需要頻繁選擇攝像頭並特定放置 QR Code，而 jsQR 則提供快速檢測功能。

最終選擇了 jsQR，因其自動檢測 QR Code 的速度。

在 .NET Core 中遇到的問題

在將 QR Code 讀取器整合到 .NET Core 應用程式時，遇到了一些問題：

1. 部分設備無法存取攝像頭：

   • 需要修改 web.config 文件以允許所有設備上的攝像頭訪問。使用以下配置：

     <customHeaders>
       <!-- 添加安全設定 -->
       <add name="Permissions-Policy" value="camera=* ..." />   
     </customHeaders>
     

2. 在不同網站上測試：

   • 測試表明，不正確的網站憑證可能導致異常。因此確保網站具備正確的憑證對於攝像頭的順暢存取和功能至關重要。

總結來說，使用 JavaScript（特別是使用 jsQR）實現 QR Code 讀取器是一個直接的任務，但需要注意攝像頭權限和安全網站認證，特別是在 .NET Core 環境中。