人臉、顏色追蹤- Webduino 實戰智慧插座教學

要使用tracking.js，首先必須載入相對應的JavaScript，tracking.js 預設可以追蹤顏色。

追蹤的方式是先透過電腦的攝影機擷取影像，透過網頁video的標籤顯示出來，因此HTML一開始要先放入video，然後這裡可以在外層多加一個div作為定位。

然後因為這邊要把追蹤到的顏色或是人臉，用一個對應的顏色方框顯示出來(有這個顏色的區域外層用一個矩形框住，矩形邊框的顏色就是偵測到的顏色，如果是人臉也會指定一個外框顏色)，雖然標記用的矩形是動態產生，我們仍然可以先從CSS設定好它的一些基本屬性，到這邊一些基本的步驟就完成了。

#demo{ position:relative; width:400px; height:300px; } #demo-video{ position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; } #demodiv{ position:absolute; z-index:2; } 首先看到顏色追蹤(預設功能)，官方範例提供三種預設可追蹤的顏色。

track.myTracker=newtracking.ColorTracker(["magenta","cyan","yellow"]); 不過因為只有追蹤三種顏色還是太少，可以自己添加追蹤的顏色數量，透過.registerColor的方法，自行添加顏色，不過這邊要注意的是，添加的顏色是用RGB的範圍來定義，因為雖然眼睛以為是紅色，透過攝影機的電腦卻不見得認為是紅色(舉例來說，藍色的東西在紅色的光下面，看起來就偏紫色，白紙在黃光下就會變成黃色是一樣的道理)，所以才需要定義範圍。

(不過同樣的，環境光線常會影響顏色判斷，最好是用白光測試比較準確) tracking.ColorTracker.registerColor("red",function(r,g,b){ if(r>160&&g<80&&b<80){ returntrue; } returnfalse; }); tracking.ColorTracker.registerColor("green",function(r,g,b){ if(r<80&&g>160&&b<80){ returntrue; } returnfalse; }); tracking.ColorTracker.registerColor("blue",function(r,g,b){ if(r<80&&g<80&&b>160){ returntrue; } returnfalse; }); 定義好顏色後，我這邊另外用了一個物件，把對應邊框的顏色寫在裡面。

track.storkColor={ magenta:"#f0a", red:"#f00", cyan:"#0ff", yellow:"#ff0", green:"#0c0", blue:"#00f" }; 接著就是要啟動攝影機。

track.trackerTask=tracking.track("#demo-video",track.myTracker,{ camera:true }); 透過.on('track')的方法，就可以開始追蹤顏色，而這邊event.data.length表示追蹤到的顏色總數，如果你拿兩個黃色物體，長度就會是2，你拿一個紅一個黃，長度也會是2，也因此當數量不為0，就表示有追蹤到顏色。

track.myTracker.on('track',function(event){ if(event.data.length===0){ //Nocolorsweredetectedinthisframe. }else{ event.data.forEach(function(rect){ //rect.x,rect.y,rect.height,rect.width,rect.color }); } }); 到這邊差不多就完成顏色追蹤了，看一下完整的JavaScript，最主要就是根據顏色的數量，產生對應數量的div作為方框來追蹤，當顏色數量改變或沒有追蹤到顏色時，再動態的調整div的數量，而div的顏色則是根據我們剛剛設定的邊框顏色物件來決定。

$(function(){ vartrack={}; var$demo=$('#demo'); tracking.ColorTracker.registerColor("red",function(r,g,b){ if(r>160&&g<80&&b<80){ returntrue; } returnfalse; }); tracking.ColorTracker.registerColor("green",function(r,g,b){ if(r<80&&g>160&&b<80){ returntrue; } returnfalse; }); tracking.ColorTracker.registerColor("blue",function(r,g,b){ if(r<80&&g<80&&b>160){ returntrue; } returnfalse; }); track.myTracker=newtracking.ColorTracker(["magenta","cyan","yellow","red","green","blue"]); track.storkColor={ magenta:"#f0a", red:"#f00", cyan:"#0ff", yellow:"#ff0", green:"#0c0", blue:"#00f" }; track.trackerTask=tracking.track("#demo-video",track.myTracker,{ camera:true }); track.myTracker.on("track",function(event){ if(event.data.length===0){ $('#demodiv').remove();//如果沒偵測到顏色，移除所有自動產生的追蹤方框 }else{ $('#demodiv').remove();//一開始搜尋到顏色時，先清空對應的追蹤方框 vardivLength=event.data.length;//獲取顏色數量 event.data.forEach(function(e,i){ if($('#demo.div'+i).length===0){ $('#demo').append('');//產生對應的追蹤方框 } //設定追蹤方框樣式 $('#demo.div'+i).css({ 'border-width':'3px', 'border-style':'solid', 'border-color':track.storkColor[e.color], 'left':e.x, 'top':e.y, 'width':e.width, 'height':e.height }); }); } }); }); 完整程式碼：https://bin.webduino.io/corav/1/edit?html,css,js,output 要執行的話切記一定要是「https」，因啟動相機無法在http的模式下進行。

人臉追蹤 看完了顏色追蹤接著看人臉追蹤，原理其實都差不多，只是如果要追蹤人臉，必須額外載入「face-min.js」。

和顏色追蹤的差別只在於第一段，顏色追蹤是設定追蹤的顏色名稱以及範圍，而人臉追蹤則是一些預設的參數。

(官方預設是這些參數) track.myTracker=newtracking.ObjectTracker("face"); tracker.setInitialScale(4); tracker.setStepSize(2); tracker.setEdgesDensity(0.1); 最後的程式碼長相，CSS的部分和剛剛顏色追蹤一模一樣，JavaScript就只是把追蹤到的人臉用紅色方框表示出來。

$(function(){ vartrack={}; var$demo=$('#demo'); track.myTracker=newtracking.ObjectTracker("face"); track.myTracker.setInitialScale(4); track.myTracker.setStepSize(0.5);//官方預設2，數值比較小比較不會抖動，但相對較吃效能 track.myTracker.setEdgesDensity(0.1); track.trackerTask=tracking.track("#demo-video",track.myTracker,{ camera:true }); track.myTracker.on("track",function(event){ if(event.data.length===0){ $('#demodiv').remove();//如果沒偵測到人臉，移除所有自動產生的追蹤方框 }else{ $('#demodiv').remove();//一開始搜尋到人臉時，先清空對應的追蹤方框 vardivLength=event.data.length;//獲取人臉數量 event.data.forEach(function(e,i){ if($('#demo.div'+i).length===0){ $('#demo').append('');//產生對應的追蹤方框 } //設定追蹤方框樣式 $('#demo.div'+i).css({ 'border-width':'3px', 'border-style':'solid', 'border-color':'#f00', 'left':e.x, 'top':e.y, 'width':e.width, 'height':e.height }); }); } }); }); 程式：https://bin.webduino.io/mofor/1/edit?html,css,js,output 要執行的話切記一定要是「https」，因啟動相機無法在http的模式下進行。

透過顏色追蹤點亮燈泡 到這邊大致上已經掌握顏色追蹤以及人臉追蹤的原理，再來就是和智慧插座結合。

首先用顏色追蹤，讓追蹤到黃色的時候會開燈，追蹤到藍色的時候會熄燈。

$(function(){ vartrack={}; var$demo=$('#demo'); varled; tracking.ColorTracker.registerColor("red",function(r,g,b){ if(r>160&&g<80&&b<80){ returntrue; } returnfalse; }); tracking.ColorTracker.registerColor("green",function(r,g,b){ if(r<80&&g>160&&b<80){ returntrue; } returnfalse; }); tracking.ColorTracker.registerColor("blue",function(r,g,b){ if(r<80&&g<80&&b>160){ returntrue; } returnfalse; }); track.myTracker=newtracking.ColorTracker(["magenta","cyan","yellow","red","green","blue"]); track.storkColor={ magenta:"#f0a", red:"#f00", cyan:"#0ff", yellow:"#ff0", green:"#0c0", blue:"#00f" }; track.trackerTask=tracking.track("#demo-video",track.myTracker,{ camera:true }); boardReady({device:'你的裝置ID'},function(board){ board.systemReset(); board.samplingInterval=250; led=getLed(board,10); track.myTracker.on("track",function(event){ if(event.data.length===0){ $('#demodiv').remove();//如果沒偵測到顏色，移除所有自動產生的追蹤方框 }else{ $('#demodiv').remove();//一開始搜尋到顏色時，先清空對應的追蹤方框 vardivLength=event.data.length;//獲取顏色數量 event.data.forEach(function(e,i){ if($('#demo.div'+i).length===0){ $('#demo').append('');//產生對應的追蹤方框 } //設定追蹤方框樣式 $('#demo.div'+i).css({ 'border-width':'3px', 'border-style':'solid', 'border-color':track.storkColor[e.color], 'left':e.x, 'top':e.y, 'width':e.width, 'height':e.height }); if(e.color=='yellow'){ console.log('yellow');//追蹤到黃色的時候亮燈 led.on(); }else{ led.off();//不然就是都熄燈 } }); } }); }); }); 完整程式碼：https://bin.webduino.io/neba/1/edit?html,css,js,output 透過人臉追蹤點亮燈泡 至於人臉追蹤，這邊用人臉的x數值來追蹤，預設追蹤到的x,y數值是對應到video的左上角，這也是為什麼我們可以拿來作為CSS位置的主要原因。

因為我用的video寬度為360，所以我讓x數值大於(180-追蹤框寬度/2)的時候就亮燈，也就是臉往右邊移動超過中線的時候會開燈。

$(function(){ vartrack={}; var$demo=$('#demo'); varled; track.myTracker=newtracking.ObjectTracker("face"); track.myTracker.setInitialScale(4); track.myTracker.setStepSize(0.5); track.myTracker.setEdgesDensity(0.1); track.trackerTask=tracking.track("#demo-video",track.myTracker,{ camera:true }); boardReady({device:'evkG'},function(board){ board.systemReset(); board.samplingInterval=250; led=getLed(board,10); track.myTracker.on("track",function(event){ if(event.data.length===0){ $('#demodiv').remove();//如果沒偵測到人臉，移除所有自動產生的追蹤方框 }else{ $('#demodiv').remove();//一開始搜尋到人臉時，先清空對應的追蹤方框 vardivLength=event.data.length;//獲取人臉數量 event.data.forEach(function(e,i){ if($('#demo.div'+i).length===0){ $('#demo').append('');//產生對應的追蹤方框 } //設定追蹤方框樣式 $('#demo.div'+i).css({ 'border-width':'3px', 'border-style':'solid', 'border-color':'#f00', 'left':e.x, 'top':e.y, 'width':e.width, 'height':e.height }); //設定超過中線會亮燈 if(e.x>(180-e.width/2)){ led.on(); }else{ led.off(); } }); } }); }); }); 完整程式碼：https://bin.webduino.io/pufaqe/1/edit?html,css,js,output 小結 整體而言了解智慧插座的控制後，就可以用各種方法來操控，當然人臉追蹤與顏色追蹤，都只是廣大控制方式的一部分，後續會介紹更多有趣的控制方法喔！ 參考： tracking.js：https://trackingjs.com 綜合應用：LED(人臉追蹤) 聯絡我們 如果對於Webduino產品有興趣，歡迎透過下列方式購買： 個人線上購買：https://store.webduino.io/(支援信用卡、超商取貨付款) 企業＆學校採購：來信[email protected]或來電07-3388511。

如果對於這篇教學有任何問題或建議，歡迎透過下列方式聯繫我們： Email：[email protected](如對於產品有使用上的問題，建議透過Email附上照片或影片聯繫) Facebook粉絲團：https://www.facebook.com/webduino/ Facebook技術討論社團：https://www.facebook.com/groups/webduino/ Webduino基礎教學 Webduino開發板 馬克一號(介紹) 馬克一號(初始化設定) WebduinoFly(介紹) WebduinoFly(初始化設定) WebduinoSmart(介紹) WebduinoSmart(初始化設定) 開發板擴充設定 Arduino韌體下載與燒錄 使用WebSocket操控 WebduinoBlockly 認識WebduinoBlockly WebduinoBlockly基本操作 WebduinoBlockly特殊功能 連動多塊開發板 腳位偵測設定 發光元件 LED 三色LED LED點矩陣 輸入輸出 繼電器 蜂鳴器 按鈕開關 震動開關 搖桿 紅外線發射接收 環境偵測 超音波偵測 溫濕度偵測 人體紅外線偵測 聲音偵測 光敏電阻 可變電阻 土壤濕度偵測 三軸加速度計 無線感應 RFID 玩具及馬達 伺服馬達 Webduino綜合應用 元件應用 LED(兩顆交互閃爍) LED(霹靂燈) LED(語音聲控) LED(人臉追蹤) LED(Google表單操控) 三色LED(調色盤) 蜂鳴器(多人協奏) 蜂鳴器(會說話的鬧鐘) 傳感器應用 超音波(改變圖片大小) 超音波(控制LED) 超音波(控制三色LED) 溫濕度(Firebase紀錄) RFID(控制Youtube) 可變電阻(改變Youtube音量) 聲音偵測(吹點矩陣蠟燭) 玩具改造 Smart自走車(組裝步驟) Smart自走車(網頁遙控器操控) Smart自走車(超音波避障) Smart自走車(溫濕度感測車) Smart智慧路燈(組裝步驟) Smart智慧路燈(接線教學) Smart飛天車(組裝步驟) Smart飛天車(接線教學) 馬克一號自走車(鍵盤操控) 馬克一號自走車(行動裝置操控) 馬克一號自走車(循跡功能) WABot機器人(初始化設定) WABot機器人(基礎操控) 百元玩具車大改造 智慧生活 智慧植栽(水泵) 智慧插座(組裝與操控) 智慧追蹤(伺服馬達+攝影機) Webduino雲端平台 基本介紹 註冊與登入 Blockly程式積木 Device裝置管理(裝置認證) Device裝置管理(雲端更新) 兌換券(領取與添加新功能) 發光元件 LCD螢幕 七段顯示器 輸入輸出 MP3播放器 環境偵測 PM2.5細懸浮微粒偵測 顏色感測器 電子羅盤 光度計 溫濕度計 資料庫 Google試算表(設定) Google試算表(儲存) Google試算表(讀取) 綜合應用 記錄PM2.5(Google試算表) 玩具改造 Smart智慧小屋（組裝步驟） Blockly教學 基本功能 變數 流程 文字 數學式 列表 邏輯 迴圈 進階功能 控制台 等待 數值轉換 鍵盤行為 語音聲控 語音朗讀 行動裝置 網頁互動區 文字、點擊、圖片 顏色、按鈕、拉霸 遙控器 Youtube 影像追蹤 創意應用 抽籤並朗讀姓名 大樂透自動選號 隨機組合朗讀語句 語音朗讀逐字稿 小時鐘 語音報時 九九乘法你問我答 BlocklyGames 迷宮 鳥 烏龜 影片 池塘導師 Dr.Smart教學 開發板元件 三色LED 三色LED(色彩輪播) 光敏電阻 光敏電阻(色彩變化) 按鈕開關 按鈕開關(控制顏色) 按鈕開關(控制Youtube) 元件及傳感器 LED 蜂鳴器 震動開關 LED點矩陣 超音波偵測 溫濕度偵測 綜合應用 蜂鳴器(多人協奏) 超音波(倒車雷達) 超音波(控制Youtube) LED點矩陣(顯示距離) LED點矩陣(顯示溫度) 按鈕開關(控制蜂鳴器) 實戰智慧插座 基本操控 組裝智慧插座 網頁操控智慧插座 傳感器應用 超音波偵測距離 光線偵測 人體紅外線偵測 聲音偵測 電視機遙控器 按鈕開關 電流急急棒 土壤濕度偵測 RFID感應 進階應用 語音辨識 人臉、顏色追蹤 手機陀螺儀 聊天室(原理) 聊天室(前後端實作) Google試算表(原理) Google試算表(前後端實作) Google地圖(原理) Google地圖(前後端實作) Youtube互動 Opendata實作 Node-Red(基礎操作) Node-Red(Twitter) Node-Red(E-mail) 日幣匯率(Node-Red爬蟲) 日幣匯率(Node-js爬蟲) 常見問題 Webduino相關 關於Webduino 購買Webduino產品 技術支援與合作 Webduino開發板 關於Webduino開發板 連線相關＆初始化設定問題 Web:Bit相關問題 WebduinoSmart相關問題 其它問題