这是一个客户和SAP社区经常提出的问题：

我们如何在Fiori应用程序中实现QR扫描仪？我们需要使用cordova插件吗？我们需要做一个混合应用程序吗？

答案很简单，这可以在Fiori中完成，不需要cordova插件，也不需要使其混合。

在过去，不可能从所有移动设备上的web应用程序直接使用相机。对于Android手机来说，这已经有一段时间的可能了。另一方面，iOS设备必须等到iOS 11。尽管这是几年前发布的，但我不确定每个人都知道这意味着iOS支持WebRTC。这也意味着，您可以在Safari中直接使用手机的摄像头：）。无需与Cordova插件和混合应用程序抗争

有关iOS支持WebRTC的更多信息：

https://flashphoner.com/ios-safari-11-now-supports-webrtc/

我在fiori应用程序中创建了QR扫描仪的演示应用程序。这里有一个关于它如何工作的视频。

如果我的试用帐户仍然有效，您可以在这里自己试用：https://2d32c6fatrial-workspaces-ws-w6zlm-app2.eu10.trial.applicationstudio.cloud.sap/bewlScannerApp/index.html

演示应用程序允许您：

选择任何可用的相机是否镜像摄像头扫描二维码

首先，我不是自己实现的吗？为此，bi大数据分析，我使用了一个非常好且易于使用的库：Instascan。有关该库的更多信息，请访问：https://github.com/schmich/instascan

这个图书馆的问题是没有得到很好的维护。当您查看pull请求时，您会注意到许多未合并的pull请求。其中一些包含iOS修复程序…因此，我从这个拉取请求开始：https://github.com/CoyoteLeo/instascan

在Instascan旁边，我还使用了一个WebRTC适配器库：https://github.com/webrtc/adapter

此库将处理不同浏览器中WebRTC实现的差异。您必须保持此库的最新状态，以防浏览器更新WebRTC实现。

我为QR扫描仪创建了一个带有UI5控件的UI5库。为此，我将istanscan和webrtc库添加到我的UI5库中，以便在我的UI5控件中使用它们。

UI5 QR Scanner控件的呈现器非常基本，它包含一个工具栏，带有：

一个下拉列表，返利手游平台，内部优惠券，用于在有多个摄像头（手机前后）的情况下切换摄像头启用或禁用镜像的按钮

（工具栏是在实现代码的init函数中用UI5控件创建的）

在工具栏后面是用于显示相机的视频html标记

渲染器函数正在使用新的控件api：

在控件的"onAfterRendering"函数中，理财返利，我使用Instascan库。这也是我将其绑定到renderer函数中的"video"标记的地方。我在"getDomRef"中使用"lastElementChild"，因为我将它与工具栏包装在一个div中，它是该div中的最后一个元素。

接下来，代码将分配一个eventhandler来处理扫描的对象。它还将获得可用的摄像头，将其添加到dropdownlist。

最后但并非最不重要的一点，它将使用它能找到的第一个启动扫描仪。

在处理扫描对象的eventhandler中，我更新属性"value"以更新绑定并触发事件，以便在视图/控制器中捕获它：

选择另一个摄像头时在下拉列表中，它将在新选择的相机上启动扫描仪。为此，我在控件中实现了以下事件处理程序：

根据您使用的相机，可能需要启用或禁用镜像。如果使用手机的后置摄像头，则无需镜像即可。如果使用前置摄像头，可以考虑使用镜像。为此，我在工具栏中添加了一个开关，它将更改镜像属性：

GitHub上提供完整的项目：https://github.com/lemaiwo/UI5QRScannerApp

这是一个mta，包含带UI5 QR扫描仪控件的UI5库和一个UI5演示应用程序。

带UI5 QR的UI5库扫描仪：

https://github.com/lemaiwo/UI5QRScannerApp/tree/master/ScannerAppLibrary

以UI5演示应用程序为例如何在UI5应用程序中使用此UI5 QR扫描仪控件：

https://github.com/lemaiwo/UI5QRScannerApp/tree/master/ScannerApp

您可以将整个项目克隆到Business Application Studio（BAS）中，并在BAS或将其部署到CF并使用中央审批器运行它。为了支持我的BAS库和中央应用程序，我在组件.js：

（我知道这不是最好的方法，但是在清单中添加库与resourceroots结合可以使它在BAS或中央审批器中工作。两个审批者（BAS和Central）生成不同的url。出于这个原因，我采用"丑陋"的方式，通过在组件.js. 如果在BAS中运行，则从BAS中提供的路径加载库，否则使用Cetnral批准者提供的路径。欢迎您提供任何改进意见！）

在BAS中运行时，返利怎么使用，您还需要将配置更改为以下内容：

请仔细观察"模拟查找目录"。这已经扩展到查找库的"src"文件夹：

在试用帐户上，HTML5应用程序repo还不可见（至少在我的帐户中…），但您可以使用以下命令找到部署到中央审批者的应用程序列表：