为什么 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/1e9d01b8bf26f94970e042ce2
第二种办法,把 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 应用需要的权限,暂时为 “无需权限”。
通过 Jerry 下面这篇文章介绍的步骤,给该 Cordova 应用添加 Barcode Scanner plugin:
https://jerry.blog.csdn.net/article/details/123501147
成功添加之后重新构建应用,点击 Scan 按钮之后,弹出了询问用户是否运行该应用访问设备摄像头的窗口:
允许之后,就能使用手机摄像头,扫描条形码了:
扫描成功的界面如下图所示:
此时在手机设置面板里查看该应用的权限,发现多出一项相机的使用权限了。
总结
以上就是 Jerry 实际工作中用过的通过 SAP UI5 调用设备摄像头进行条形码扫描的几种解决方案的分享。本文每个章节的详细实现步骤和代码,通过点击下面的"阅读原文"获得。
感谢阅读。