視訊識別(WEB)

# FastWeb之視訊識別

# 1. 說明

通過ml5js的影像識別分類功能，輔助實現影像識別的相關功能。ml5js (opens new window)是基於tensorflow.js的深度學習框架，它安裝簡便，API簡單易懂，可直接在瀏覽器裡面運行，可作為輕量化的智能識別工具。此示例需要線上呼叫數據模型，且會呼叫攝像頭的相關許可權，故此處建議使用https來訪問FastWeb中的此示例。

通過本範例學習，可以掌握ml5js的呼叫方式，並通過攝像頭的實時視訊來實時實現影像識別的相關功能。

使用此示例前，請先確保訪問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。

UgSyntaxEditor01屬性設定

Lines：設定其中顯示的文字資訊。打開編輯器，填寫的內容如下：

<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>基於攝像頭的COCOSSD影像檢測</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>
        <script src="https://unpkg.com/ml5@0.7.1/dist/ml5.min.js" type="text/javascript"></script>
    <body>
        <!--<h1>基於攝像頭的COCOSSD影像檢測</h1>-->
    </body>
    <script>
        let video;
        let detector;
        let detections = [];
        let URLFrame;
        let params = [];

        function setup() {
            createCanvas(640, 480);
            video = createCapture(VIDEO, videoReady);
            video.size(640, 480);
            video.hide();
        }

        function videoReady() {
            // Models available are 'cocossd', 'yolo'
            detector = ml5.objectDetector('cocossd', modelReady);
        }

        function gotDetections(error, results) {
            if (error) {
                console.error(error);
            }
            detections = results;
            console.log(detections);
            detector.detect(video, gotDetections);
        }

        function modelReady() {
            detector.detect(video, gotDetections);
        }

        function draw() {
            image(video, 0, 0);

            for (let i = 0; i < detections.length; i += 1) {
                const object = detections[i];
                stroke(0, 255, 0);
                strokeWeight(4);
                noFill();
                rect(object.x, object.y, object.width, object.height);
                noStroke();
                fill(255);
                textSize(24);
                text(object.label, object.x + 10, object.y + 24);


                if (detections.length > 0) {
                    URLFrame = top.Ext.getCmp("_URLFrame");
                    params = [];
                    params = ["result=" + object.label, "confidence=" + nfc(object.confidence * 100.0, 2)];
                    top.ajaxRequest(URLFrame, 'OutputData', params);
                }

            }
        }
    </script>
    </head>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

Visible：設定控制元件是否可見，設定為False。

# 3. 指令碼設計

點選指令碼設計界面右下角的按鈕，切換至單元選擇界面，勾選需要使用的單元。該程式指令碼不需要引用單元。

# 3.1. 指令碼初始設定

對程式的初始化設定。

//JScript

function UgWebRunFrameOnAfterRunScript(sender)
{
  UGMM.LC(Self);
  UgURLFrame01.HTML = UgSyntaxEditor01.Lines;
}

{
  UgURLFrame01.ClientEvents.UniEvents.Values["beforeInit"] = "function beforeInit(sender, config){config.id = '_URLFrame';}";
  
  Self.OnAfterRunScript = &UgWebRunFrameOnAfterRunScript;
  UgURLFrame01.OnAjaxEvent = &UgURLFrame01OnAjaxEvent;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

Begin
  UgURLFrame01.ClientEvents.UniEvents.Values['beforeInit'] := 'function beforeInit(sender, config){config.id = ''_URLFrame'';}';
End.

1
2
3
4
5
6
7
8
9
10

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

# 3.2. 事件設定

2：UgURLFrame01-OnAjaxEvent事件

設定返回識別的結果資訊。

//JScript
function UgURLFrame01OnAjaxEvent(sender,eventname,params)
//識別結果輸出
{
  if (eventname == "OutputData"){
    UgMemo01.Lines.Add(UGMM.LT("識別項：")+params.Values["result"]);
    UgMemo01.Lines.Add(UGMM.LT("可信度：")+params.Values["probability"]);
  }
}

1
2
3
4
5
6
7
8
9

//PasScript
procedure UgURLFrame01OnAjaxEvent(sender: tcomponent;eventname: string;params: tunistrings);
//識別結果輸出
begin
  if eventname = 'OutputData' Then
  Begin
    UgMemo01.Lines.Add(UGMM.LT('識別項：')+params.Values['result']);
    UgMemo01.Lines.Add(UGMM.LT('可信度：')+params.Values['probability']);
  end;
end;

1
2
3
4
5
6
7
8
9
10

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

# 4. 運行結果

使用滑鼠在FastWeb功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。

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

← 影像識別(WEB) 圖片分類-視覺化控制元件(WEB)→