instascan:純前端掃描 QR Code

2019/09/26 10,525 1 網站技術 , JavaScript , jQuery

前端除了能生成 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>

以上內容僅供參考,發揮創意做出您所需要的應用吧!

贊助廣告 ‧ Sponsor advertisements

留言區 / Comments

萌芽論壇