从实现思路考虑,可以拆解成两个小步骤(组图)

本文标题中描述的这个需求,可以分解为两个小步骤,从实现的角度来学习:

1.如何使用JavaScript调用本机(PC或移动设备)的摄像头;

2.如何在弹出的摄像头扫描窗口中扫描条码。

第一步解决摄像头不能调用,网上的解决方案太多了。在本文中,Jerry 仅分享了他在项目中使用和测试过的几种方法。

第二步,显然我们不需要重复轮子,我们可以使用SAP UI5控件库中的sap.ndc.BarcodeScanner控件来操作摄像头进行条码扫描。

本文内容

如何使用JavaScript调用本机(PC或移动设备)的摄像头

如何在弹出的摄像头扫描窗口中扫描条码

如何在台式机上调试手机上运行的 SAP UI5 应用程序

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

如何将 SAP UI5 打包到 Cordova 应用程序中并添加 Barcode 插件

以下是正文。

使用 WebRTC API 进行本机多媒体设备检测的代码:

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

方法enumerateDevices采用异步执行方式枚举本机支持的所有多媒体设备(包括摄像头),并将结果传递给回调函数gotDevices。

在调试器中查看这些枚举的多媒体设备的详细信息,发现与我在Windows10操作系统中看到的一致:

当包含上述WebRTC API调用的Web应用程序在PC或手机浏览器环境中首次执行时,会弹出对话框询问用户是否授予应用程序访问原生多媒体设备的权限例如摄像头和麦克风:

至于如何使用JavaScript将当前摄像头视野中的内容保存为图片,与本文主题无关。详细步骤请参考Jerry之前的公众号文章:纯JavaScript实现的调用设备摄像头拍照功能。

以上是使用web应用通过WebRTC API调用原生相机的思路。有的朋友会问,如果我用SAP UI5开发,SAP UI5应用上面提到的代码写在哪里? Component.js 还是视图控制器 controller.js?

具体代码写法见我的文章:如何在SAP UI5应用中添加相机拍照功能。

如何在弹出的摄像头扫描窗口中扫描条码

答案是使用SAP UI5标准控件sap.ndc.BarcodeScannerButton。

详细的实现步骤可以参考我的文章:

按照上篇文章的步骤第一次在PC端运行SAP UI5应用,点击扫描按钮,会弹出对话框询问用户是否允许应用访问Camera:

选择允许后,浏览器右上角会出现一个摄像头图标,提示用户当前应用正在使用本机摄像头。

同时,在将相机放置在包含条形码的物体表面之前,可以成功完成扫描。

如何在台式机上调试手机上运行的 SAP UI5 应用程序

有朋友反映解决摄像头不能调用,同样的SAP UI5代码在PC浏览器上可以正常访问摄像头,但在手机浏览器上运行时无法打开摄像头。弹出的是扫描仪不可用的对话框,允许用户手动输入条码。

在这种情况下,盲目猜测是没有帮助的。在手机上一步步调试有助于查明问题的症结。

我使用的是 Android 手机 + Windows10 操作系统。使用 Chrome,我可以在 PC 上的 Chrome 开发者工具中轻松一步步调试运行在手机上的 SAP UI5 应用程序。

具体调试环境配置步骤可以参考我的文章:

在你的安卓手机上打开USB调试模式,用数据线连接你的笔记本电脑和手机:

在Chrome开发者工具中找到手机上运行的SAP UI5应用进程,点击inspect开始调试:

调试界面如下图所示:

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

一旦你掌握了上一章的调试步骤,你的问题就不难找到答案了。

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

否则执行fallback分支,即下图中第618行的else语句,弹出对话框,要求用户手动输入条码。

SAP UI5标准控件barcodeScanner位于命名空间sap.ndc,ndc代表NativeDeviceCapabilities,暗示这些控件需要原生设备特性的支持。

SAP Fiori Client 是基于 Apache Cordova 框架构建的增强型移动运行时,可为基于 Web 的 SAP Fiori 应用程序提供更高级别的移动体验,包括设备集成、全屏操作和增强型附件处理等。

Jerry 的 InfoQ 文章:SAP 移动开发技术概述中详细讨论了 SAP UI5 和 Cordova 之间的关系。

第二种方法是将SAP UI5应用程序打包成Cordova应用程序,然后将Bar Code Scanner插件添加到Cordova应用程序中。

如何将 SAP UI5 打包到 Cordova 应用程序中并添加 Barcode 插件

详细步骤参考Jerry的文章通过Cordova将SAP UI5应用构建成apk文件,可以直接安装在Android手机上。

安装成功后,在手机上查看这个Cordova应用所需的权限,暂时“No Permissions Required”。

按照下面 Jerry 文章中描述的步骤,将 Barcode Scanner 插件添加到 Cordova 应用程序:

添加成功后重新构建应用。点击扫描按钮后,会弹出一个窗口询问用户是否运行应用程序来访问设备摄像头:

获得许可后,您可以使用手机摄像头扫描条码:

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

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

总结

© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
评论 抢沙发

请登录后发表评论