Fiori 实现在网页端调用摄像头扫描二维码进行识别

我们在UI5官方文档上进行搜索Scan,是只能找到一个BarcodeScanner的，这个API是无法实现我们这个需求的，所以如果有朋友收到这种需求，不想做的情况下，是可以推脱一下，把问题抛给SAP的（笑）。既然写了博客，也是可以推断到我没有进行推脱哈（笑）。不过非标准功能，使用第三方库进行开发始终是有风险，可以自行评估下。我们下面直接进入今天的主题吧。

实现这个需求使用了一个第三方的开源库 mebjas/html5-qrcode

Gitthub:https://github.com/mebjas/html5-qrcode

参考博客：QR Code scanner using HTML5 and Javascript | Minhaz’s Blog

那么接下来和引入其他第三库的步骤是一模一样的。

在webapp里面创建一个文件夹lib,再在里面新建一个js文件html5-qrcode.min.js

把这个链接

https://raw.githubusercontent.com/mebjas/html5-qrcode/master/minified/html5-qrcode.min.js

下面的js 复制一份，然后粘贴进刚刚创建的html5-qrcode.min.js里面。文件结构见下截图

然后view里面可以使用一个layout来充当我们扫描控件的容器

<mvc:View controllerName="YTEST_QR_CODE.controller.App" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"xmlns:l="sap.ui.layout" displayBlock="true" xmlns="sap.m"><App><pages><Page title="{i18n>title}"><Panel headerText="Static (decorative) HTML Provided as a String With Preserved DOM After Rendering"><content><l:HorizontalLayout id="staticContentLayout"><l:content></l:content></l:HorizontalLayout></content></Panel></Page></pages></App>
</mvc:View>

contoller代码，在onInit方法里面放个input当成qrcode的容器，在onAfterRendering里面

sap.ui.define(["sap/ui/core/mvc/Controller","sap/ui/core/HTML","sap/m/MessageToast","YTEST_QR_CODE/lib/html5-qrcode.min"
], function(Controller, HTML, MessageToast, Html5Qrcodejs) {"use strict";return Controller.extend("YTEST_QR_CODE.controller.App", {//定时器onInit: function() {//MessageToast.show("2018年9月20日，第四次当选自民党总裁；2020年8月28日，宣布辞任首相，于9月16日正式卸任并离开首相官");      //  MessageToast.show("777",{"duration":5000})var oHtml = this.byId("htmlControl");if (!oHtml) {var sId = this.createId("htmlControl");oHtml = new HTML(sId, {// the static content as a long string literalcontent: "<div id='testreader' width='600px'></div>" +"<input type='file' id='qr-input-file' accept='image/*' capture >",preferDOM: false});var oLayout = this.byId("staticContentLayout");oLayout.addContent(oHtml);}},onAfterRendering: function() {function onScanSuccess(decodedText, decodedResult) {// Handle on success condition with the decoded text or result.console.log(`Scan result: ${decodedText}`, decodedResult);MessageToast.show(decodedText);};var html5QrcodeScanner = new Html5QrcodeScanner("testreader", {fps: 10,qrbox: 250});html5QrcodeScanner.render(onScanSuccess);},onScanSuccess: function(decodedText, decodedResult) {// handle the scanned code as you like, for example:// console.log(`Code matched = ${decodedText}`, decodedResult);},onScanFailure: function(error) {// handle scan failure, usually better to ignore and keep scanning.// for example://   console.warn(`Code scan error = ${error}`);},onPress: function() {}});
});

Fiori 实现在网页端调用摄像头扫描二维码进行识别相关推荐

PC端调用摄像头扫描二维码，拿到二维码信息
PC端调用摄像头扫描二维码,拿到二维码信息 <template><el-dialogtitle="扫描设备二维码":visible.sync="dial ...
C#生成二维码、调用摄像头扫描二维码
二维码的生成和解码,有两个开源项目可以参考: 一个是google的zxing,另外一个是ThroughWork. zxing做的很全面,支持各种语言和平台,具体不多讲,自己查去.ThroughWork ...
关于Unity调用摄像头扫描二维码与生成二维码的实现方法
1.常用的生成二维码网址 https://cli.im/ 2.上官网下载二维码插件 http://zxingnet.codeplex.com/ 3.将下载的插件中zxing.unity.dll文件放入 ...
vue实现调用摄像头扫描二维码
安装依赖:vue-qrcode-reader npm install vue-qrcode-reader -s 直接上代码 <template><div><div cla ...
h5端呼起摄像头扫描二维码并解析
2016年6月29日补充: 最近做了一些与表单相关的项目,使用了h5的input控件,在使用过程中遇到了很多的坑.也包括与这篇文章相关的. 首先我们应该知道使用h5新提供的属性getUserMedia ...
web/html5调用摄像头实现二维码扫描效果（代码实例）
本文给大家介绍如何用web/html5调用摄像头实现二维码扫描的效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 利用html5(navigator.getUserMedia)调 ...
Python实现PC摄像头扫描二维码，让你的电脑变身QR码识读器！
目录简介: 源代码: 源代码说明: 效果如下所示: 简介: 使用PC摄像机扫描二维码可以有很多应用场景,例如: 支付宝.微信支付等移动支付方式需要使用二维码进行支付,PC摄像机可以扫描这些支付二维码 ...
【javascript】浏览器调用摄像头扫二维码踩坑记录
前言最近做一个项目需要用浏览器调用摄像头扫二维码,然后就踩了几个坑记录下. 踩坑记录我一开始发现了zxing这个库,他分为https://www.npmjs.com/package/@zxing/ ...
SLAM无人车通过上摄像头扫描二维码重定位
SLAM无人车通过上摄像头扫描二维码重定位 slam 无人车扫描二维码重定位initpose 实现原理: 1.内参标定 2.外参标定得到相机相对于小车的安装坐标 3.通过功能包 ar_track_al ...
C# 调用摄像头解析二维码
上次的二维码项目中,在解析的时候用的是扫码枪自动解析并以键盘形式输出,二次开发及通用性不高.本次项目使用AForge库调用摄像头采集二维码照片,再使用ZXing库解析二维码,较之前通用性更高. 一.调 ...

Fiori 实现在网页端调用摄像头扫描二维码进行识别

Fiori 实现在网页端调用摄像头扫描二维码进行识别相关推荐

最新文章

热门文章