顔認識に興味がありますか? 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 におけるさまざまな圧縮アルゴリズムのパフォーマンス比較

ブログ    
ブログ    

推薦する

Stack Overflow が ChatGPT に対抗し、VS Code と連携する独自開発の生成 AI ツールをリリース

数日前、Stack Overflow コミュニティのトラフィックが大幅に減少したというニュースがあり...

GenAI が近づくにつれて、データ ガバナンスはどのように進化するべきでしょうか?

著者 | アイザック・サコリック編集者 | ヤン・ジェン制作：51CTO テクノロジースタック（We...

ビジネスリーダーがLLMを活用して新たな機会を創出できる5つの方法

一般的に、AIGC とは、人間が作成したコンテンツに非常によく似た画像、音楽、テキストなどのコンテン...

...

人工知能とモノのインターネットの動的統合の探究（I）

AI と IoT の統合により、私たちの日常生活に新たな効率、自動化、インテリジェンスがもたらされ...

妻の心を掴むために、目を閉じていても的を射ることができる自動照準の弓を作りました。部品、回路、アルゴリズムはすべて私が作りました。

この記事はAI新メディアQuantum Bit（公開アカウントID：QbitAI）より許可を得て転載...

GPT-4でさえテストに失敗し、17の大規模モデルすべてが失敗しました。因果推論は難しすぎる

ChatGPT のリリース以来、強力な言語理解、生成、論理的推論機能など、大規模モデルの出現能力が高...

ChatGPT に触発されて、Google DeepMind は 7100 万の遺伝子変異を予測します。 AIが人間の遺伝学を解読

タンパク質予測モデルAlphaFoldがAIの世界に津波のような波を起こした後、Alphaファミリー...

インターフェース開発にアルゴリズムは必要ないなんて誰が言ったのでしょうか?

[[146153]]アルゴリズムとは何ですか?簡単に言えば、問題を解決するための手順がアルゴリズム...

...

ニューラル放射線フィールドは「神経」を取り除き、3D効果の品質を低下させることなくトレーニング速度を100倍以上向上させます。

2020年、カリフォルニア大学バークレー校、Google、カリフォルニア大学サンディエゴ校の研究者...

MarketsandMarkets: AI ロボット市場は 2026 年までに 353 億ドルに達する

MarketsandMarketsが発表した最新の市場調査レポートによると、人工知能ロボット市場は2...

ロボットは銀行業務を破壊するのか？

[[223220]]世界経済フォーラムの最近のレポートでは、2020年までに先進国で500万の雇用...

次世代言語モデルパラダイム LAM が登場します! AutoGPTモデルがLLMを席巻、計画、メモリ、ツールの3つの主要コンポーネントの包括的なレビュー

ChatGPT によって開始された AI の波は私たちを人工知能の時代へと導き、言語モデルは日常生活...

ニューラルネットワークのトレーニングを4倍高速化！ Google Brainチームが「データエコー」アルゴリズムを提案

[[271402]]ムーアの法則の終焉にあたり、GPU やその他のハードウェア アクセラレータによっ...