Kinect04 程式顯示 Kinect One 持續傳入的彩色影像，將挑選瞬間的影像存成 JPEG 檔，將影像檔案上傳雲端 Microsoft Project Oxford 提供之臉部偵測 (Face Detection) 服務，以取得影像中人臉位置、年齡、性別、微笑程度等資訊，將資訊整理後顯示在畫面。

1. Kinect 2.0 Programming
(4)
Kinect04
FELab
2016/03/22
1

2. Kinect 結合 Microsoft Project Oxford
 Kinect04 目標、開發、執行
 Face Detection 系統簡介
 Kinect04 畫面規劃
 Kinect04 實作
 Face API 相關資料
2

3. 3

4. 4

5. 5

6. 6

7. 7

8. 8

9. 9

10. 10

11. 11

12. 12

13. 13

14. 14

15. 15

16. 16

17. 17
Kinect04 程式顯示 Kinect One 持續傳入的彩色影像，
將挑選瞬間的影像存成 JPEG 檔，將影像檔案上傳雲
端 Microsoft Project Oxford 提供之臉部偵測 (Face
Detection) 服務，以取得影像中人臉位置、年齡、性
別、微笑程度等資訊，將資訊整理後顯示在畫面。
開發者必須簽署(Subscribe) Face API 以取得
subscription key
Kinect04 目標、開發、執行

18. 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. 19
Face Detection 系統簡介
一張圖片最多可以偵測出 64 個人臉
圖片中可偵測出的人臉最小要達到 36x36 Pixels
圖檔的格式必須是 JPEG (也就是 .jpg 檔案)
圖檔的大小限制為 4 MB
偵測出的人臉位置以 (left, top, width, height) 描述
偵測出的人臉亦可傳回性別 (gender)、年齡 (age) 、
微笑 (smile) 及其他資料

20. 20
申請 Face API subscription key
https://www.projectoxford.ai/Subscription

21. 21

22. 22

23. 23
免費使用者，程式呼叫 Face API 每分鐘最多 20 次，
每月最多 5000 次。

24. 24
計費方式 (2016/03/22)：

25. 25
視窗大小為 1440x810 (Kinect04)
一個 Image 控制項顯示 1024x768 圖像 (FaceImage)
一個 Button 控制項操控 Kinect 影像傳入 (Kinect)
一個 Button 控制項自動將畫面影像以 jpg 格式存檔
於與 Kinect04.exe 相同檔案夾處，檔名依存檔時間自
動命名。 (Save)
Kinect04 畫面規劃

26. 26
一個 Button 控制項挑選儲存在電腦裡的 JPEG 圖檔
(Browse)
一個 Button 控制項操控臉部偵測 (Detect)
一個 TextBlock 控制項顯示偵測結果，包括圖檔中的
人臉數目、年齡、性別、微笑程度 (Result)

27. 27
建立 Kinect04 方案
 起動 Visual Studio Professional 2015
 點選「檔案(F)」 → 「新增(N)」 → 「專案(P)…」 → 「Visual
C#」 → 「WPF 應用程式」
 「名稱(N)」填入 Kinect04 (原來是WpfApplication1)
 「位置(L)」利用瀏覽(B)… 選定目錄
 點選「確定」
Kinect04 實作

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

29. 29
Kinect04 專案預
設的參考項目

30. 30
加入 Microsoft.Kinect 組件使 SDK 可以被專案使用
 在『參考』處按右鍵， 點選『加入參考(R)』
 點選「擴充功能」 → 挑選「Microsoft.Kinect 2.0.0.0」
→ CheckBox 處點一下使出現打勾
 點選「確定」

31. 31

32. 32
加入 Newtonsoft.Json 使得方便處理 JSON 資料
 在『參考』處按右鍵，點選『管理 NuGet 套件…』
 在『搜尋 (Ctrl+E)』處填入『Newtonsoft.Json』
 點選「瀏覽 」
 點選「Newtonsoft.Json 25.9M 項下載 v8.0.3」
 點選「安裝」
 點選「確定」

33. 33

34. 34

35. 35

36. 36
加入 Microsoft.ProjectOxford.Face 以使用 Face API
 在『搜尋 (Ctrl+E)』處填入『Microsoft.ProjectOxford.Face』
 點選「瀏覽 」
 點選「Microsoft.ProjectOxford.Face 3.57K 項下載 v1.0.0」
 點選「安裝」 → 「確定」 → 「我接受」

37. 37

38. 38

39. 39

40. 40

41. 41
Kinect04 專案參考
多出這三項

42. 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. 43

44. 44
將 Kinect04 視窗加入一個 Image 控制項
 滑鼠在工具箱的 Image 點一下，然後在視窗設計區點一下
 名稱：FaceImage
 將 FaceImage 屬性修改為
Height：576
Margin：0 0 0 0
Width：1024

45. 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. 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. 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. 48
 名稱：Detect
 將 Detect 屬性修改為
Background：漸層筆刷 (放射漸層 R：200 G：220 B：50
A：100%)
Content：DETECT
FontSize：32
Height：45
Margin：1100 230 0 0
Width：250

49. 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. 50
 滑鼠雙擊 Kinect04 事件視窗的 Loaded 右邊空白欄位
 滑鼠雙擊 Kinect04 事件視窗的 Unloaded 右邊空白欄位
 滑鼠雙擊 Kinect 事件視窗的 Click 右邊空白欄位
 滑鼠雙擊 Save 事件視窗的 Click 右邊空白欄位
 滑鼠雙擊 Browse 事件視窗的 Click 右邊空白欄位
 滑鼠雙擊 Detect 事件視窗的 Click 右邊空白欄位
加入 Kinect04 專案欲處理的事件

51. 51
現在 MainWindow.xaml 檔案如下

52. 52

53. 53

54. 54
現在視窗配置設計區如下

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

56. 56

57. 57
+= 之後接著按 Tab 鍵

58. 58
輸入 colorFrameReader.FrameArrived +=
接著按 Tab 鍵
自動產生 ColorFrameReader_FrameArrived 函式
每一個 RGB 影格 (Frame) 傳入時，會觸發一次
FrameArrived 事件，希望程式對一個 RGB 影格做甚
麼處理，就寫在ColorFrameReader_FrameArrived 函
式裏，每秒觸發 30 次。

59. 59

60. 60

61. 61

62. 62

63. 63

64. 64

65. 65

66. 66

67. 67

68. 68

69. 69

70. 70

71. 71

72. 72

73. 73
建置 Kinect04 方案
 「建置(B)」 → 「建置方案(B)」
執行 Kinect04 方案
 「偵錯(D)」 → 「啟動但不偵錯(H)」

74. 74

75. 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. 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