今日目標: 學習如何使用強大的電腦視覺元件

[線上試玩]

用顏色物體控制企業號前進 (粉紅色、青綠色、黃色)

一、tracking.js 網站介紹

tracking.js 是一套基於HTML5規範與Web技術，所實現的電腦視覺應用程式庫，它能做到即時顏色、人臉追蹤等酷炫應用。

而且為了讓開發者更容易使用，他們也特別包裝好WebComponent，大幅度降低了使用門檻，那...我們還等什麼呢?

有很多有趣的範例，都可以在瀏覽器上直接玩

一行指令就可以裝好環境，牛刀小試一下

哇，人臉追蹤耶

二、元件介紹

安裝時要注意的地方，我們使用bower 就可以直接裝了，不過根據你本機polymer版本，bower會要求你選擇相依的版本

開始安裝...

通常就是選最新版的，除非你有用一些相依性套件只能跑在舊版

版本語法可以參考這裡

tracking.js 提供了三種圖像來源、兩種追蹤方式

圖像來源: 圖片 (img) 、畫布 (canvas) 、攝影機 (camera)

追蹤方式: 顏色追蹤、人臉追蹤

例如下面是三種圖像來源設定顏色追蹤的用法

三、使用範例

顏色追蹤，控制企業號前進

[線上試玩]

程式碼說明

第5行 載入影像顏色追蹤元件 video-color-tracking
第8行 顯示企業號圖片
第9行 使用影像顏色追蹤，追蹤三種顏色 (洋紅色、黃色、青綠色)
第14~18行 當影像追蹤元件偵測到符合顏色時，會觸發 track 事件，所以只要在方法內拿出每個偵測到的物件，交給第19~22行顯示就可以了

[Github]

使用酷炫又實用的元件，更有機會能做出很棒的應用。就像是站在巨人肩膀上，看的更高更遠。這是個打群架的時代，千萬別矇著頭什麼都硬幹，東西是學不完的，能善用資源並整合才是王道。所以明天來介紹一下，目前WebComponent軍火庫好了 XD

參考資料

• tracking.js API
• tracking.js WebComponent用法