共计 3081 个字符，预计需要花费 8 分钟才能阅读完成。
本文题目形容的这个需要，从实现思路思考，能够拆解成两个小步骤来学习：
- 如何应用 JavaScript 调用本机 (PC 端或者挪动设施端) 的摄像头；
- 如何在弹出的摄像头扫描窗口中，实现条形码的扫描工作。
对于第一个步骤，网络上有太多的解决方案，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 操作系统里查看到的统一：
在 PC 端或手机端浏览器环境第一次执行蕴含上述 WebRTC API 调用的 Web 利用时，会弹出一个对话框，询问用户是否授予该利用拜访摄像头和麦克风等本机多媒体设施的权限：
至于如何应用 JavaScript 将以后摄像头视线内的内容另存为一张图片，和本文主题无关，具体步骤请参考 Jerry 之前的公众号文章：纯 JavaScript 实现的调用设施摄像头并拍照的性能。
以上是 Web 利用通过 WebRTC API 调用本机摄像头的思路。有的敌人会问，如果我用 SAP UI5 开发，下面提到的这段代码，写在 SAP UI5 利用里什么地位？Component.js 还是视图控制器 controller.js 里？
具体的代码编写能够查看我这篇文章：如何在 SAP UI5 利用里增加应用摄像头拍照的性能
如何在弹出的摄像头扫描窗口中实现条形码的扫描工作
答案是应用 SAP UI5 规范控件 sap.ndc.BarcodeScannerButton.
具体的实现步骤，参考我这篇文章：
https://jerry.blog.csdn.net/a…
依照上述文章步骤在 PC 端第一次运行 SAP UI5 利用，点击 Scan 按钮，会弹出一个对话框，询问用户是否容许该利用拜访 Camera(摄像头)：
抉择容许之后，浏览器右上角会呈现一个摄像头图标，提醒用户，以后利用正在应用本机的摄像头。
同时，把蕴含条形码的物体外表搁置摄像头之前，即可胜利实现扫描。
如何在桌面电脑端调试运行在手机上的 SAP UI5 利用
有敌人反映，同样的 SAP UI5 代码，在 PC 浏览器端能够失常拜访摄像头，在手机端浏览器运行，就无奈关上摄像头。弹出的是一个扫描器不可用，让用户手动输出条形码的对话框。
遇到这种状况，自觉猜想杯水车薪。在手机上单步调试，有助于精确找到问题症结。
我应用的是 Android 手机 + Windows10 操作系统，应用 Chrome 能够不便地在 PC 端的 Chrome 开发者工具里单步调试运行在手机端的 SAP UI5 利用。
具体的调试环境配置步骤，参考我这篇文章：
https://jerry.blog.csdn.net/a…
在 Android 手机上关上 USB 调试模式，用数据线将笔记本电脑和手机连接起来：
在 Chrome 开发者工具里找到手机上运行的 SAP UI5 利用过程，点击 inspect 即可开始调试：
调试界面如下图所示：
为什么 SAP UI5 利用运行在手机浏览器时打不开手机的摄像头
把握了前一章节的调试步骤后，就不难找到问题的答案了。
Jerry 通过在 PC 端单步调试运行在手机上的 SAP UI5 利用，发现 sap.ndc.BarcodeScanner 的实现代码里，在初始化时会调用 getFeatureAPI 函数，去检测 cordova.plugin.barcodeScanner 的可用性(availability)，见下图第 105 行代码所示。如果可用，将其援用存储到变量 oCordovaScannerAPI 里。
用户点击 Scan 按钮后，会在下图第 584 行的 if 语句里，查看 oCordovaScannerAPI 是否为 null，如果不为 null，弹出摄像头扫描页面。
否则执行 fallback 分支，即下图第 618 行的 else 语句，弹出一个对话框，要求用户手动输出 barcode.
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 应用程序提供了更高级别的挪动体验，包含设施集成、全屏操作和加强的附件解决等等。
对于 SAP UI5 和 Cordova 的关系，在 Jerry 的 InfoQ 文章中有具体阐述：SAP 挪动开发技术综述。
https://xie.infoq.cn/article/…
第二种方法，把 SAP UI5 利用打包成 Cordova 利用，而后给该 Cordova 利用增加 Bar Code Scanner 插件。
如何把 SAP UI5 打包成 Cordova 利用并增加 Barcode 插件
具体步骤参考 Jerry 这篇文章，将 SAP UI5 利用通过 Cordova 构建成一个可能间接装置在 Android 手机的 apk 文件。
https://jerry.blog.csdn.net/a…
胜利装置后，在手机上查看该 Cordova 利用须要的权限，临时为 “ 无需权限 ”。
通过 Jerry 上面这篇文章介绍的步骤，给该 Cordova 利用增加 Barcode Scanner plugin：
https://jerry.blog.csdn.net/a…
胜利增加之后从新构建利用，点击 Scan 按钮之后，弹出了询问用户是否运行该利用拜访设施摄像头的窗口：
容许之后，就能应用手机摄像头，扫描条形码了：
扫描胜利的界面如下图所示：
此时在手机设置面板里查看该利用的权限，发现多出一项相机的应用权限了。
总结
以上就是 Jerry 理论工作中用过的通过 SAP UI5 调用设施摄像头进行条形码扫描的几种解决方案的分享。本文每个章节的具体实现步骤和代码，通过点击上面的 ” 浏览原文 ” 取得。
感激浏览。
