前端除了能生成 QR Code（👉 相關文章），竟然還能掃描 QR Code？沒錯！只要運用 instascan 這個插件就可以運用 WebRTC 這樣的技術來做到掃描 QR Code，WebRTC 的名稱源自網頁即時通訊（英語：Web Real-Time Communication）的縮寫，是一個支援網頁瀏覽器進行即時語音對話或影片對話的 API，但其一定要在 HTTPS 的連線環境下運作，因此有套用 instascan 的每個網頁也都要以 HTTPS 的連線環境才能正常運作唷！我們一般都是直接引用 instascan.min.js 就可以開始導入程式到網頁囉！
基本上 instascan 可以由您決定是否連續掃描、預覽、擷取影像數據，讀出來的資訊可以自行運用，像我這邊製作的範例就是將其讀取結果顯示出來，若是判斷為網址則點「確定」將開啟網頁，若是判斷非網址則沒有動作（僅關閉提示），基本上我已經顯出一個完全依靠前端的掃瞄應用了！
▲ 原始碼／實際運行截圖（首圖）。
☁️ 範例的 GitHub 雲端存放庫：https://github.com/qwe987299/instascan
🔗 instascan 的 GitHub 雲端存放庫：https://github.com/schmich/instascan
⌨️ 一步步教你寫出來
首先請先將 instascan.min.js 下載下來並放入根目錄中（前者）或者用官方範例的 CDN（後者），接著建立一個 index.html 的空白網頁在根目錄，接著要在 <head>~</head> 引入 instascan 插件。
<script src="instascan.min.js"></script><script src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>接著建立 <video> 標籤用來顯示拍攝畫面的預覽，請放於 <body>～</body>：
<video id="preview"></video>最後為我改寫過的 <script> 腳本，官方 GitHub 有原始範例（Example）可以參考與複製，請放於 <body>～</body>：
<script type="text/javascript">
let scanner = new Instascan.Scanner({
continuous: true, // 連續掃描
video: document.getElementById('preview'), // 預覽
facingMode: {
exact: "environment"
}
});
scanner.addListener('scan', function (content) {
console.log(content);
getConfirmation();
function getConfirmation() {
var retVal = confirm("掃描結果：" + content); // 掃描結果顯示
if (retVal == true) {
var checkurl = /^((https?|http?|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/; // 檢查是否為網址
if (checkurl.test(content)) {
window.open(content, "_self"); // 開啟網址
}
return true;
} else {
return false;
}
}
});
Instascan.Camera.getCameras().then(function (cameras) {
if (cameras.length > 0) {
scanner.start(cameras[1]); // [0] 前鏡頭 [1] 後鏡頭
} else {
console.error('沒有找到相機');
}
}).catch(function (e) {
console.error(e);
});
</script>以上內容僅供參考，發揮創意做出您所需要的應用吧！
《上一篇》中原大學 Exam Grade 2B 紀念鉛筆 
《下一篇》Google AdSense：網站廣告收益京城銀行西聯收款全記錄與教學 
留言區 / Comments
萌芽論壇