Tracking.js 學(xué)習(xí)筆記

這兩天莫名其妙想了解一下和人臉識(shí)別相關(guān)的技術(shù)方案然，然后想撘一個(gè)與前端交互的人臉識(shí)別系統(tǒng)，然后遇到了一個(gè)比較牛逼的前端插件，反正也是比較閑了，可以先學(xué)習(xí)一下，或許將來會(huì)有用啊。

一，材料準(zhǔn)備

tracking.js

二，學(xué)習(xí)筆記

step 1

下載完成后我們可以在example文件夾下面創(chuàng)建一個(gè) first_tracking.html 文件并寫入下面代碼

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>tracking.js - first tracking</title>
  <script src="../build/tracking-min.js"></script>
</head>
<body>
  <script>
  // Start tracking here...
  </script>
</body>
</html>

step 2

嘗試第一個(gè)功能ColorTracker，顏色追蹤。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>tracking.js - first tracking</title>
  <script src="../build/tracking-min.js"></script>
</head>
<body>

<div>
  <video id="myVideo" width="640" height="480" preload autoplay loop muted></video>

  <script type="text/javascript">

   //不使用下面代碼有可能無法打開Chrome攝像頭
    navigator.getUserMedia  = navigator.getUserMedia ||
      navigator.webkitGetUserMedia ||
      navigator.mozGetUserMedia ||
      navigator.msGetUserMedia;
    navigator.getUserMedia({video:true}, gotStream, noStream);

    function gotStream(stream) {
      myVideo.src = URL.createObjectURL(stream);
      myVideo.onerror = function () {
        stream.stop();
      };
      stream.onended = noStream;
      myVideo.onloadedmetadata = function () {
        alert('攝像頭成功打開！');
      };
    }

    function noStream(err)
    {
      alert(err);
    }
  
    //  模板代碼
    var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);
    colors.on('track', function(event)
    {
      if (event.data.length === 0)
      {
        // No colors were detected in this frame.
      }
      else
      {
        event.data.forEach(function(rect)
        {
          console.log(rect.x, rect.y, rect.height, rect.width, rect.color);
        });
      }
    });

    tracking.track('#myVideo', colors);
  </script>
</div>

</body>
</html>
效果圖

step 3

ColorTracker 只有默認(rèn)的3中顏色追蹤（magenta，cyan，yellow），如果想追蹤自己設(shè)定的顏色，則需要在ColorTracker當(dāng)中進(jìn)行注冊(cè)，主要是利用（r，g，b）來注冊(cè)顏色，例如綠色（0，255，0）。主要使用下面代碼

tracking.ColorTracker.registerColor('green', function(r, g, b) {
  if (r < 50 && g > 200 && b < 50) {
    return true;
  }
  return false;
});

完整代碼

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>tracking.js - first tracking</title>
  <script src="../build/tracking-min.js"></script>
</head>
<body>

<div>
  <video id="myVideo" width="640" height="480" preload autoplay loop muted></video>

  <script type="text/javascript">


    navigator.getUserMedia  = navigator.getUserMedia ||
      navigator.webkitGetUserMedia ||
      navigator.mozGetUserMedia ||
      navigator.msGetUserMedia;
    navigator.getUserMedia({video:true}, gotStream, noStream);

    function gotStream(stream) {
      myVideo.src = URL.createObjectURL(stream);
      myVideo.onerror = function () {
        stream.stop();
      };
      stream.onended = noStream;
      myVideo.onloadedmetadata = function () {
        alert('攝像頭成功打開！');
      };
    }

    function noStream(err)
    {
      alert(err);
    }
  
    // 先注冊(cè)顏色
    tracking.ColorTracker.registerColor('green', function(r, g, b) {
      if (r < 50 && g > 200 && b < 50) {
        return true;
      }
      return false;
    });
   
    // 調(diào)用注冊(cè)顏色
    var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow','green']);
    colors.on('track', function(event)
    {
      if (event.data.length === 0)
      {
        // No colors were detected in this frame.
      }
      else
      {
        event.data.forEach(function(rect)
        {
          console.log(rect.x, rect.y, rect.height, rect.width, rect.color);
        });
      }
    });



    tracking.track('#myVideo', colors);

  </script>
</div>

</body>
</html>
效果圖

這是參考官網(wǎng)例子的自動(dòng)跟蹤顏色版本

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>tracking.js - first tracking</title>

  <script src="../build/tracking-min.js"></script>

  <style>
    .rect {
      width: 80px;
      height: 80px;
      position: absolute;
      left: -1000px;
      top: -1000px;
    }
  </style>

</head>
<body>

<div>
  <div class="demo-container" id="demo-container">
    <video id="myVideo" width="640" height="480" preload autoplay loop muted></video>
  </div>
  <script type="text/javascript">


    navigator.getUserMedia  = navigator.getUserMedia ||
      navigator.webkitGetUserMedia ||
      navigator.mozGetUserMedia ||
      navigator.msGetUserMedia;
    navigator.getUserMedia({video:true}, gotStream, noStream);

    function gotStream(stream) {
      myVideo.src = URL.createObjectURL(stream);
      myVideo.onerror = function () {
        stream.stop();
      };
      stream.onended = noStream;
      myVideo.onloadedmetadata = function () {
        alert('攝像頭成功打開！');
      };
    }

    function noStream(err)
    {
      alert(err);
    }

    tracking.ColorTracker.registerColor('green', function(r, g, b) {
      if (r < 200 && g > 200 && b < 200) {
        return true;
      }
      return false;
    });

    var rect = undefined;
    var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow','green']);
    colors.on('track', function(event)
    {
      if (event.data.length === 0)
      {
        // No colors were detected in this frame.
      }
      else
      {
        event.data.forEach(function(rect)
        {
          //如果rect不是undefined 代表有東西,則代表有框框,則可以刪除
          if(rect != undefined)
          {
            var elements = document.getElementsByClassName('rect');
            while(elements.length > 0)
            {
              elements[0].parentNode.removeChild(elements[0]);
            }
          }
          window.plot(rect.x, rect.y, rect.width, rect.height, rect.color);
        });
      }
    });

    // 刪除框框
    window.plot = function(x, y, w, h, color)
    {
      rect = document.createElement('div');
      document.querySelector('.demo-container').appendChild(rect);
      rect.classList.add('rect');
      rect.style.border = '2px solid ' + color;
      rect.style.width = w + 'px';
      rect.style.height = h + 'px';
      rect.style.left = (myVideo.offsetLeft + x) + 'px';
      rect.style.top = (myVideo.offsetTop + y) + 'px';
    };


    tracking.track('#myVideo', colors);


  </script>


</div>


</body>
</html>
效果圖

step 4

Object Tracker 是經(jīng)過訓(xùn)練的一系統(tǒng)物體追蹤庫，同樣好像使用Color Tracker的套路，通過初始化‘track’，注冊(cè)‘track’，開啟‘track’，即可對(duì)眼睛，人臉，嘴巴等進(jìn)行識(shí)別，不過個(gè)人感覺準(zhǔn)確率其實(shí)不是特別的高，偵測(cè)范圍還是比較小，受環(huán)境影響有點(diǎn)大。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>tracking.js - first tracking</title>

  <script src="../build/tracking.js"></script>
  <script src="../build/data/face.js"></script>
  <script src="../build/data/eye.js"></script>
  <script src="../build/data/mouth.js"></script>

  <style>
    .rect {
      width: 80px;
      height: 80px;
      position: absolute;
      left: -1000px;
      top: -1000px;
    }
  </style>

</head>
<body>

<div>
  <div class="demo-container" id="demo-container">
    <video id="myVideo" width="320" height="240" preload autoplay loop muted style="position: absolute"></video>
    <canvas id="canvas" width="320" height="240" style="position: absolute" ></canvas>
  </div>
  <script type="text/javascript">

    //激活攝像頭
    navigator.getUserMedia  = navigator.getUserMedia ||
      navigator.webkitGetUserMedia ||
      navigator.mozGetUserMedia ||
      navigator.msGetUserMedia;
    navigator.getUserMedia({video:true}, gotStream, noStream);

    function gotStream(stream) {
      myVideo.src = URL.createObjectURL(stream);
      myVideo.onerror = function () {
        stream.stop();
      };
      stream.onended = noStream;
      myVideo.onloadedmetadata = function () {
        alert('攝像頭成功打開！');
      };
    }

    function noStream(err)
    {
      alert(err);
    }

    //獲取畫布
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    //檢測(cè)人臉
    var objects = new tracking.ObjectTracker(['face']);

    objects.on('track',function (event)
    {
        context.clearRect(0, 0, canvas.width, canvas.height);

        if(event.data.length  === 0)
        {

        }
        else
        {
           event.data.forEach(function(rect)
           {
            //在圖中畫框框
             context.strokeStyle = '#a64ceb';
             context.strokeRect(rect.x, rect.y, rect.width, rect.height);
             context.font = '11px Helvetica';
             context.fillStyle = "#fff";
             context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
             context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);

           });
        }

    });

    //激活
    tracking.track('#myVideo', objects);

  </script>


</div>


</body>
</html>
效果圖

除此之外，Tracking.js 還提供了特征的自訓(xùn)練接口，通過自訓(xùn)練，一樣可以使用用戶自己的偵查，通過配合Tracking.js 的強(qiáng)大接口，我想越來越多的計(jì)算將一點(diǎn)點(diǎn)的搬到前端去了，實(shí)在強(qiáng)大啊。更多摸索自己可以查看下tracking官網(wǎng)和一些大牛的博客吧。這只是幾個(gè)簡(jiǎn)單的實(shí)驗(yàn)罷了，挺有趣，以后再深入研究這個(gè)東西。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容