程式狂想筆記

一個攻城師奮鬥史

0%

html5-qrcode 簡單研究

發表於 更新於 分類於 Disqus：

最近疾管家
QRCOD掃描功能出來
公司叫我查看怎麼做出這個案例
簡單看了一下
1922 簡訊實聯制 - HackMD

竟然是 html5-qrcode
想看他的原始碼，竟然找不到
後來看原始碼，有看到map設定

突然想到這個好像能看原始碼
保哥 - 前端工程師不可不知的 Source Maps 應用技巧

html5-qrcode 簡單探討

取得相機功能
預防以後API會變
這邊主要連結到官方文件

另外，需要https協定才能開攝像頭

假如你有架設traefik+docker
可以用以下指令快速建制

1
docker run -d --rm  --name my-apache-app  -v "$PWD":/usr/local/apache2/htdocs/     -l  "traefik.http.routers.testweb.rule=Host(\`testweb.xxxx.duckdns.org\`)"  -l "traefik.http.routers.testweb.tls=true"  --net traefik_network  httpd:2.4

抓取設備

GitHub - mebjas/html5-qrcode: A cross platform HTML5 QR code reader

device id 最後一個，為後鏡頭
後來發現，不需要這樣抓後鏡頭

設定後鏡頭

1
2
3

// If you want to prefer back camera
html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);

GitHub - mebjas/html5-qrcode: A cross platform HTML5 QR code reader

開始掃qrcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const html5QrCode = new Html5Qrcode(/* element id */ "reader");
html5QrCode.start(
  cameraId, 
  {
    fps: 10,    // Optional frame per seconds for qr code scanning
    qrbox: 250  // Optional if you want bounded box UI
  },
  qrCodeMessage => {
    // do something when code is read
  },
  errorMessage => {
    // parse error, ignore it.
  })
.catch(err => {
  // Start failed, handle it.
});

暫停掃 qrcode

GitHub - mebjas/html5-qrcode: A cross platform HTML5 QR code reader

1
2
3
4
5
html5QrCode.stop().then(ignore => {
  // QR Code scanning is stopped.
}).catch(err => {
  // Stop failed, handle it.
});

地雷(記得掃到馬上停掉)

記得掃到馬上停掉!!
記得掃到馬上停掉!!
記得掃到馬上停掉!!

因為掃到，持續會callback 開簡訊
會悲劇….

掃到，stopcamera 就比較不會出問題

js 轉簡訊

這邊有個大地雷 qrcode 轉 sms 程式
Android 竟然不能轉
但是IOS可以

這邊就是使用

1
2
3
4
5
6
if (isAndroid()) {
    location.href = "sms:1922?body=00000000"
} else {
    // iOS
    location.href = "sms:1922&body=00000000"
}

Android用超連結就可順利執行

為什麼liff Android 可以直接轉的?目前猜測是line app可以這樣做
把疾管家用到 Chrome 就不能使用
這邊就不深入了

網路範例

bradorego.com/test/sms.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<p>
		<a href="sms:5552345678">Phone only</a>
	</p>
	<p>
		<a href="sms:+15552345678">Phone(+1) only</a>
	</p>
	<p>
		<a href="sms:?body=Hello,%20world">Body only</a>
	</p>
	<p>
		<a href="sms:;body=Hello,%20world">;body only</a>
	</p>
	<p>
		<a href="sms:5552345678?body=Hello%20World">Phone and ?body</a>
	</p>
	<p>
		<a href="sms:+15552345678?body=Hello%20World">Phone(+1) and ?body</a>
	</p>
	<p>
		<a href="sms:5552345678;body=Hello%20World">Phone(+1) and ;body</a>
	</p>
	<p>
		<a href="sms://5552345678">Phone only (sms://)</a>
	</p>
	<p>
		<a href="sms://+15552345678">Phone(+1) only (sms://)</a>
	</p>
	<p>
		<a href="sms://5552345678?body=Hello,%20World">Phone and ?body (sms://)</a>
	</p>
	<p>
		<a href="sms://+15552345678?body=Hello,%20World">Phone(+1) and ?body (sms://)</a>
	</p>
	<p>
		<a href="sms://5552345678;body=Hello,%20World">Phone and ;body (sms://)</a>
	</p>
	<p>
		<a href="sms://+15552345678;body=Hello,%20World">Phone(+1) and ;body (sms://)</a>
	</p>

SMSTO

這邊有個地雷，SMSTO 小米手機不能轉
可以用Google 智慧鏡頭 解決

QRCODE

正常手機掃條碼就能自動轉

彩蛋

vite2: Make Web Dev Fast Again & Again. – Dropbox Paper

ES6,7,8,9,10,11中，用一次就上GitHub - kurotanshi/hex-vite-demo: 2021 大神來六角 demo code癮的語法 – Dropbox Paper