Kinect 2.0 Programming (4)

Kinect04

FELab

2016/03/22

1

Kinect 結合Microsoft Project Oxford

Kinect04 目標、開發、執行

Face Detection 系統簡介

Kinect04 畫面規劃

Kinect04 實作

Face API 相關資料

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

Kinect04 程式顯示 Kinect One 持續傳入的彩色影像，

將挑選瞬間的影像存成 JPEG 檔，將影像檔案上傳雲

端Microsoft Project Oxford 提供之臉部偵測 (Face

Detection)服務，以取得影像中人臉位置、年齡、性

別、微笑程度等資訊，將資訊整理後顯示在畫面。

開發者必須簽署(Subscribe) Face API 以取得

subscription key

Kinect04 目標、開發、執行

18

開發工具為Windows 10 加上 Visual Studio 2015 環境

之 C# + WPF + Kinect for Windows SDK 2.0

使用組件：Project Oxford Face V1.0.0、

Newtonsoft.Json V8.0.3

程式執行時需將 Kinect One 接上電腦之 USB 3.0 插

槽且電腦需連上 Internet

建議將螢幕解析度調為 1920x1080或以上

19

Face Detection 系統簡介

一張圖片最多可以偵測出 64個人臉

圖片中可偵測出的人臉最小要達到 36x36 Pixels

圖檔的格式必須是 JPEG (也就是 .jpg 檔案)

圖檔的大小限制為 4 MB

偵測出的人臉位置以 (left, top, width, height) 描述

偵測出的人臉亦可傳回性別 (gender)、年齡 (age) 、

微笑 (smile) 及其他資料

20

申請 Face API subscription key

https://www.projectoxford.ai/Subscription

21

22

23

免費使用者，程式呼叫 Face API每分鐘最多 20次，

每月最多 5000 次。

24

計費方式 (2016/03/22)：

25

視窗大小為 1440x810 (Kinect04)

一個 Image控制項顯示 1024x768圖像 (FaceImage)

一個 Button控制項操控 Kinect 影像傳入 (Kinect)

一個 Button控制項自動將畫面影像以 jpg 格式存檔

於與 Kinect04.exe 相同檔案夾處，檔名依存檔時間自

動命名。 (Save)

Kinect04 畫面規劃

26

一個 Button控制項挑選儲存在電腦裡的 JPEG圖檔

(Browse)

一個 Button控制項操控臉部偵測 (Detect)

一個 TextBlock控制項顯示偵測結果，包括圖檔中的

人臉數目、年齡、性別、微笑程度 (Result)

27

建立 Kinect04 方案

起動 Visual Studio Professional 2015

點選「檔案(F)」→「新增(N)」→「專案(P)…」→「Visual

C#」→「WPF 應用程式」

「名稱(N)」填入 Kinect04 (原來是WpfApplication1)

「位置(L)」利用瀏覽(B)… 選定目錄

點選「確定」

Kinect04 實作

28

填入專案名稱利用瀏覽選定目錄

29

Kinect04 專案預設的參考項目

30

加入Microsoft.Kinect組件使 SDK 可以被專案使用

在『參考』處按右鍵，點選『加入參考(R)』

點選「擴充功能」→挑選「Microsoft.Kinect 2.0.0.0」

→ CheckBox 處點一下使出現打勾

點選「確定」

31

32

加入 Newtonsoft.Json 使得方便處理 JSON 資料

在『參考』處按右鍵，點選『管理 NuGet 套件…』

在『搜尋 (Ctrl+E)』處填入『Newtonsoft.Json』

點選「瀏覽」

點選「Newtonsoft.Json 25.9M 項下載 v8.0.3」

點選「安裝」

點選「確定」

33

34

35

36

加入Microsoft.ProjectOxford.Face以使用 Face API

在『搜尋 (Ctrl+E)』處填入『Microsoft.ProjectOxford.Face』

點選「瀏覽」

點選「Microsoft.ProjectOxford.Face 3.57K 項下載 v1.0.0」

點選「安裝」→「確定」→「我接受」

37

38

39

40

41

Kinect04 專案參考多出這三項

42

透過Window 的屬性視窗修改Window 的屬性值

名稱：Kinect04

將 Kinect04屬性修改為

Background：單色筆刷 (R：160 G：240 B：220 A：100%)

FontSize：20

Height：810

ResizeMode：CanMinimize

Title：Kinect Face Detection

Width：1440

43

44

將 Kinect04 視窗加入一個 Image 控制項

滑鼠在工具箱的 Image點一下，然後在視窗設計區點一下

名稱：FaceImage

將 FaceImage屬性修改為

Height：576

Margin：0 0 0 0

Width：1024

45

將 Kinect04視窗加入四個 Button控制項

名稱：Kinect

將 Kinect屬性修改為

Background：單色筆刷 (R：80 G：200 B：60 A：100%)

Content：KINECT

FontSize：32

Height：45

Margin：1100 20 0 0

Width：250

46

名稱：Save

將 Save屬性修改為

Background：單色筆刷 (R：200 G：80 B：140 A：100%)

Content：SAVE

FontSize：32

Height：45

Margin：1100 90 0 0

Width：250

47

名稱：Browse

將 Browse屬性修改為

Background：單色筆刷 (R：120 G：150 B：220 A：100%)

Content：BROWSE

FontSize：32

Height：45

Margin：1100 160 0 0

Width：250

48

名稱：Detect

將 Detect屬性修改為

Background：漸層筆刷 (放射漸層 R：200 G：220 B：50A：100%)

Content：DETECT

FontSize：32

Height：45

Margin：1100 230 0 0

Width：250

49

將 Kinect04視窗加入一個 TextBlock控制項

名稱：Result

將 Result屬性修改為

Background：單色筆刷 (R：230 G：200 B：170 A：100%)

FontSize：28

Height：190

Margin：0 580 0 0

Text：

Width：1024

50

滑鼠雙擊 Kinect04事件視窗的 Loaded右邊空白欄位

滑鼠雙擊 Kinect04事件視窗的 Unloaded右邊空白欄位

滑鼠雙擊 Kinect事件視窗的 Click右邊空白欄位

滑鼠雙擊 Save事件視窗的 Click右邊空白欄位

滑鼠雙擊 Browse事件視窗的 Click右邊空白欄位

滑鼠雙擊 Detect事件視窗的 Click右邊空白欄位

加入 Kinect04 專案欲處理的事件

51

現在MainWindow.xaml 檔案如下

52

53

54

現在視窗配置設計區如下

55

寫入程式碼至MainWindow.xaml.cs 檔案

56

57

+=之後接著按 Tab鍵

58

輸入 colorFrameReader.FrameArrived += 接著按 Tab鍵

自動產生 ColorFrameReader_FrameArrived函式

每一個 RGB 影格 (Frame) 傳入時，會觸發一次FrameArrived事件，希望程式對一個 RGB 影格做甚麼處理，就寫在ColorFrameReader_FrameArrived 函

式裏，每秒觸發 30 次。

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

建置 Kinect04 方案

「建置(B)」→「建置方案(B)」

執行 Kinect04 方案

「偵錯(D)」→「啟動但不偵錯(H)」

74

75

1. Face API

https://msdn.microsoft.com/en-US/library/mt481457.aspx

2. Getting Started with Face API in CSharp

https://msdn.microsoft.com/en-us/library/mt605323.aspx

3. How to Detect Faces in Image

https://msdn.microsoft.com/en-us/library/mt605326.aspx

Face API 相關資料

76

4. Face API - V1.0 (Face – Detect)

https://dev.projectoxford.ai/docs/services/563879b6198455

0e40cbbe8d/operations/563879b61984550f30395236

5. Face Demo (Face Detection)

https://www.projectoxford.ai/demo/face#detection

6. Microsoft Project Oxford client SDK and samples

https://github.com/Microsoft/ProjectOxford-ClientSDK