TP Notes: 7月 2022

只靠 HTML 前端技術就可以使用相機，那麼最實用的功能就是掃瞄 QRCODE ，這裡提供一個最簡單易用的方式
  
使用函式庫：https://github.com/mebjas/html5-qrcode
  
  
```
$mmcode(r1)
```
<div class="mmresult r1">
  <button id="b072401_idfront">Front</button>
  <button id="b072401_idback">Back</button>
  <button id="b072401_idstop">Stop</button>
  <input type="file" id="b072401_idfile" accept="image/*">
  <hr>
  <div id="b072401_idresult"></div>
  <hr>
  <div id="b072401_reader" style="display:inline-block;width:320px;" ></div>
  <script>
    $(function()
      {
      const html5QrCode = new Html5Qrcode("b072401_reader");
      const qrCodeSuccessCallback = (decodedText, decodedResult) => 
      {
        $("#b072401_idresult").html(JSON.stringify(decodedResult,"",4))
      };
      const config = 
            { 
              fps: 10, 
              qrbox: { width: 200, height: 200 } 
            };
      $("#b072401_idfront").on("click",function()
                               {
        $("#b072401_idstop").click();
        html5QrCode.start({ facingMode: "user" }, config, qrCodeSuccessCallback);
      })
      $("#b072401_idback").on("click",function()
                              {
        $("#b072401_idstop").click();
        html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);
      })
      $("#b072401_idstop").on("click",function()
                              {
        try
        {
          html5QrCode.stop().then((ignore) => 
                                  {
            console.log("stop ok")
          }).catch((err) => {
            console.log("stop err")
          });
        }
        catch(e){}
      })
      $("#b072401_idfile").on("change",function(e)
                              {
        $("#b072401_idstop").click();
        if (e.target.files.length == 0) {
          // No file selected, ignore 
          return;
        }
        const imageFile = e.target.files[0];
        // Scan QR Code
        html5QrCode.scanFile(imageFile, true)
          .then((decodedText) => {
          $("#b072401_idresult").html(decodedText)
        })
          .catch(err => {
          console.log(`Error scanning file. Reason: ${err}`)
        });
      })
    })
  </script>
  <script src="https://yiharng.github.io/html5-qrcode.min.js"></script>
</div>

本來要整理 html 的資料，卻覺得這類型的資料太多也太容易取得，決定改變一下方向，只整理 html 相關比較進階實用的小技巧。
  
無意間看到一個令人懷念的東西，getUserMedia()，可以在網頁上使用 Webcam ，好幾年前遇到一個專案，需要利用相機功能實做一個類似 AR 的畫面，而那個專案用的是 cordova ，於是查了查資料，就用 getUserMedia 來取得相機畫面當背景，在前面放個箭頭指向目的地的方向，當實作完成後卻發現 Android 4.x 不支援，還好加上 webkit plugin 後就可以了，然而最麻煩的是 IOS 不支援...... 最後只好用 camera preview plugin 來重寫，而後續的又是另一個故事了。
  
那麼首先先來一個範例
  
```
$mmcode(r1)  
```
  
<div class="mmresult r1">
  <button style="height:4ch;" id="b071801_idfront">前鏡頭</button>
  <button style="height:4ch;" id="b071801_idback">後鏡頭</button>
  <button style="height:4ch;" id="b071801_idstop">stop</button>
  <button style="height:4ch" id="b071801_idgetpic">抓圖</button>
  <br>
  <div id="b071801_ida">
    亮度<input id="b071801_idb" type="range" min="0" max="200" value="100"><br>
    對比<input id="b071801_idc" type="range" min="0" max="200" value="100"><br>
    飽和<input id="b071801_ids" type="range" min="0" max="400" value="100"><br>
  </div>
  <video controls id="b071801_video" playsinline autoplay muted loop>Video stream not available.</video>
  <br>
  <img id="b071801_idimg" src="">
  <script>
    $(()=>
    {
      let b071801_video=$("#b071801_video")[0];
      function stopcam()
      {
        try
        {
	        b071801_video.srcObject.getTracks()[0].stop();
        }
        catch(err){}
      }
      function docam(mode)
      {
        let fmode;
        stopcam();
        if (!mode)
        {
          fmode="user";//前鏡頭
        }
        else
        {
          fmode="environment";//後鏡頭
//          fmode={ exact: "environment" };//後鏡頭
        }
        navigator.mediaDevices.getUserMedia
        (
          {
            audio: false,
            video: 
            {
              width: { min: 320, ideal: 320, max: 1920 },
              height: { min: 240, ideal: 240, max: 1080 },
              facingMode: fmode
            }            
          }
        ).then(function(stream) {
          b071801_video.srcObject = stream;
          b071801_video.play();
        }).catch(function(err) {
          console.log("An error occurred: " + err);
        });
      }
      $("#b071801_idfront").on("click",function()
      {
          docam(0);
      })
      $("#b071801_idback").on("click",function()
      {
          docam(1);
      })
      $("#b071801_idstop").on("click",function()
      {
          stopcam();
      })
      $("#b071801_idgetpic").on("click",function()
      {
          let ca=$("<canvas></canvas>")[0];
          let ct = ca.getContext('2d');
          let w=b071801_video.videoWidth;
          let h=b071801_video.videoHeight;
          ca.width = w;
          ca.height = h;
          ct.drawImage(b071801_video, 0, 0, w, h);
          let data = ca.toDataURL('image/jpeg');
          $("#b071801_idimg").attr("src",data);
      })
      $("#b071801_ida input").on("input",function()
      {
          let f="brightness("+$("#b071801_idb").val()+"%) "
              +"contrast("+$("#b071801_idc").val()+"%) "
              +"saturate("+$("#b071801_ids").val()+"%) ";
          $("#b071801_video").css("filter",f);
          $("#b071801_idimg").css("filter",f);
      })
    })
  </script>
</div>

程式盡量簡化了，可以設定使用前鏡頭還是後鏡頭，也可以抓圖，而且支援 CSS 的 filter ，利用 CSS 來調整亮度對比飽和。
  
在 iphone 上，使用 chrome 或 firefox 都沒有問題，而 safari 似忽不支援，
  
在 MAC 上的 safari 完全正常，Android 上也是完全正常
  
可以用相機預覽，可以抓圖，基本上就是拍照功能了，也可以即時處理影像，例如辨識條碼或證件號碼之類的，光靠網頁就可以做到很多特別的功能

參考資料：https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

TP Notes

2022年7月24日星期日

掃瞄QRCODE

2022年7月18日星期一

使用 Webcam

2022年7月24日 星期日

掃瞄QRCODE

2022年7月18日 星期一

使用 Webcam

2022年7月24日星期日

2022年7月18日星期一