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

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

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

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

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

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

フォルダ構造

  1. プロジェクトフォルダ
  2. │
  3.  │ インデックス
  4. │
  5.  ├───資産
  6. │ 顔.jpg
  7.  │
  8.  └───js
  9.     │トラッキング最小値.js
  10.     │トラッキング
  11.     │
  12.     └───データ
  13.             目-min.js
  14.             目.js
  15.             フェイス-min.js
  16.             フェイス
  17.             口-min.js
  18.             口.js

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

HTMLコード

  1. <!doctype html >  
  2.  <html>​​  
  3.  <ヘッド>  
  4.    <メタ 文字セット= "utf-8" >  
  5.    < title > @tuts 顔検出チュートリアル</ title >  
  6.    
  7.    <スクリプト  src = "js/tracking-min.js" > </スクリプト>  
  8.    <スクリプト  src = "js/data/face-min.js" > </スクリプト>  
  9.    <スクリプト  src = "js/data/eye-min.js" > </スクリプト>  
  10.    <スクリプト  src = "js/data/mouth-min.js" > </スクリプト>  
  11.    
  12.    <スタイル>  
  13.   .rect {
  14.     境界線: 2px 実線 #a64ceb;
  15.     左: -1000px;
  16.     位置: 絶対;
  17.     上: -1000px;
  18.   } 
  19.    
  20.   #画像 {
  21.     位置: 絶対;
  22.     上位: 50%;
  23.     左: 50%;
  24.     マージン: -173px 0 0 -300px;
  25.   } 
  26.    </スタイル>  
  27.  </ヘッド>  
  28.  <本文>  
  29.  < div  クラス= "imgContainer" >  
  30.    <画像  id = "画像"   src = "アセット/face.jpg"   />  
  31.  </div>​​  
  32.    
  33.  </本文>  
  34.  </html>​​  

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

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

HTMLコード

  1. <!doctype html >  
  2.  <html>​​  
  3.  <ヘッド>  
  4.    <メタ 文字セット= "utf-8" >  
  5.    < title > @tuts 顔検出チュートリアル</ title >  
  6.    
  7.    <スクリプト  src = "js/tracking-min.js" > </スクリプト>  
  8.    <スクリプト  src = "js/data/face-min.js" > </スクリプト>  
  9.    <スクリプト  src = "js/data/eye-min.js" > </スクリプト>  
  10.    <スクリプト  src = "js/data/mouth-min.js" > </スクリプト>  
  11.    
  12.    <スタイル>  
  13.   .rect {
  14.     境界線: 2px 実線 #a64ceb;
  15.     左: -1000px;
  16.     位置: 絶対;
  17.     上: -1000px;
  18.   } 
  19.    
  20.   #画像 {
  21.     位置: 絶対;
  22.     上位: 50%;
  23.     左: 50%;
  24.     マージン: -173px 0 0 -300px;
  25.   } 
  26.    </スタイル>  
  27.  //トラッキングコード。
  28.  <スクリプト>  
  29.      window.onload =関数（）{
  30.       var img =ドキュメント.getElementById('img'); 
  31.    
  32.       var tracker = new tracker.ObjectTracker(['face', 'eye', 'mouth']); // パラメータに基づいて配列を返します。
  33.       トラッカー.setStepSize(1.7); 
  34.    
  35.       トラッキング.track('#img', トラッカー); 
  36.    
  37.       トラッカー.on('トラック', 関数(イベント) {
  38.         イベント.データ.forEach(関数(rect) {
  39.           描画(rect.x、rect.y、rect.width、rect.height);
  40.         });
  41.       }); 
  42.    
  43.       関数draw(x, y, w, h) {
  44.         var rect = document .createElement('div');
  45.         document.querySelector('.imgContainer').appendChild(rect);
  46.         rect.classList.add('rect'); 
  47.          rect.style.width = w + 'px'; 
  48.          rect.style.height = h + 'px'; 
  49.          rect.style.left = (img.offsetLeft + x) + 'px'; 
  50.          rect.style.top = (img.offsetTop + y) + 'px';
  51.       };
  52.     }; 
  53.    </スクリプト>  
  54.    
  55.  </ヘッド>  
  56.  <本文>  
  57.  < div  クラス= "imgContainer" >  
  58.    <画像  id = "画像"   src = "アセット/face.jpg"   />  
  59.  </div>​​  
  60.    
  61.  </本文>  
  62.  </html>​​  

結果


コードの説明。

  • tracking.ObjectTracker()メソッドは、追跡するオブジェクトを識別するクラスを受け取り、配列をパラメーターとして受け入れます。

  • setStepSize() はブロックのステップ サイズを指定します。

  • 追跡するオブジェクトを &#8220;track&#8221; イベントにバインドします。オブジェクトが追跡されると、追跡対象のオブジェクトはすぐに追跡イベントをトリガーします。

  • データはオブジェクトの配列の形式で取得されます。この配列には、各オブジェクト (顔、口、目) の幅、高さ、x 座標、y 座標が含まれます。

結果の要約。
結果は症状の形状によって異なる場合があり、改善と拡張の余地がありますが、私たちはこのタイプの API の開発を認識し、高く評価しています。

例を実行します:

画像付き実行例。

その他のリソース – Javascript による顔認識

https://github.com/auduno/headtrackr

https://github.com/auduno/clmtrackr

HTML5 Canvas とウェブカメラのビデオおよび画像のタグ付けを使用した顔追跡のチュートリアルを作成する予定です。上で説明したクライアント アクセス カメラ ブログを使用すると、既知の方法でユーザーのカメラにアクセスできるようになります。

注意:ブラウザのセキュリティ上の理由により、このプログラムは同じドメインで実行するか、ブラウザで Web セキュリティを無効にして実行する必要があります。

この記事は気に入りましたか？

この記事に関してご提案や追加事項がある場合、または誤りや古い情報を見つけた場合は、お気軽にお問い合わせください。皆様のご意見をお待ちしております。

ぜひこの記事を友達と共有したり、コメントを残したりしてください。皆様のご支援を心より感謝いたします！

Javascript ベースの顔検出方法

<<:  WeChat JS-SDK-使用許可署名アルゴリズム

>>:  非常に厳しい CPU 制約下でも正常に動作しますか? Java におけるさまざまな圧縮アルゴリズムのパフォーマンス比較

推薦する

李開復：「AI+」から「+AI」へ、テクノロジーが中国経済を変革

人工知能カンファレンスでAI業界の変化について語る李開復氏2020年世界人工知能会議において、Sin...

BEVFusionを超えて！高速かつシンプルなBEV統合展開ソリューション

この記事は、Heart of Autonomous Driving の公開アカウントから許可を得て転...

AIの民主化：ローコードおよびノー​​コードソリューションの台頭

今年初め、イノベーション、リサーチ、インキュベーションのグローバルディレクターであるルネ・シュルテ氏...

AI、ブロックチェーン、IoT、5Gの未来は統合だ

企業は業務を最適化し、現在の誇大宣伝サイクルを活用するために AI の導入に躍起になっています。報告...

AIの時代において、従来の検索エンジンはどこへ向かうのでしょうか?

こんにちは、皆さん。私は Luga です。今日は、人工知能 (AI) エコシステムに関連するテクノロ...

...

小売業界におけるロボットの応用は何ですか?

巨大食品店で溢れかえった商品を見つける高さ6フィートの自由に動くロボットから、ウォルマートの在庫をチ...

次のマーク・ザッカーバーグはAIになるのか？

この記事は公開アカウント「Reading Core Technique」（ID: AI_Discov...

盲目的に大規模モデルを追求して計算能力を積み上げないでください。シュム、カオ・イン、マー・イーは、AIを理解するための2つの基本原則、シンプルさと自己一貫性を提案した。

過去2年間、「優れた計算能力を活用して奇跡を起こす」大規模モデルは、人工知能分野のほとんどの研究者の...

プログラム分析を通じてニューラルネットワーク プログラムのバックドアを見つける方法

1 ニューラルネットワークにはさまざまな問題がある従来のプログラムには、よく知られたエラー、抜け穴、...

...

...

人工知能、モノのインターネット、新エネルギーなどへの投資ガイド。

12月21日、百度と華為は包括的な戦略提携を発表した。両者は中国市場とユーザーエクスペリエンスに重...

...

Googleの視覚言語モデルPaLI-3がリリースされました。パラメータはわずか50億で、より小さく、より高速で、より強力です。

大規模モデルの時代では、視覚言語モデル (VLM) のパラメータは数百億、さらには数千億にまで拡大し...