LED ( 人臉追蹤 )

隨著瀏覽器的效能越來越強大，我們開始可以透過許多的網頁技術，實現我們長久以來的想像，在這個範例中，將會使用網路攝影機，進行人臉追蹤，根據人臉的位置，來點亮 LED 燈。

範例影片展示

接線與實作

因為這個範例只需要用到一顆 LED 燈，所以接線方式很簡單，首先，LED 燈有「長短腳」之分，長腳接「高電位」( 帶有數字的腳位 )，短腳接「低電位」( GND、接地 )，因此我們只要直接將 LED 插到腳位上即可，或使用麵包板與麵包線外接出來，在這裡長腳接 10，短腳接 GND。

由於 Webduino 支援開發板種類只會越來越多，接線圖先使用馬克一號與 Fly 示範，對於其他開發板來說，只要長腳接數位腳 ( 數字 )，短腳接 GND，仍會有一樣的效果。

馬克一號接線示意圖：

Fly 接線示意圖：

基本操作

打開 Webduino Blockly 編輯工具 ( https://blockly.webduino.io )，因為這個範例會用網頁「影像追蹤」來顯示攝影機的影像，所以要先點選右上方「網頁互動測試」的按鈕，打開內嵌測試的網頁，用下拉選單選擇「影像追蹤」。

注意，因為影像追蹤會使用電腦的攝影鏡頭，在網頁安全性的限制下，所以瀏覽器的網址必須是 https 開頭。

把開發板放到編輯畫面裡，填入對應的 Webduino 開發板名稱，開發板內放入 LED 的積木，名稱設定為 led，腳位設定 10。

首先要放入影像追蹤模組，這邊我們會先設定要使用「人臉追蹤」還是「顏色追蹤」，範例將使用「人臉追蹤」，選擇好了之後，就要來設定追蹤成功的動作。

人臉追蹤或顏色追蹤的積木，在「影像追蹤」目錄下。

放入邏輯判斷的積木，因為要判斷人臉往左移還是往右移，所以需要有兩個判斷選項，點擊藍色小齒輪，可以增加判斷的選項。

邏輯的積木在「基本功能 > 邏輯」目錄下

在執行動作內放入邏輯判斷的積木，判斷如果人臉的 X 座標數值大於 100 的時候，就讓 LED 燈亮起，反之小於 100 就讓 LED 燈熄滅。

點選下拉選單，可以看到除了追蹤 X 座標外，還可以追蹤 Y 座標、寬度、高度與 total 數量，如果是顏色追蹤，也可以選擇追蹤出來的顏色色彩。

填入裝置 Device ID，確認開發板上線，點選右上方紅色按鈕執行，就會看到攝影鏡頭被打開，鏡頭的畫面會呈現在網頁裡，將攝影機對準人臉，如果有追蹤到人臉的話就會出現紅框標示，左右移動人臉的時候，燈炮也會作出對應的亮暗切換。。

範例解答：https://goo.gl/5hMqD8

相關參考

• 範例解答：https://goo.gl/5hMqD8
• 範例完整程式碼：https://bin.webduino.io/rupox/edit?html,css,js,output

聯絡我們

如果對於 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/