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功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。

  運行時會自動打開攝像頭進行拍攝，同步顯示識別的結果資訊。