(39)uniGUI for Delphi 扫描二维码

                                                                                 (中行雷威2020.05.21)

(同一个世界,同一个梦想,交流学习C++Builder and Delphi XE10,传承c++builder and Delphi的魅力!欢迎各地朋友加入我的QQ群484979943,进群密码“BCB”,同时也请将该群号广为宣传,希望能够广集各方高手,共同进步。如需下载开发工具及源代码请加入我的QQ群。)

【阅读倡议】

1、有问题请留言;

2、没问题请点赞;

3、看连载请加群;

4、下源码请加群;

【开发工具】

1、C++Builder and Delphi 10.3.3

2、FMSoft_uniGUI_Complete_Professional_1.70.0.1531(正版)

本人主笔的国内第一本uniGUI教学案例代码已诞生,分为cbuilder和delphi两个版本,买代码送教程,需要的朋友可以加入我的QQ技术交流群484979943给我(群主)留言。资料简介:

https://www.meipian.cn/20b86ayo?share_from=others&user_id=64168117&uuid=a8a75af8c0cc31e6a21b8a79a2b07398&share_depth=1&first_share_uid=64168117&utm_medium=meipian_android&share_user_mpuuid=94b70e99e8b6986c71b270a9883befb2

1.1手机扫描二维码

UniGUI目前(截至1525版本)还没有自己的扫码控件,但是它最大的特点就是打通了对JavaScript的调用,可以调用第三方的js实现扫码,本例将调用ZXing扫码的js代码实现移动设备扫码,它既是一个扫码案例,又是一个详细阐释uniGUI如何调用JavaScript和回调的案例。

1、布局

新建一个项目,配置好并保存项目,然后编译运行项目,生成输出目录结构,然后将本节配套代码files目录下的beep-digital.mp3(扫码声音文件)和zxing.min.js(ZXing的JavaScript文件)复制到Win32\Debug\files目录下;因为ZXing扫码使用了https加密连接,需要SSL证书和SSL库文件,将tools目录下的cert.pem、key.pem、root.pem(SSL证书文件)、libeay32.dll、ssleay32.dll(SSL驱动文件)复制到Win32\Debug目录下(证书文件的生成及https连接的使用方法详见我的《UniGUI入门到精通》教程的“加密连接”章节)。

在MainmForm上添加一个UnimHTMLFrame、两个UnimButton和一个UnimMemo。UnimHTMLFrame1用来关联ZXing的js脚本实现摄像头选择和摄像头扫码;UnimButton一个用来启动扫码,命名为btnStart,一个用来停止扫码,命名为btnStop;UnimMemo1用来记录扫码结果,命名为mResult。

 

                                                                         

 

控件名称

属性

取值

说明

UnimHTMLFrame1

Align

alTop

 

 

AlignWithMargins

TRUE

保留控件四周边界

btnStart(UnimButton1)

Align

alTop

 

 

AlignWithMargins

TRUE

保留控件四周边界

btnReset(UnimButton2)

Align

alTop

 

 

AlignWithMargins

TRUE

保留控件四周边界

mResult(UnimMemo1)

Align

alTop

 

 

AlignWithMargins

TRUE

保留控件四周边界

UniServerModule

CustomFiles

files/zxing.min.js

调用Zxing JS代码

 

FilesFolder

files\

默认文件目录

 

SSL->Enabled

TRUE

启动SSL

 

SSL->Password

8077

HTTPS端口

 

SSL->CertFile

cert.pem

证书文件及配置

 

SSL->KeyFile

key.pem

 

SSL->Method

sslvTLSv1_1

 

SSL->Mode

sslmUnassigned

 

SSL->RootCertFile

root.pem

 

SSL->Versions

[sslvTLSv1_1]

2、功能

系统启动后直接调用主窗口MainmForm的OnReady事件初始化硬件设备,搜索设备共有几个摄像头,然后列举出来,选择一个后置摄像头,点击btnStart按钮开始扫码,对准条形码或二维码,滴的一声将在下方的UnimMemo里出现扫码结果;点击btnReset按钮将停止扫描,可以重新选择新的摄像头,屏幕中如果同时出现一个条形码和一个二维码,将优先扫描二维码。

3、代码

1)UnimHTMLFrame1的HTML属性代码

<audio id="player" height="0px" src="files/beep-digital.mp3" style="display:none"></audio>

<div>

  <video id="video" width="100%" height="100%" style="border: 1px solid gray"></video>

</div>

 

<div id="sourceSelectPanel" style="display:none">

  <label for="sourceSelect">Change video source:</label>

  <select id="sourceSelect" style="max-width:400px">

  </select>

</div>

2)UniServerModule的CustomFiles属性代码

files/zxing.min.js

 

3)UnimMain.pas核心代码

    procedure btnInitClick(Sender: TObject);//定义摄像头初始化函数

    procedure btnStartClick(Sender: TObject);//开始扫码事件

    procedure btnResetClick(Sender: TObject);//停止扫码事件

    …

 

//初始化摄像头清单, 让MainmForm的OnReady事件直接调用btnInitClick函数

procedure TMainmForm.btnInitClick(Sender: TObject);

var

  tmpStr:String;

begin

tmpStr:=UnimHTMLFrame1.JSName +'._ael=document.getElementById("player");'+ UnimHTMLFrame1.JSName +'._ael.load();'+

  UnimHTMLFrame1.JSName + '.oldResultText="";'+

  'let selectedDeviceId;'+

  '    const codeReader = new ZXing.BrowserMultiFormatReader();'+

  '    codeReader.getVideoInputDevices()'+

  '      .then((videoInputDevices) => {'+

  '        const sourceSelect = document.getElementById("sourceSelect");'+

  '        selectedDeviceId = videoInputDevices[0].deviceId;'+

  '        if (videoInputDevices.length >= 1) {'+

  '          videoInputDevices.forEach((element) => {'+

  '            const sourceOption = document.createElement("option");'+

  '            sourceOption.text = element.label;'+

  '            sourceOption.value = element.deviceId;'+

  '            sourceSelect.appendChild(sourceOption);'+

  '          });'+

 

  '          sourceSelect.onchange = () => {'+

  '            selectedDeviceId = sourceSelect.value;'+

  '          };'+

 

  '          const sourceSelectPanel = document.getElementById("sourceSelectPanel");'+

  '          sourceSelectPanel.style.display = "block";'+

  '        }'+

 

  '        document.getElementById("'+ btnStart.JSId +'").addEventListener("click", () => {'+

  '          codeReader.decodeFromVideoDevice(selectedDeviceId, "video", (result, err) => {'+

  '            if (result&&result.text!='+UnimHTMLFrame1.JSName+'.oldResultText) {'+

  '              window.ajaxRequest('+ UnimHTMLFrame1.JSName +', "getResult", ["result="+result.text]);'+

                 UnimHTMLFrame1.JSName + '.oldResultText=result.text;'+

  '            }'+

  '            if (err && !(err instanceof ZXing.NotFoundException)) {'+

  '            }'+

  '          });'+

  '        });'+

  '        document.getElementById("'+ btnReset.JSId +'").addEventListener("click", () => {'+

  '          codeReader.reset();'+

  '          ajaxRequest('+ UnimHTMLFrame1.JSName +', "getResult", ["result="+""]);'+

  '        })'+

  '      })'+

  '      .catch((err) => {'+

  '        alert(err)'+

  '      })';

  UniSession.AddJS(tmpStr);

end;

 

//停止扫码

procedure TMainmForm.btnResetClick(Sender: TObject);

begin

  (Sender as TUnimButton).JSInterface.JSCall('element.dom.click', []);

end;

 

//开始扫码

procedure TMainmForm.btnStartClick(Sender: TObject);

begin

  (Sender as TUnimButton).JSInterface.JSCall('element.dom.click', []);

end;

 

//UnimHTMLFrame的OnAjaxEvent事件实现Ajax回调传回扫码结果

procedure TMainmForm.UnimHTMLFrame1AjaxEvent(Sender: TComponent;

  EventName: string; Params: TUniStrings);

begin

  if (EventName = 'getResult') and (Params.Values['result']<>Trim(mResult.Text)) then

  begin

    mResult.Lines.Add(FormatDateTime('yyyyMMdd hh:nn:ss',Now()));

    mResult.Lines.Add('【'+Params.Values['result']+'】');

    UnimHTMLFrame1.JSInterface.JSCall('_ael.play', []);

  end;

 

end;

 

initialization

  RegisterAppFormClass(TMainmForm);

 

end.

4、效果

设置手机,让谷歌浏览器拥有摄像头和声音权限,打开手机的谷歌浏览器,输入https://服务地址:8077,操作体验一下吧(本案例在华为和小米手机均调试通过,在PC版谷歌浏览器上测试时偶尔会出现摄像头快速闪断现象)。

   

   

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值