SAPUI5引入了几种在PC端浏览器和移动设备上使用摄像头进行条码扫描的解决方案调用本机（PC或移动设备）的摄像头；如何在弹出的摄像头扫描窗口中完成条码扫描。对于第一步，网上的解决方案太多了。在这篇文章中，Jerry只分享了他在项目中使用和测试过的几个方法。对于第二步，显然我们不需要重新发明轮子，我们可以使用SAPUI5控件库中的sap.ndc.BarcodeScanner控件来操作摄像头进行条码扫描。本文目录如何使用JavaScript调用本机（PC或移动设备）的摄像头如何在弹出的摄像头扫描窗口中完成条码扫描如何在桌面电脑上调试运行在手机上的SAPUI5应用SAPUI5应用为什么运行手机浏览器无法打开手机摄像头如何将SAPUI5打包成Cordova应用并添加Barcode插件下面是正文。在Jerry之前的公众号文章纯JavaScript实现的调用设备摄像头拍照的功能中，他曾经介绍过基于WebRTCAPI访问原生摄像头的方案。WebRTC（WebRealTimeCommunication）是现代浏览器支持的一组API，使Web开发者无需学习多媒体数字信号处理，只需通过纯JavaScript编程即可开发出功能丰富的实时多媒体应用。基础知识。基于WebRTCAPI的应用程序不需要在运行时下载任何额外的浏览器插件或扩展。使用WebRTCAPI进行原生多媒体设备检测的代码：navigator.mediaDevices.enumerateDevices().then(gotDevices);方法enumerateDevices使用异步执行枚举本机支持的所有多媒体设备（包括摄像头），并将结果传递给回调函数gotDevices。在调试器中查看这些枚举的多媒体设备的详细信息，发现与我在Windows10操作系统中看到的一致：在PC或手机浏览器环境中第一次执行上述WebRTCAPI调用时，使用一个web应用，会弹出一个对话框，询问用户是否授予应用访问本地摄像头、麦克风等多媒体设备的权限：至于如何使用JavaScript将当前摄像头视野中的内容保存为图片，与本文主题无关，详细步骤可参考Jerry之前的公众号文章：纯JavaScript实现的调用设备相机拍照功能。以上就是web应用通过WebRTCAPI调用本地摄像头的思路。有朋友会问，如果我用SAPUI5开发，那么上面提到的代码写在SAPUI5应用程序的哪里呢？Component.js还是视图控制器controller.js？具体的代码写法可以参考我的文章：如何在SAPUI5应用中添加使用相机拍照的功能如何在弹出的相机扫描窗口中完成条码扫描工作答案是使用SAPUI5标准控件sap.ndc.BarcodeScannerButton.Details实现步骤参考我的文章：https://jerry.blog.csdn.net/a...按照上面文章中的步骤运行SAPUI5应用第一次打开电脑，点击扫描按钮，会弹出一个对话框，询问用户是否允许应用程序访问相机：选择允许后，相机图标会出现在右上角浏览器，提示用户当前应用正在使用本地摄像头。同时，将带有条码的物体表面放在摄像头前即可顺利完成扫描。如何在桌面电脑上调试手机运行的SAPUI5应用？有朋友反馈，同样的SAPUI5代码在PC浏览器上可以正常访问摄像头，但是在手机浏览器上运行却无法打开摄像头。弹出的是一个对话框，其中扫描仪不可用，要求用户手动输入条形码。在这种情况下，盲目猜测是没有用的。在手机上单步调试，可以帮助准确找到问题的症结所在。我使用的是Android手机+Windows10操作系统。使用Chrome，我可以在PC端的Chrome开发者工具中轻松单步调试手机上运行的SAPUI5应用。具体调试环境配置步骤可以参考我的文章：https://jerry.blog.csdn.net/a...安卓手机开启USB调试模式，笔记本和手机用数据线连接：在Chrome开发者工具中找到手机上运行的SAPUI5应用进程，点击inspect开始调试：调试界面如下图：为什么SAPUI5应用运行时无法打开手机摄像头在手机浏览器中掌握了上一章第1节的调试步骤后，不难找到问题的答案。通过在PC端单步调试手机端运行的SAPUI5应用，Jerry发现在sap.ndc.BarcodeScanner的实现代码中，初始化时会调用getFeatureAPI函数检测cordova.plugin的可用性.barcodeScanner（可用），见下图105行代码。如果可用，将其引用存储在变量oCordovaScannerAPI中。用户点击Scan按钮后，会在下图中584行的if语句中检查oCordovaScannerAPI是否为null。如果不为空，则弹出摄像头扫描页面。否则，执行fallback分支，即下图中618行的else语句，弹出对话框，要求用户手动输入条形码。SAPUI5标准控件barcodeScanner位于命名空间sap.ndc中，ndc代表NativeDeviceCapabilities，暗示这些控件需要原生设备特性支持。有两种方法可以解决cordova.plugin.barcodeScanner不可用的问题。第一种方法是在移动设备上安装SAPFioriClient，然后在FioriClient中运行上面的SAPUI5应用程序。这时候，cordova.plugin.barcodeScanner就可以使用了。SAPFioriClient是一个增强的移动运行时（EnhancedMobileRuntime），建立在ApacheCordova框架之上，为基于Web的SAPFiori应用程序提供更高级别的移动体验，包括设备集成、全屏操作和增强的附件处理等等。关于SAPUI5和Cordova的关系在Jerry的InfoQ文章：SAPMobileDevelopmentTechnologyOverview中有详细讨论。https://xie.infoq.cn/article/...第二种方法是将SAPUI5应用打包成Cordova应用，然后在Cordova应用中添加BarCodeScanner插件。如何将SAPUI5打包成Cordova应用并添加Barcode插件，详细步骤参考Jerry的文章，将SAPUI5应用打包成apk文件，通过Cordova直接安装到Android手机上。https://jerry.blog.csdn.net/a...安装成功后，在手机上查看Cordova应用需要的权限，暂时为“无权限”。按照以下Jerry文章中介绍的步骤将BarcodeScanner插件添加到Cordova应用中：https://jerry.blog.csdn.net/a...添加成功后重新构建应用。点击扫描按钮后，弹出询问用户是否运行应用程序访问设备的相机窗口：允许后，可以使用手机相机扫描条码：扫描成功的界面显示在下图：此时在手机设置面板查看app的权限，发现多了一个使用相机的权限被关闭了。综上所述，以上就是Jerry在实际工作中通过SAPUI5调用设备摄像头进行条码扫描的几种方案的分享。本文各章节的详细实现步骤和代码可点击下方“阅读原文”获取。谢谢阅读。
