FastWeb之视频识别-可视化控件(WEB)

1. 说明

  通过ml5js的图像识别分类功能，辅助实现图像识别的相关功能。ml5js (opens new window)是基于tensorflow.js的深度学习框架，它安装简便，API简单易懂，可直接在浏览器里面运行，可作为轻量化的智能识别工具。此示例需要在线调用数据模型，且会调用摄像头的相关权限，故此处建议使用https来访问FastWeb中的此示例。

  通过本范例学习，可以掌握UgVideoDetect的使用方法，并通过摄像头的实时视频来实时实现图像识别的相关功能。

  使用此示例前，请先确保访问FastWeb的客户端能够访问互联网的资源，此处使用的是在线的数据模型资源。

2. 设计明细

  开启FastWeb设计器，分别加入下插图之控件。或者点击左上角的[导入]选择模板文件来打开对应模板。

  1：TUgLabel组件，控件名称为UgLabel01。

  2：TUgURLFrame组件，控件名称为UgURLFrame01。

  3：TUgMemo组件，控件名称为UgMemo01。

• UgWebRunFrame属性设置

  • Height：设置页面高度=600。
  • Width：设置页面宽度=800。

• 1：UgLabel01属性设置

  • Align：设置控件的对齐方式，设置为alTop。
  • Alignment：设置控件中的文本的对齐方式，设置为taCenter。
  • AutoSize：设置控件是否跟随文字大小变化控件大小，设置为False。
  • Caption：设置显示的文本内容，设置为图片分类。
  • Font：设置字体，点击√打开字体设置界面。

  

• 2：UgURLFrame01属性设置

  • Anchors：设置锚点信息，设置akLeft、akTop、akRight、akBottom为True。

• 3：UgMemo01属性设置

  • Anchors：设置锚点信息，设置akLeft、akRight、akBottom为True，其余选项为False。

3. 脚本设计

  点击脚本设计界面右下角的按钮，切换至单元选择界面，勾选需要使用的单元。该程序脚本不需要引用单元。

3.1. 脚本初始设置

  对程序的初始化设置。

//JScript


{
  Self.OnAfterRunScript = &UgWebRunFrameOnAfterRunScript;
  UgVideoDetect01.OnResult = &UgVideoDetect01OnResult;
  UgVideoDetect01.Init;
}

//PasScript
procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
begin
  UgURLFrame01.HTML := UgSyntaxEditor01.Lines;
end;

Begin
  UgVideoDetect01.Init;
End.

// Make sure to add code blocks to your code group

3.2. 事件设置

• UgWebRunFrame-OnAfterRunScript事件

  初始化运行状态，设置网页显示的内容。执行多语言翻译。

//JScript
function UgWebRunFrameOnAfterRunScript(sender)
{
  UGMM.LC(Self);
}

//PasScript
procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
begin
  UGMM.LC(Self);
end;

// Make sure to add code blocks to your code group

• 2：UgVideoDetect01-OnResult事件

  设置返回识别的结果信息。

//JScript
function UgVideoDetect01OnResult(sender,alabel,aconfidence)
{
  UgMemo01.Lines.Add(UGMM.LT("识别项：") + alabel);
  UgMemo01.Lines.Add(UGMM.LT("可信度：") + aconfidence);
}

//PasScript
procedure UgVideoDetect01OnResult(sender: tobject;const alabel: string;const aconfidence: string);
begin
  UgMemo01.Lines.Add(UGMM.LT('识别项：') + alabel);
  UgMemo01.Lines.Add(UGMM.LT('可信度：') + aconfidence);
end;

// Make sure to add code blocks to your code group

4. 运行结果

  使用鼠标在FastWeb菜单，点击[保存至数据库]按钮，将其保存至数据库，点击[调试运行]确认能够正常打开。

  运行时会自动打开摄像头进行拍摄，同步显示识别的结果信息。