顔認識に興味がありますか? JavaScriptで実装された顔検出方法

私はビデオや画像における顔のタグ付け、検出、顔認識技術に常に興味を持っています。顔認識ソフトウェアやプラグインを開発するためのロジックやアルゴリズムを入手するのは私の想像を超えていることは承知しています。笑顔、目、顔の構造を認識できる JavaScript ライブラリについて知ったとき、チュートリアルを書こうという気持ちになりました。純粋な JavaScript ベースまたは Java ベースのライブラリが多数あります。

今日は、 Eduardo Lundgren が開発した軽量の JavaScript ライブラリである、tracking.js の学習を始めます。これを使用すると、リアルタイムの顔検出、色追跡、友達の顔のタグ付けが可能になります。このチュートリアルでは、静止画像から顔、目、口を検出する方法について説明します。

チュートリアルの最後には、ヒントやコツ、さらに技術的な詳細を含む実用的な例を提供するチュートリアルがあります。

まず、プロジェクトをビルドする必要があります。GitHub からプロジェクトをダウンロードし、ビルドフォルダーを抽出します。ファイルとディレクトリの構造に従ってビルドフォルダーを配置します。このチュートリアルでは、次のファイルとディレクトリ構造を使用しました。

フォルダ構造

プロジェクトフォルダ
│
 │ インデックス
│
 ├───資産
│ 顔.jpg
 │
 └───js
    │トラッキング最小値.js
    │トラッキング
    │
    └───データ
            目-min.js
            目.js
            フェイス-min.js
            フェイス
            口-min.js
            口.js

js フォルダーには、tracking.js から抽出した JavaScript ファイルがあることがわかります。以下はindex.htmlのHTMLコードです。

HTMLコード

<!doctype html >  
 <html>  
 <ヘッド>  
   <メタ 文字セット= "utf-8" >  
   < title > @tuts 顔検出チュートリアル</ title >  
   
   <スクリプト  src = "js/tracking-min.js" > </スクリプト>  
   <スクリプト  src = "js/data/face-min.js" > </スクリプト>  
   <スクリプト  src = "js/data/eye-min.js" > </スクリプト>  
   <スクリプト  src = "js/data/mouth-min.js" > </スクリプト>  
   
   <スタイル>  
  .rect {
    境界線: 2px 実線 #a64ceb;
    左: -1000px;
    位置: 絶対;
    上: -1000px;
  } 
   
  #画像 {
    位置: 絶対;
    上位: 50%;
    左: 50%;
    マージン: -173px 0 0 -300px;
  } 
   </スタイル>  
 </ヘッド>  
 <本文>  
 < div  クラス= "imgContainer" >  
   <画像  id = "画像"   src = "アセット/face.jpg"   />  
 </div>  
   
 </本文>  
 </html>

上記の HTML コードでは、tracking.js から 4 つの JavaScript ファイルをインポートします。これらのファイルは、画像から顔、目、口を検出するのに役立ちます。次に、静止画像から顔、目、口を検出するコードを記述します。この画像を意図的に選んだのは、表情やポーズの異なる複数の顔が含まれているからです。

目標を達成するには、HTML ファイルのヘッダー内のコードを変更する必要があります。

HTMLコード

<!doctype html >  
 <html>  
 <ヘッド>  
   <メタ 文字セット= "utf-8" >  
   < title > @tuts 顔検出チュートリアル</ title >  
   
   <スクリプト  src = "js/tracking-min.js" > </スクリプト>  
   <スクリプト  src = "js/data/face-min.js" > </スクリプト>  
   <スクリプト  src = "js/data/eye-min.js" > </スクリプト>  
   <スクリプト  src = "js/data/mouth-min.js" > </スクリプト>  
   
   <スタイル>  
  .rect {
    境界線: 2px 実線 #a64ceb;
    左: -1000px;
    位置: 絶対;
    上: -1000px;
  } 
   
  #画像 {
    位置: 絶対;
    上位: 50%;
    左: 50%;
    マージン: -173px 0 0 -300px;
  } 
   </スタイル>  
 //トラッキングコード。
 <スクリプト>  
     window.onload =関数（）{
      var img =ドキュメント.getElementById('img'); 
   
      var tracker = new tracker.ObjectTracker(['face', 'eye', 'mouth']); // パラメータに基づいて配列を返します。
      トラッカー.setStepSize(1.7); 
   
      トラッキング.track('#img', トラッカー); 
   
      トラッカー.on('トラック', 関数(イベント) {
        イベント.データ.forEach(関数(rect) {
          描画(rect.x、rect.y、rect.width、rect.height);
        });
      }); 
   
      関数draw(x, y, w, h) {
        var rect = document .createElement('div');
        document.querySelector('.imgContainer').appendChild(rect);
        rect.classList.add('rect'); 
         rect.style.width = w + 'px'; 
         rect.style.height = h + 'px'; 
         rect.style.left = (img.offsetLeft + x) + 'px'; 
         rect.style.top = (img.offsetTop + y) + 'px';
      };
    }; 
   </スクリプト>  
   
 </ヘッド>  
 <本文>  
 < div  クラス= "imgContainer" >  
   <画像  id = "画像"   src = "アセット/face.jpg"   />  
 </div>  
   
 </本文>  
 </html>