This repository was archived by the owner on Feb 12, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 4
Expand file tree
/
Copy pathtutorial-27-tracking-face.html
More file actions
80 lines (75 loc) · 17.4 KB
/
Copy pathtutorial-27-tracking-face.html
File metadata and controls
80 lines (75 loc) · 17.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="UTF-8"> <meta http-equiv="pragma" content="no-cache"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="author" content="webduino.io"> <meta name="copyright" content="webduino.io"> <meta itemprop="name" content="webduino.io"> <link rel="icon" href="../img/layout/favicon.ico" type="image/x-icon"> <title>教學範例 27：人臉追蹤點亮 LED 燈 :::: Webduino = Web × Arduino</title> <meta name="description" content="隨著瀏覽器的效能越來越強大，我們開始可以透過許多的網頁技術，實現我們長久以來的想像，在這個範例中，將會使用網路攝影機，進行人臉追蹤，根據人臉的位置，來點亮 LED 燈。"> <meta itemprop="description" content="隨著瀏覽器的效能越來越強大，我們開始可以透過許多的網頁技術，實現我們長久以來的想像，在這個範例中，將會使用網路攝影機，進行人臉追蹤，根據人臉的位置，來點亮 LED 燈。"> <meta property="og:description" content="隨著瀏覽器的效能越來越強大，我們開始可以透過許多的網頁技術，實現我們長久以來的想像，在這個範例中，將會使用網路攝影機，進行人臉追蹤，根據人臉的位置，來點亮 LED 燈。"> <link rel="canonical" href="https://tutorials.webduino.io/zh-tw/docs/useful/component/led-tracking-face.html"> <meta property="og:title" content="教學範例 27：人臉追蹤點亮 LED 燈"> <meta property="og:url" content="https://webduino.io/tutorials/tutorial-27-tracking-face.html"> <meta property="og:image" content="https://webduino.io/img/tutorials/tutorial-27-01s.jpg"> <meta itemprop="image" content="https://webduino.io/img/tutorials/tutorial-27-01s.jpg"> <script src="../js/lib/jquery.min.js"></script> <script src="../js/lib/jquery.lazyload.min.js"></script> <script src="../js/lib/run_prettify.js"></script> <script src="../js/layout-20171211.js"></script> <script src="../js/tutorials.js"></script> <script src="../js/lib/disqus.js"></script> <link rel="stylesheet" href="../style/css/lib/tomorrow.css"> <link rel="stylesheet" href="../style/css/layout.css"> <link rel="stylesheet" href="../style/css/sub-header.css"> <link rel="stylesheet" href="../style/css/tutorials-content.css"> <link rel="stylesheet" href="../style/css/lib/font-awesome.css"> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-TT4TZ8L');</script> </head> <body> <header class="path-0"> <a class="logo" href="index.html" data-name="layout-header-logo"></a> <div class="mobile-menu"></div> <div class="menu"> <a href="index.html" class="index" data-name="layout-mobile-menu">首頁</a> <a href="tutorials.html" class="tutorials" data-name="layout-mobile-menu">教學範例</a> <a href="buy.html" class="buy" data-name="layout-mobile-menu">產品總覽</a> <a href="activity.html" class="activity" data-name="layout-mobile-menu">課程活動</a> <a href="about.html" class="about" data-name="layout-mobile-men">關於我們</a> <a href="en/index.html" class="english" data-name="layout-mobile-men">English</a> </div> </header> <header class="path-1"> <a class="logo" href="../index.html"></a> <div class="mobile-menu"></div> <div class="menu"> <a href="../index.html" class="index" data-name="layout-menu">首頁</a> <a href="../tutorials.html" class="tutorials" data-name="layout-menu">教學範例</a> <a href="../buy.html" class="buy" data-name="layout-menu">產品總覽</a> <a href="../activity.html" class="activity" data-name="layout-menu">課程活動</a> <a href="../about.html" class="about" data-name="layout-menu">關於我們</a> <a href="../en/index.html" class="english" data-name="layout-menu">English</a> </div> </header> <div class="tutorials-content"> <div class="banner"> </div> <h1>教學範例 27：人臉追蹤點亮 LED 燈</h1> <p>隨著瀏覽器的效能越來越強大，我們開始可以透過許多的網頁技術，實現我們長久以來的想像，在這個範例中，將會使用網路攝影機，進行人臉追蹤，根據人臉的位置，來點亮 LED 燈。</p> <div class="buy-this"> <span>LED 相關套件：<a href="https://webduino.io/buy/webduino-package-plus.html" target="_blank">Webduino 基本套件 Plus ( 支援馬克 1 號、Fly )</a></span> <span>Webduino 開發板：<a href="https://webduino.io/buy/component-webduino-v1.html" target="_blank">Webduino 馬克一號</a>、<a href="https://webduino.io/buy/component-webduino-fly.html" target="_blank">Webduino Fly</a>、<a href="https://webduino.io/buy/component-webduino-uno-fly.html" target="_blank">Webduino Fly + Arduino UNO</a></span> </div> <h2>範例影片展示</h2> <p><iframe class="youtube" src="https://www.youtube.com/embed/GxOh2Gv9GJA" frameborder="0" allowfullscreen=""></iframe></p> <h2>接線與實作</h2> <p>因為這個範例只需要用到一顆 LED 燈，所以接線方式很簡單，首先，LED 燈有「長短腳」之分，長腳接「高電位」( 帶有數字的腳位 )，短腳接「低電位」( GND、接地 )，因此我們只要直接將 LED 插到腳位上即可，或使用麵包板與麵包線外接出來，在這裡<strong>長腳接 10，短腳接 GND</strong>。</p> <p>馬克一號接線示意圖：</p> <p><img src="../img/tutorials/tutorial-27-02.jpg"></p> <p>Fly 接線示意圖：</p> <p><img src="../img/tutorials/tutorial-27-02-fly.jpg"></p> <p>實際接線照片：</p> <p><img src="../img/tutorials/tutorial-27-03.jpg"></p> <div class="buy-this"> <span>LED 相關套件：<a href="https://webduino.io/buy/webduino-package-plus.html" target="_blank">Webduino 基本套件 Plus ( 支援馬克 1 號、Fly )</a></span> <span>Webduino 開發板：<a href="https://webduino.io/buy/component-webduino-v1.html" target="_blank">Webduino 馬克一號</a>、<a href="https://webduino.io/buy/component-webduino-fly.html" target="_blank">Webduino Fly</a>、<a href="https://webduino.io/buy/component-webduino-uno-fly.html" target="_blank">Webduino Fly + Arduino UNO</a></span> </div> <h2>Webduino Blockly 操作解析</h2> <p>打開 Webduino Blockly 編輯工具 ( <a href="https://blockly.webduino.io">https://blockly.webduino.io</a> )，因為這個範例會用網頁「影像追蹤」來顯示攝影機的影像，所以要先點選右上方「網頁互動測試」的按鈕，打開內嵌測試的網頁，用下拉選單選擇「影像追蹤」。</p> <p><img src="../img/tutorials/tutorial-27-04.jpg"></p> <p>把開發板放到編輯畫面裡，填入對應的 Webduino 開發板名稱，開發板內放入 LED 的積木，名稱設定為 led，腳位設定 10。</p> <p><img src="../img/tutorials/tutorial-27-05.jpg"></p> <p>如果要使用影像追蹤，點選左側「進階功能」的選項，選擇「影像追蹤」，裡面就會有對應的積木。</p> <p><img src="../img/tutorials/tutorial-27-06.jpg"></p> <p>首先要放入影像追蹤模組，這邊我們會先設定要使用「人臉追蹤」還是「顏色追蹤」，範例將使用「人臉追蹤」，選擇好了之後，就要來設定追蹤成功的動作。</p> <p><img src="../img/tutorials/tutorial-27-07.jpg"></p> <p>在執行動作內放入邏輯判斷的積木，判斷如果人臉的 X 座標數值大於 100 的時候，就讓 LED 燈亮起，反之小於 100 就讓 LED 燈熄滅。</p> <p><img src="../img/tutorials/tutorial-27-08.jpg"></p> <p>點選下拉選單，可以看到除了追蹤 X 座標外，還可以追蹤 Y 座標、寬度、高度與 total 數量，如果是顏色追蹤，也可以選擇追蹤出來的顏色色彩。</p> <p><img src="../img/tutorials/tutorial-27-09.jpg"></p> <p>放入開始追蹤的積木，確認開發板上線 ( 點選「<a href="https://webduino.io/device.html">檢查連線狀態</a>」查詢 )，點選紅色的執行按鈕，右邊的網頁就會出現攝影機的影像，就可以開始追蹤了。</p> <p><img src="../img/tutorials/tutorial-27-10.jpg"></p> <p>如果發現沒有反應，因為瀏覽器有安全性限制 ( 要啟用網路攝影機會有隱私及安全性問題 )，解決的方法就是把網址改成 https 開頭，就可以順利執行。</p> <p><img src="../img/tutorials/tutorial-27-11.jpg"></p> <p>如果想知道追蹤數值，我們可以利用「進階功能」的「控制台顯示」，利用控制台 ( console ) 來顯示追蹤數值，因為要使用瀏覽器的控制台，我們就要把控制台打開，在 windows 可以按 F12，Mac 可以按 option + command + i，。</p> <p><img src="../img/tutorials/tutorial-27-12.jpg"></p> <p>到這邊，基本上就已經可以使用人臉影像追蹤囉。( 解答：<a href="https://blockly.webduino.io/#-KCTXIwqV8sEumJODx8D">https://blockly.webduino.io/#-KCTXIwqV8sEumJODx8D</a> )</p> <h2>範例解析 ( <a href="https://bin.webduino.io/famar/1/edit?html,css,js,output">完整程式碼</a>、<a href="https://webduino.io/device.html">檢查連線狀態</a> )</h2> <p>HTML 的 header 引入 <code>webduino-all.min.js</code>，目的在讓瀏覽器可以支援 WebComponents 以及 Webduino 所有的元件，如果是用 Blockly 編輯工具產生的程式碼，則要額外引入 <code>webduino-blockly.js</code>。</p> <pre><code><script src="https://webduino.io/components/webduino-js/dist/webduino-all.min.js"></script>
<script src="https://webduinoio.github.io/webduino-blockly/webduino-blockly.js"></script>
</code></pre><p>除了上面兩支 JS，這裏我們還用了兩支 Open Source 的程式：tracking-min.js、face-min.js，用同樣的方法引入之後才可以使用人臉影像追蹤的功能</p> <pre><code><script src="https://blockly.webduino.io/lib/tracking-min.js"></script>
<script src="https://blockly.webduino.io/lib/face-min.js"></script>
</code></pre><p>HTML 裏頭有一個 video 和 canvas，兩個的大小一樣，目的是用 video 顯示影像，然後用 canvas 分析影像並判斷人臉，然後用紅色方框將人臉框住。</p> <pre><code><div id="demo-area-08-content">
<video id="demo-area-08-video" preload="" autoplay="" loop="" muted="" controls=""></video>
<canvas id="demo-area-08-canvas"></canvas>
</div>
</code></pre><p>CSS 的部分主要就是制定 video 與 canvas 的大小。</p> <pre><code>#demo-area-08-content {
position: relative;
width: 100%;
max-width: 300px;
height: 200px;
}
#demo-area-08-video {
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
}
#demo-area-08-canvas {
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
}
</code></pre><p>JavaScript 比較多一些，主要是使用 tracking 相關的方法，當中也有一些設定：<code>setInitialScale</code>、<code>setStepSize</code>、<code>setEdgesDensity</code>，分別代表取向的尺度、頻率和深度，當然如果設定的太精細，電腦就要耗費相對多的效能處理，反之如果追求速度，就可以設定的粗糙一些，但相對追蹤出來的準確度就會降低。( 詳細可以參考：<a href="https://trackingjs.com/">https://trackingjs.com/</a> ) </p> <p>如果要設定邊框顏色，可以從<code>strokeStyle</code>修改，預設的是紅色 #f00，然後這邊判斷就只是很簡單的 if 和 else，針對 data 的 x 屬性來判斷 ( 人臉追蹤預設會有 x、y、width、height 和 total，顏色追蹤則沒有 total，改成 color )</p> <pre><code>var led;
var track;
boardReady('', function (board) {
board.samplingInterval = 20;
led = getLed(board, 10);
track = {};
track.canvas = document.getElementById("demo-area-08-canvas");
track.context = track.canvas.getContext("2d");
track.myTracker = new tracking.ObjectTracker("face");
track.myTracker.setInitialScale(4);
track.myTracker.setStepSize(0.5);
track.myTracker.setEdgesDensity(0.1);
track.myTracker.on("track", function(event) {
if (event.data.length === 0) {
track.context.clearRect(0, 0, track.canvas.width, track.canvas.height);
} else {
track.context.clearRect(0, 0, track.canvas.width, track.canvas.height);
event.data.forEach(function(data) {
console.log(data.x);
if (data.x > 100) {
led.on();
} else {
led.off();
}
if(data.color){
track.context.strokeStyle = track.storkColor[data.color];
}else{
track.context.strokeStyle = "#f00";
}
track.context.lineWidth = 5;
track.context.strokeRect(data.x, data.y, data.width, data.height-30);
track.context.font = "11px Helvetica";
track.context.fillStyle = "#fff";
});
}
});
track.trackerTask = tracking.track("#demo-area-08-video", track.myTracker, {
camera: true
});
track.context.clearRect(0, 0, track.canvas.width, track.canvas.height);
track.trackerTask.run();
});
</code></pre><p>以上就是人臉影像追蹤的 Blockly 和程式碼簡介。<br>完整程式碼：<a href="https://bin.webduino.io/famar/1/edit?html,css,js,output">https://bin.webduino.io/famar/1/edit?html,css,js,output</a><br>解答：<a href="https://blockly.webduino.io/#-KCTXIwqV8sEumJODx8D">https://blockly.webduino.io/#-KCTXIwqV8sEumJODx8D</a></p> <div class="buy-this"> <span>LED 相關套件：<a href="https://webduino.io/buy/webduino-package-plus.html" target="_blank">Webduino 基本套件 Plus ( 支援馬克 1 號、Fly )</a></span> <span>Webduino 開發板：<a href="https://webduino.io/buy/component-webduino-v1.html" target="_blank">Webduino 馬克一號</a>、<a href="https://webduino.io/buy/component-webduino-fly.html" target="_blank">Webduino Fly</a>、<a href="https://webduino.io/buy/component-webduino-uno-fly.html" target="_blank">Webduino Fly + Arduino UNO</a></span> </div> <a class="arrow arrow-r pre-next-button" data-name="pre-next-arrow"></a> <a class="arrow arrow-l pre-next-button" data-name="pre-next-arrow"></a> <div class="pre-next"> <div> <div class="pre"></div> <div class="next"></div> </div> </div> <div class="note-chicken"></div> <div class="others"> <i class="fa fa-times note-close-btn"></i> <h5>如果您還想了解更多，可以參考：</h5> <div class="others-link otehrs-read"> 1. 完整教學範例：<a href="https://tutorials.webduino.io" data-name="noteLink">https://tutorials.webduino.io</a> <br> 2. Blockly 教學：<a href="https://goo.gl/h6s7GY" data-name="noteLink">https://goo.gl/h6s7GY</a> <br> 3. 產品總覽：<a href="https://webduino.io/buy.html" target="_blank" data-name="noteLink">https://webduino.io/buy.html <i class="fa fa-share-square-o"></i></a> <br> 4. 露天賣場：<a href="http://goo.gl/0Dj9ip" target="_blank" data-name="noteLink">http://goo.gl/0Dj9ip <i class="fa fa-share-square-o"></i></a> </div> </div> <div class="popup"> <div class="whitebox"> <span class="popup-close">X</span> <img src="https://webduinoio.github.io/tutorials/img/tutorials/boy.png"> <h3>Webduino 全新教學網站上線囉</h3> <p>本篇文章已經有更新的版本，趕快前往閱讀吧！</p> <a href="https://tutorials.webduino.io/" class="popup-new-article new-tutorials go" target="_blank">立即閱讀</a> </div> </div> </div> <div class="disqus"> <div id="disqus_thread"></div> </div> <footer> <div class="w-20 screen-copyright"> <div class="logo"> <a href="index.html"><img src="https://webduino.io/img/layout/webduino-gray.png"></a> <h4>Copyright 2017 | All Rights Reserved. Powered by Webduino</h4> </div> </div> <div class="w-80"> <div class="w-100"> <div class="w-25">關於我們 <ul> <li><a href="https://webduino.io/" target="blank">首頁</a></li> <li><a href="about.html" target="blank">關於我們</a></li> <li><a href="partner.html" target="blank">合作夥伴</a></li> </ul> </div> <div class="w-25">教材 <ul> <li><a href="https://tutorials.webduino.io/" target="blank">學習手冊</a></li> <li><a href="activity.html" target="blank">課程活動</a></li> <li><a href="https://tutorials.webduino.io/zh-tw/docs/faq/index.html" target="blank">常見問題</a></li> </ul> </div> <div class="w-25">硬體產品 <ul> <li><a href="buy.html" target="blank">開發板與電子零件</a></li> <li><a href="http://class.ruten.com.tw/user/index00.php?s=webduino" target="blank">露天賣場</a></li> </ul> </div> <div class="w-25">軟體服務 <ul> <li><a href="https://cloud.webduino.io/" target="blank">雲端平台</a></li> <li><a href="https://blockly.webduino.io/" target="blank">Webduino Blockly 體驗版</a></li> </ul> </div> </div> <div class="w-100"> <hr> </div> <div class="w-100"> <div class="w-50">聯絡我們 <ul> <li>+886 7 3388511</li> <li>[email protected]</li> <li>807 高雄市前鎮區復興四路 12 號 2 樓之 6</li> </ul> </div> <div class="w-50">社群媒體 <div><a href="https://www.facebook.com/webduino" target="blank"><i class="fa fa-facebook"></i></a><a href="https://www.youtube.com/channel/UCUk3U7QZqijQfE-7rAh_INQ" target="blank"><i class="fa fa-youtube"></i></a><a href="https://github.com/webduinoio" target="blank"><i class="fa fa-github"></i></a></div> </div> </div> </div> </footer> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TT4TZ8L" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> </body> </html>