本文標題描述的這個需求，從實現思路考慮，可以拆解成兩個小步驟來學習：

1. 如何使用 JavaScript 呼叫本機( PC 端或者移動裝置端)的攝像頭；
2. 如何在彈出的攝像頭掃描視窗中，完成條形碼的掃描工作。

對於第一個步驟，網路上有太多的解決方案，Jerry 本文只分享自己在專案中用過並測試透過的幾種方法。

對於第二個步驟，顯然我們不用重複造輪子，可以使用 SAP UI5 控制元件庫裡的 sap.ndc.BarcodeScanner 控制元件，操作攝像頭進行條形碼掃描。

本文目錄

# 如何使用 JavaScript 呼叫本機( PC 端或者移動裝置端)的攝像頭
# 如何在彈出的攝像頭掃描視窗中完成條形碼的掃描工作
# 如何在桌面電腦端除錯執行在手機上的 SAP UI5 應用
# 為什麼 SAP UI5 應用執行在手機瀏覽器時打不開手機的攝像頭
# 如何把 SAP UI5 打包成 Cordova 應用並新增 Barcode 外掛

下面是正文。

Jerry 之前的公眾號文章純 JavaScript 實現的呼叫裝置攝像頭並拍照的功能，曾經介紹過一種基於 WebRTC API 訪問本機攝像頭的解決方案。WebRTC(Web Real Time Communication，網頁即時通訊) 是一組現代瀏覽器支援的 API，使得 Web 開發人員僅透過純 JavaScript 程式設計，就能開發出功能豐富的實時多媒體應用，而無需學習多媒體數字訊號處理的底層知識。基於 WebRTC API 的應用在執行時，無需下載任何額外的瀏覽器外掛或擴充套件。

用 WebRTC API 進行本機多媒體裝置檢測的程式碼：

navigator.mediaDevices.enumerateDevices().then(gotDevices);

方法 enumerateDevices 採用非同步執行的方式，列舉出本機支援的所有多媒體裝置(包括攝像頭)，將結果傳遞給回撥函式 gotDevices.

在偵錯程式裡檢視這些列舉出的多媒體裝置明細，發現和我 Windows10 作業系統裡檢視到的一致：
![](https://img-blog.csdnimg.cn/img_convert/e063ef26bcc9df055de78b0d5777d4fe.png)

![](https://img-blog.csdnimg.cn/img_convert/162b184eb486b5015098dd89a1351993.png)

在 PC 端或手機端瀏覽器環境第一次執行包含上述 WebRTC API 呼叫的 Web 應用時，會彈出一個對話方塊，詢問使用者是否授予該應用訪問攝像頭和麥克風等本機多媒體裝置的許可權：

![](https://img-blog.csdnimg.cn/img_convert/c887a52829be434a6e129e3d5992c404.png)

至於如何使用 JavaScript 將當前攝像頭視野內的內容另存為一張圖片，和本文主題無關，詳細步驟請參考 Jerry 之前的公眾號文章：純 JavaScript 實現的呼叫裝置攝像頭並拍照的功能。

![](https://img-blog.csdnimg.cn/img_convert/f19c8acaa3d86176d50a6fd99e27cf14.png)

以上是 Web 應用透過 WebRTC API 呼叫本機攝像頭的思路。有的朋友會問，如果我用 SAP UI5 開發，上面提到的這段程式碼，寫在 SAP UI5 應用裡什麼位置？Component.js 還是檢視控制器 controller.js 裡？

具體的程式碼編寫可以檢視我這篇文章：如何在 SAP UI5 應用裡新增使用攝像頭拍照的功能

# 如何在彈出的攝像頭掃描視窗中完成條形碼的掃描工作

答案是使用 SAP UI5 標準控制元件 sap.ndc.BarcodeScannerButton.

![](https://img-blog.csdnimg.cn/img_convert/3c3c341e54853047a952bab3eaf580e0.png)

詳細的實現步驟，參考我這篇文章：

https://jerry.blog.csdn.net/article/details/123420376

按照上述文章步驟在 PC 端第一次執行 SAP UI5 應用，點選 Scan 按鈕，會彈出一個對話方塊，詢問使用者是否允許該應用訪問 Camera(攝像頭)：

![](https://img-blog.csdnimg.cn/img_convert/4006652d186aca0b87fe185294e7c6ea.png)

選擇允許之後，瀏覽器右上角會出現一個攝像頭圖示，提示使用者，當前應用正在使用本機的攝像頭。

同時，把包含條形碼的物體表面放置攝像頭之前，即可成功完成掃描。

![](https://img-blog.csdnimg.cn/img_convert/f78a0086a45e7de1a2272b1367fcf9ea.png)

# 如何在桌面電腦端除錯執行在手機上的 SAP UI5 應用

有朋友反映，同樣的 SAP UI5 程式碼，在 PC 瀏覽器端可以正常訪問攝像頭，在手機端瀏覽器執行，就無法開啟攝像頭。彈出的是一個掃描器不可用，讓使用者手動輸入條形碼的對話方塊。

![](https://img-blog.csdnimg.cn/img_convert/a35508448d0e066f7ccfcf62872c0018.png)

遇到這種情況，盲目猜測無濟於事。在手機上單步除錯，有助於準確找到問題癥結。

我使用的是 Android 手機 + Windows10 作業系統，使用 Chrome 可以方便地在 PC 端的 Chrome 開發者工具裡單步除錯執行在手機端的 SAP UI5 應用。

具體的除錯環境配置步驟，參考我這篇文章：

https://jerry.blog.csdn.net/article/details/123433404

在 Android 手機上開啟 USB 除錯模式，用資料線將膝上型電腦和手機連線起來：

![](https://img-blog.csdnimg.cn/img_convert/e31e297131943e1014b3903b5522b4d2.png)

在 Chrome 開發者工具裡找到手機上執行的 SAP UI5 應用程式，點選 inspect 即可開始除錯：

![](https://img-blog.csdnimg.cn/img_convert/2c4a9bd832af18d43c845de583861129.png)

除錯介面如下圖所示：

![](https://img-blog.csdnimg.cn/img_convert/81d18be29c17a17ee1487adf27ad1acc.png)

# 為什麼 SAP UI5 應用執行在手機瀏覽器時打不開手機的攝像頭

掌握了前一章節的除錯步驟後，就不難找到問題的答案了。

Jerry 透過在 PC 端單步除錯執行在手機上的 SAP UI5 應用，發現 sap.ndc.BarcodeScanner 的實現程式碼裡，在初始化時會呼叫 getFeatureAPI 函式，去檢測 cordova.plugin.barcodeScanner 的可用性(availability)，見下圖第 105 行程式碼所示。如果可用，將其引用儲存到變數 oCordovaScannerAPI 裡。

![](https://img-blog.csdnimg.cn/img_convert/1cf0bc4b55571648a8e9f522378c74e9.png)

使用者點選 Scan 按鈕後，會在下圖第 584 行的 if 語句裡，檢查 oCordovaScannerAPI 是否為 null，如果不為 null，彈出攝像頭掃描頁面。

![](https://img-blog.csdnimg.cn/img_convert/11ef4a75a2379e0b7f3f68a6164e7776.png)

否則執行 fallback 分支，即下圖第 618 行的 else 語句，彈出一個對話方塊，要求使用者手動輸入 barcode.

![](https://img-blog.csdnimg.cn/img_convert/abf44eb88be364749415baf7982adb94.png)

SAP UI5 標準控制元件 barcodeScanner 位於名稱空間 sap.ndc, ndc 代表 Native Device Capabilities，暗示這些控制元件需要原生裝置特性的支援。

解決 cordova.plugin.barcodeScanner 不可用的問題，有兩種辦法。

第一種辦法，在移動裝置安裝 SAP Fiori Client，然後在 Fiori Client 裡執行上述 SAP UI5 應用，此時 cordova.plugin.barcodeScanner 將處於可用狀態。

SAP Fiori Client 是一個增強移動執行時(Enhanced Mobile Runtime)，構架於 Apache Cordova 框架之上，為基於 Web 的 SAP Fiori 應用程式提供了更高階別的移動體驗，包括裝置整合、全屏操作和增強的附件處理等等。

![](https://img-blog.csdnimg.cn/img_convert/774aec9376c2b98993e2e2f92f84c9c1.png)

關於 SAP UI5 和 Cordova 的關係，在 Jerry 的 InfoQ 文章中有詳細論述：SAP 移動開發技術綜述。

https://xie.infoq.cn/article/1e9d01b8bf26f94970e042ce2

![](https://img-blog.csdnimg.cn/img_convert/704cec638dd5b58982b358a88b9e9ddd.png)

第二種辦法，把 SAP UI5 應用打包成 Cordova 應用，然後給該 Cordova 應用新增 Bar Code Scanner 外掛。

# 如何把 SAP UI5 打包成 Cordova 應用並新增 Barcode 外掛

詳細步驟參考 Jerry 這篇文章，將 SAP UI5 應用透過 Cordova 構建成一個能夠直接安裝在 Android 手機的 apk 檔案。

https://jerry.blog.csdn.net/article/details/123475735

成功安裝後，在手機上檢視該 Cordova 應用需要的許可權，暫時為 "無需許可權"。

![](https://img-blog.csdnimg.cn/img_convert/8d95f4aa6c493d30aa63dde76789af64.png)

透過 Jerry 下面這篇文章介紹的步驟，給該 Cordova 應用新增 Barcode Scanner plugin：

https://jerry.blog.csdn.net/article/details/123501147

![](https://img-blog.csdnimg.cn/img_convert/6f4e1ffeace0f190f8a75b7fcf0246e9.png)

成功新增之後重新構建應用，點選 Scan 按鈕之後，彈出了詢問使用者是否執行該應用訪問裝置攝像頭的視窗：

![](https://img-blog.csdnimg.cn/img_convert/6854de330073313c5300cf87460ebc55.png)

允許之後，就能使用手機攝像頭，掃描條形碼了：

![](https://img-blog.csdnimg.cn/img_convert/04774f1fd85563398ee999df49ebb287.png)

掃描成功的介面如下圖所示：

![](https://img-blog.csdnimg.cn/img_convert/3714d7bbbf51f8855a504a404b282f0d.png)
此時在手機設定皮膚裡檢視該應用的許可權，發現多出一項相機的使用許可權了。

![](https://img-blog.csdnimg.cn/img_convert/c6e48eb5f5b67b3ddc76564db8f190d7.png)

# 總結

以上就是 Jerry 實際工作中用過的透過 SAP UI5 呼叫裝置攝像頭進行條形碼掃描的幾種解決方案的分享。本文每個章節的詳細實現步驟和程式碼，透過點選下面的"閱讀原文"獲得。

感謝閱讀。

SAP UI5 在 PC 端瀏覽器和移動裝置使用攝像頭進行條形碼掃描的幾種解決方案介紹

相關文章