[App Inventor教學] 上傳照片到微軟認知服務Computer Vision API,使用 Makeblock CamVision

本範例可將所拍攝的照片上傳到微軟認知服務Computer Vision API,經辨識之後可取得以下資料:

  • 照片說明(text)
  • 前景主色(text)
  • 背景主色(text)
  • 相片標籤(list)

使用 Makeblock 所開發的 CamVision extension 檔,另外也有控制其 mBot 機器人平台的 extension,我們也在測試中喔

注意:

  1. 經實測只能使用在 MIT 所提供之測試伺服器,正式伺服器匯入時會有問題
  2. 點選 Prepare 按鍵時,會把相機開起來(這時並沒有跳到拍攝預覽畫面,但的確已經開啟),因此其他會用到相機的程式,例如條碼掃描程式(下載 apk 用) 會無法使用。請先關閉本程式再使用其他相機程式。

 aia 與 apk 下載請點我(App Inventor中文學習網)

使用的照片:

img20160917130103

辨識結果如下圖:

  • 照片說明(a cat laying on a bed)
  • 前景主色(灰色)
  • 背景主色(灰色)
  • 相片標籤(indoor, cat, wall, laying)

 

申請微軟認知服務 API 金鑰

請用您的微軟帳號(@msn.com,哇哈哈我的還可以用,@hotmail.com) 登入微軟認知服務。請點選 APIs -> Computer Vision ,最後點選 Getting Started for free。

ms07

請勾選 Computer Vision,可以看到免費方案的限制為每個月5,000次呼叫,每分鐘20次(應該夠用)

 

申請成功之後,可以看到在 Computer Vision 下有兩把金鑰,請點選 Show 之後將該金鑰內容複製到 App Inventor 程式中。

 

您也可點選 Show Quota 看一下已用掉幾次呼叫

 

程式說明

請先匯入 Makeblock 的 CamVision aix檔(建議另外存檔起來以免哪一天不見了)

延伸閱讀:如何匯入 .aix 擴充元件到 App Inventor 測試伺服器

Designer 頁面

  1. Button_Prepare:開啟照相機、設定API Key
  2. Button_Photo:照相
  3. Label:顯示 Microsoft Computer Vision API 辨識結果 – 相片描述、前景主色、背景主色
  4. ListView:顯示 Microsoft Computer Vision API 辨識結果 – 標籤
  5. CamVision:負責上傳照片到 Microsoft Computer Vision API 並取得回傳結果。

ms05

Blocks 頁面

Step1:

宣告變數。點選 Button_Prepare之後會打開照相機(此時其他會用到相機的程式已不可用),設定 API Key,如果順利打開照相機的話,會在 Screen Title 上顯示 true 字樣。

接著再點選 Button_Photo,這時會拍攝一張照片 (本範例沒有將照片顯示在畫面中)。如果順利拍攝照片話,會在 Screen Title 上顯示 true 字樣。

ms03

STEP2:

照相完成之後,會自動呼叫 CamVision.AfterPictureTaken事件,將照片上傳到雲端。

接著會呼叫 CamVision.AfterComputerVisionResult事件,將相關結果都顯示出來。在此我們想知道的資訊有:辨識結果(DescriptionFromCV)、前景主色(ForegroundColorNameFromCV)、背景主色(BackgroundColorNameFromCV)與標籤(TagsFromCV)。

請注意如果API錯誤的話,將無法取得結果。

ms04

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *