Webduino 學習手冊網站即將改版,提供您更好的閱讀體驗!

搶先試用

LED ( 人臉追蹤 )

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

範例影片展示

接線與實作

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

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

馬克一號接線示意圖:

馬克一號接線 LED

Fly 接線示意圖:

Fly 接線 LED

基本操作

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

網頁互動影像追蹤

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

網址開頭 https

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

設定 LED 積木

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

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

影像追蹤積木

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

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

加入邏輯積木

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

影像追蹤控制 LED 燈

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

設定追蹤數值積木

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

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

相關參考