愛招飛幫助手冊 愛招飛幫助手冊
  • FastERP-1
  • Smart
  • PinToo
  • FastWeb
  • FastERP-2 企業管理系統 (opens new window)
  • 印染業ERP (opens new window)
  • 工廠終端機 (opens new window)
  • TARS
  • MARS
  • TaskRunner
  • Flying
  • FastDesk
  • HiDesk
  • HiNAT
  • FastBPM
  • 設備故障診斷 (opens new window)
  • 設備最佳運轉效益 (opens new window)
  • 企業智能助手SmeGPT (opens new window)
  • 燈號管理 (opens new window)
  • 戰情室 (opens new window)
  • 能源管理 (opens new window)
  • 人車定位 (opens new window)
  • 戰情指揮系統 (opens new window)
  • FastERP-1
  • FastWeb
  • Smart
  • PinToo
  • Flying
  • TARS
  • 通用功能

    • Report
    • Script
    • Echarts
    • Chart
    • DB Install
  • FastERP-1
  • Smart
  • PinToo
  • FastWeb
  • FastERP-2 企業管理系統 (opens new window)
  • 印染業ERP (opens new window)
  • 工廠終端機 (opens new window)
  • TARS
  • MARS
  • TaskRunner
  • Flying
  • FastDesk
  • HiDesk
  • HiNAT
  • FastBPM
  • 設備故障診斷 (opens new window)
  • 設備最佳運轉效益 (opens new window)
  • 企業智能助手SmeGPT (opens new window)
  • 燈號管理 (opens new window)
  • 戰情室 (opens new window)
  • 能源管理 (opens new window)
  • 人車定位 (opens new window)
  • 戰情指揮系統 (opens new window)
  • FastERP-1
  • FastWeb
  • Smart
  • PinToo
  • Flying
  • TARS
  • 通用功能

    • Report
    • Script
    • Echarts
    • Chart
    • DB Install
  • FastWeb幫助主頁
  • 學習手冊

  • 開發手冊

    • 通訊協議

    • 互動輸出

    • 媒體存取

    • 人工智慧

      • 地圖定位

      • 影象識別

        • 圖片分類(WEB)
        • 影象識別(WEB)
        • 視訊識別(WEB)
          • 1. 說明
          • 2. 設計明細
          • 3. 指令碼設計
            • 3.1. 指令碼初始設定
            • 3.2. 事件設定
          • 4. 運行結果
        • 圖片分類-視覺化控制元件(WEB)
        • 影象識別-視覺化控制元件(WEB)
        • 視訊識別-視覺化控制元件(WEB)
    • 實體運用

目录

視訊識別(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)

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

      Copyright © 2021-2025 愛招飛IsoFace | ALL Rights Reserved
      • 跟随系统
      • 浅色模式
      • 深色模式
      • 阅读模式