LINE LIFF 1922簡訊實聯制掃碼發送簡訊HOW TO

在疾管家的簡訊實聯制中,主要看到是透過LIFF功能,去掃QR CODE後,然後發送簡訊。所以技術有
1 LINE LIFF 功能
2 掃條碼功能(透過HTML5-QRCODE) 注意:網站要https才能有權限開啟鏡頭
3 SMS

以下稍微實作一下,如何像疾管家一樣自動直接開啟後鏡頭

然後在掃描確認到開頭是SMSTO:1922後,透過SMS協定自動調到簡訊畫面

不過android/ios的簡訊中串body不同(ios是& android是 ? )

這樣就可以實現出像唐鳳政委與幕後功臣們所做出的功能了!

<html>
<head>
    <meta charset="utf-8">
    <title>壽山掃條碼測試</title>
</head>
<body>
    <!-- 條碼顯示的內容顯示在 qr-reader-results -->
    <div id="qr-reader-results"><h1 id="qrtext"></h1></div>
	<!-- 掃描用 -->
    <div id="qr-reader" style="width:100%"></div>    
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5-qrcode/2.0.3/html5-qrcode.min.js"></script>
<script>
    <!-- 呼叫 html5qrcode 代入qr-reader -->
	const html5QrCode = new Html5Qrcode("qr-reader");
	const qrCodeSuccessCallback = (decodedText, decodedResult) => {
          /* 處理成功掃描 */  
		  document.getElementById("qrtext").innerHTML = decodedText;
	      if (decodedText.toUpperCase().startsWith("SMSTO:1922:")) {
              var t = decodedText.split(":", 3),
              r= t[1],
              a= t[2],
		      o = "sms:" + r + "&body=" + a; // to-do 如果是android 要將&改為?
			  window.location.href = o;
		  }
          html5QrCode.clear();
     };
     const config = { fps: 10, qrbox: 800 };
	// 直接開啟後面鏡頭
	<!-- 開啟前置鏡頭 -->
	<!-- html5QrCode.start({ facingMode: "user" }, config, qrCodeSuccessCallback); -->
	html5QrCode.start({ 
	  facingMode: "environment" }, 
	  config, qrCodeSuccessCallback);
</script>
</head>
</html>

作者: 林壽山

林壽山 目前任職於軟體公司研究開發部門主管,主要採用.net core/.net 5/6 開發,收銀機pos系統開發,第三方支付設計(綠界、馬來西亞epay/happypay、台新one碼),金流設計,行動支付設計(悠遊卡/一卡通),支付寶,微信,街口支付,信用卡機(聯合信用卡),擅長PHP網頁設計(CodeIgniter、Laravel)框架、Delphi程式設計、資料庫設計、C# WinForm/WebForm程式設計、ASP.net MVC、LINE串接、API串接設計