SAP UI5 在 PC 端浏览器和移动设备使用摄像头进行条形码扫描的几种解决方案介绍(二)

简介: SAP UI5 在 PC 端浏览器和移动设备使用摄像头进行条形码扫描的几种解决方案介绍

为什么 SAP UI5 应用运行在手机浏览器时打不开手机的摄像头

掌握了前一章节的调试步骤后,就不难找到问题的答案了。


Jerry 通过在 PC 端单步调试运行在手机上的 SAP UI5 应用,发现 sap.ndc.BarcodeScanner 的实现代码里,在初始化时会调用 getFeatureAPI 函数,去检测 cordova.plugin.barcodeScanner 的可用性(availability),见下图第 105 行代码所示。如果可用,将其引用存储到变量 oCordovaScannerAPI 里。

43.png

用户点击 Scan 按钮后,会在下图第 584 行的 if 语句里,检查 oCordovaScannerAPI 是否为 null,如果不为 null,弹出摄像头扫描页面。

44.png

否则执行 fallback 分支,即下图第 618 行的 else 语句,弹出一个对话框,要求用户手动输入 barcode.

45.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 应用程序提供了更高级别的移动体验,包括设备集成、全屏操作和增强的附件处理等等。

image.png

关于 SAP UI5 和 Cordova 的关系,在 Jerry 的 InfoQ 文章中有详细论述:SAP 移动开发技术综述。

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

47.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 应用需要的权限,暂时为 “无需权限”。

image.png

通过 Jerry 下面这篇文章介绍的步骤,给该 Cordova 应用添加 Barcode Scanner plugin:

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

48.png

成功添加之后重新构建应用,点击 Scan 按钮之后,弹出了询问用户是否运行该应用访问设备摄像头的窗口:

image.png

允许之后,就能使用手机摄像头,扫描条形码了:

49.png

扫描成功的界面如下图所示:

image.png

此时在手机设置面板里查看该应用的权限,发现多出一项相机的使用权限了。

image.png

总结

以上就是 Jerry 实际工作中用过的通过 SAP UI5 调用设备摄像头进行条形码扫描的几种解决方案的分享。本文每个章节的详细实现步骤和代码,通过点击下面的"阅读原文"获得。

感谢阅读。





46.png


43.png

目录
相关文章
|
6月前
|
移动开发 小程序 API
微信外部浏览器或短信链接唤起微信小程序的解决方案
微信外部浏览器或短信链接唤起微信小程序的解决方案
1328 1
|
14天前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
79 0
|
6月前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
|
3月前
|
数据采集 Web App开发 测试技术
使用Selenium调试Edge浏览器的常见问题与解决方案
在互联网数据采集领域,Selenium常用于自动化网页爬取。针对使用Edge浏览器时遇到的启动远程调试失败、访问受限及代理IP设置等问题,本文提供了解决方案。通过特定命令启动Edge的远程调试模式,并利用Python脚本配合Selenium库,可实现代理IP、User-Agent的设定及Cookie管理等高级功能,有效提升爬虫稳定性和隐蔽性。遵循步骤配置后,即可顺畅执行自动化测试任务。
645 1
使用Selenium调试Edge浏览器的常见问题与解决方案
|
4月前
|
编解码 前端开发 图形学
【技术深度解析】多平台适配下的UI适配难题:U3D游戏UI错乱的终极解决方案
【7月更文第12天】随着移动设备市场的多元化,Unity游戏开发者面临的一大挑战是如何在不同分辨率和屏幕尺寸的设备上保持UI的一致性和美观性。游戏在高分辨率平板与低分辨率手机上呈现出的UI布局混乱、按钮错位等问题,严重影响玩家体验。本文旨在探讨Unity UI(UGUI)在多平台适配中的最佳实践,通过优化Canvas Scaler设置、灵活运用RectTransform和Anchor Points,以及高效利用设计工具,确保UI的完美适配。
517 1
|
4月前
|
编解码 JavaScript
【vue2】vue2 适配pc端,解决浏览器缩放问题,解决电脑显示设置缩放、分辨率问题
【vue2】vue2 适配pc端,解决浏览器缩放问题,解决电脑显示设置缩放、分辨率问题
372 1
|
4月前
element UI【解决方案】消息弹框被对话框遮挡($message消息框被dialog或$alert遮罩)
element UI【解决方案】消息弹框被对话框遮挡($message消息框被dialog或$alert遮罩)
171 3
|
4月前
|
JavaScript
element-ui 在vue中el-input输入框的autofocus属性失效【解决方案】
element-ui 在vue中el-input输入框的autofocus属性失效【解决方案】
223 1
|
4月前
|
Web App开发 编解码
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
|
4月前
|
JavaScript
vue项目中升级element ui(含常见报错及解决方案,如表格不显示,el-table无效, “__v_isRef“ is not defined,Use :deep() instead)
vue项目中升级element ui(含常见报错及解决方案,如表格不显示,el-table无效, “__v_isRef“ is not defined,Use :deep() instead)
51 0