iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 14
5
Modern Web

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

[day14]-使用網頁開啟相機掃描QR Code-instascan介紹+實際應用

instascan的介紹


今天要大略解析一下instascan這個專案。
前幾天有Demo了我串instascan之後的成果(傳送門),主要是實現跨平台可以實現一樣的功能-使用網頁開啟相機掃描QRCode!

那麼instascan又是用什麼技術組成的呢?
且待我略薄的分析一下....


WebRTC

WebRTC的全名是「Web Real-Time Communication」- 網頁即時通訊
是為了實現跨平台、跨瀏覽器、在跨設備上都可以使用網頁瀏覽器來進行即時的影音通訊協定,這個計畫是由Google、Mozila和Opera所提倡並支援,並且為開源專案。

官方網站目前為Google來做維護,可以看到官網上有寫到WebRTC的使命

Our mission: To enable rich, high-quality RTC applications to be developed for the browser, mobile platforms, and IoT devices, and allow them all to communicate via a common set of protocols.

我們到Can I use查詢WebRTC的支援度如下。
Can I use_WebRTC_desktop

橘框框裡是比較偏向桌機板的瀏覽器,可以看到我們的古早味的IE是完全不支援的~~(IE必須死)~~,其他瀏覽器火狐Firefox、Chrome支援度都還不錯。

最重要是我們的手機瀏覽器來看一下支援度如何~
Can I use_WebRTC_mobile

iOS Safari 從iOS11起開始支援WebRTC,但真心覺得每次用在手機上都怪怪的...
補充說明,在上面有說因為iOS和手機版的Safari是綁定在一起的,所以指的是手機系統版本
Can I use_WebRTC_iOS

其餘像是Android Browser支援度也是都還蠻高的,在做Give Me Find專案的那時候還沒有到iOS11,只是剛要出而已....
所以那時候就很傷腦筋,這樣iPhone不支援網站怎麼辦...要怎麼Demo啊!!/images/emoticon/emoticon04.gif(因為我是用iPhone手機)
蘋果不轉人來轉,於是就衍生了另外一種查詢的方式,後面在說明吧~

我個人覺得WebRTC還蠻有趣的,將來應該是一個趨勢!

因為物極必反!現在太多APP形成一種亂象,有點像是免洗APP的概念,想使用一種服務有太多可以選擇了....
就是因為太多太亂,消費者不知道自己裝了什麼也不想冒險裝一個應用程式在手機裡!
所以網頁應用需求上升,這東西將來應該蠻有發展潛力的,我要等我明年寫鐵人賽的時候再回來看是否像我說的一樣/images/emoticon/emoticon39.gif

這裡有蠻多WebRTC的Demo,這些我就不錄影了,請看官們自行用桌電和手機開起來玩玩看囉~

ZXing

ZXing有點像是負責解碼的程式,為一個JAVA的library,同樣是開源的程式碼,圖像解析一維和二維的條碼,具有其他程式語言的接口提供串接。(不負責的看圖說故事XD

附帶小知識:條碼的種類

老實說我對這個不太了解,就草草帶過吧...大致上知道他是幹嘛的就好了(大誤


實際應用

現在我們要來實際的Coding一下instascan這個專案,來完成我們的目標-開啟網頁掃描QRCode
請搭配github服用:(https://github.com/schmich/instascan )

首先你必須在網頁裡掛載instascan.min.js

<script type="text/javascript" src="instascan.min.js"></script>

github裡有提供完整的範例html,講解一下

<!DOCTYPE html>
<html>
<head>
    <title>Instascan</title>
    <script type="text/javascript" src="instascan.min.js"></script>
    <!-- 載入instascan.min.js -->
</head>

<body>
    <video id="preview"></video>
    <!-- 詢問是否允許開啟相機後,會顯示在這個元素裡 -->
    <!-- ---------- -->
    <!-- 以下程式面 -->
    <script type="text/javascript">
    let scanner = new Instascan.Scanner({
        video: document.getElementById('preview')
    });
    // 開啟一個新的掃描
    // 宣告變數scanner,在html<video>標籤id為preview的地方開啟相機預覽。
    // Notice:這邊注意一定要用<video>的標籤才能使用,詳情請看他的github API的部分解釋。

    scanner.addListener('scan', function(content) {
        console.log(content);
    });
    //開始偵聽掃描事件,若有偵聽到印出內容。

    Instascan.Camera.getCameras().then(function(cameras) {
    //取得設備的相機數目
        if (cameras.length > 0) {
          ///若設備相機數目大於0 則先開啟第0個相機(程式的世界是從第零個開始的)
            scanner.start(cameras[0]);
        } else {
          //若設備沒有相機數量則顯示"No cameras found";
          //這裡自行判斷要寫什麼
            console.error('No cameras found.');
        }
    }).catch(function(e) {
        console.error(e);
    });
    </script>
</body>
</html>

做出來的成品就會像這樣

Demo連結

開啟網頁會先問你是否允許開啟相機
Demo

允許後就可以看到開啟相機了
Demo

QRCode準備好,掃下去!
Demo
可以看到開發者工具裡的Console裡印出文字了!(這個網址是我的個網)
代表可以確實的掃到了QRCode/images/emoticon/emoticon12.gif

好啦~這是這個套件的用法~
目前Give me Find服務平台有用到的還有置換前後鏡頭,是想要在寫一個瞄準時有框框出現但是還沒有時間寫....
想要玩更多的應用請至作者的github裡看api用法,或者是WebRTC網站~

今天就寫到這邊了~

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

文後


不要問我為什麼遮臉,身為宅魯工程師是不能曝光的(欸?!


團隊主題連結

CssCoke - Amos 老師

塔塔默



上一篇
[day13]-假日分享系列之「前端必備小工具」
下一篇
[day15]-複選結果!媽 我在這~!&「黃金圈理論」
系列文
穢土轉生之術~ 重構那些自己寫的Code ~30
1
Wen Chien
iT邦新手 5 級 ‧ 2018-10-29 18:43:04

是本尊!/images/emoticon/emoticon32.gif

是達標好文的本尊嗎/images/emoticon/emoticon32.gif

0
henrylin0914
iT邦新手 5 級 ‧ 2019-01-23 13:56:36

版大您好!!
執行您的demo連結出現如圖的錯誤!
另外我在iphone上(ios12)打開連結,相機也不會啟動出來
不知道是哪裡有問題..

https://ithelp.ithome.com.tw/upload/images/20190123/20114828rDkupMCACx.png

看更多先前的回應...收起先前的回應...

抱歉現在才看到您的問題....
iOS的支援度很差,我與另外一位邦友有討論過那可能是safari的問題
iOS只能在觀望看看了....
至於您圖片的問題,請問您有程式碼給我看一下嗎?感謝您^^

/images/emoticon/emoticon02.gif

memo iT邦新手 5 級 ‧ 2020-11-20 11:51:49 檢舉

他們的demo好像有更新
https://schmich.github.io/instascan/

感謝memo通知!!有空我來看一下~/images/emoticon/emoticon41.gif

1
Ho.Chun
iT邦新手 5 級 ‧ 2021-01-04 18:32:26

長知識了! 感謝大大 /images/emoticon/emoticon41.gif

感謝感謝~
因為這一篇文章超多人看的,但我沒有寫得很好.../images/emoticon/emoticon20.gif
改天再來寫一篇更完整應用和解說...(畢竟年代也久遠了..

0
JingRuei
iT邦新手 5 級 ‧ 2021-02-20 15:38:42

請問大大~
我有試著用github的html開開看,也有開你的DEMO連結,都會有同樣的問題
https://ithelp.ithome.com.tw/upload/images/20210220/20135300wUfoApS234.png
這個問題是引用的min.js有修改過還是怎樣嗎??

大大您好~
可能是瀏覽器一直update,可是我沒有跟著update就爆了> <
改天有空我會來debug一下的....感謝您^ ^

我要留言

立即登入留言