iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 12
0
Modern Web

穢土轉生之術~ 重構那些自己寫的Code ~系列 第 12

[day12]-使用網頁開啟相機掃描QR Code之WebRTC小小Demo

  • 分享至 

  • xImage
  •  

網站核心功能 - WebRTC


day12

Give me Find服務平台主打的項目之一就是不用下載app,
直接瀏覽網頁按照引導流程就能找到浪浪的身分、主人等等~

其中一個關鍵的技術就是使用網頁開啟相機掃描QRCode
找到了國外開發者開發的github專案(https://github.com/schmich/instascan ),拿來加以修改。

這大概是一年前初次測試的時候錄的Demo影片
Yes
PS:這是我在家的宅樣XD

這是用網頁開啟電腦的Webcam試做,程式流程是
開啟相機 → 掃描QRCode → 掃到QRCode的文字後去用字串去資料庫抓資料→顯示在前端

當然用手機也是可以開的,只是因為現在iOS支援度上時好時壞,之前看到iOS 11要支援WebRTC了,但是實測開啟相機的警示有跳出了,鏡頭還是沒開啟,這部份我必須要在debug一下....
之前有位邦友剛好有這個問題-網頁啟動鏡頭掃描QRcode,可以看看我們的討論串~

手機Demo是用Android的手機開啟我做的網頁,開啟後掃描QRcode,我在功能上修改了可以切換前置鏡頭和後置鏡頭,以防手機型號的不同,認到的鏡頭也不大一樣。
Yes

因為今天是星期六稍微喘息一下,有點偷懶只做了Demo展示(不要打我/images/emoticon/emoticon20.gif
明天可能會推薦我現在在用的Chrome套件(有人許願~

希望大家有什麼想知道的內容,歡迎在底下留言讓我知道,感激不盡!

文後


這兩天因為某件事情傷神傷身,結果被搞了一頓心情不太好.....
前端朋友們、大大們跑來安慰我,我真的心裡很感動,謝謝你們TAT


團隊主題連結

CssCoke - Amos 老師

塔塔默



上一篇
[day11]-應用服務之網站核心功能
下一篇
[day13]-假日分享系列之「前端必備小工具」
系列文
穢土轉生之術~ 重構那些自己寫的Code ~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言