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

ブログ    
ブログ    

推薦する

...

人工知能はどのようにして銀行をより「インテリジェント」にすることができるのでしょうか?

[[263447]]人工知能技術の継続的な導入は、新たな産業発展の中核的な原動力となり、さまざまな...

米メディア：人工知能の発展には5つの大きなトレンドが予想される

3月15日、アメリカの隔週刊ウェブサイト「フォーブス」は「2021年の人工知能：期待できる（または期...

AIとRPAによるテストがイノベーションを促進できる理由

人材管理に関して言えば、AI は、あらゆる業種のあらゆる企業ですでに日常的に導入されているツールです...

5G時代の人工知能のホットスポットとなる業界はどこでしょうか？

このプロセスでは、多くのアプリケーションが継続的に追加されています。たとえば、コンピュータと通信の統...

...

...

機械学習に必要なエンジニアリングの量は将来大幅に削減されるだろう

将来的には、ML 製品の構築がより楽しくなり、これらのシステムはより良く機能するようになります。 M...

マイケル・ブロンスタインは代数的位相幾何学から学び、新しいグラフニューラルネットワークのコンピューティング構造を提案しました。

この記事は、Cristian Bodnar と Fabrizio Frasca の共著で、2021 ...

Javaソートアルゴリズムの概要（I）：挿入ソート

挿入ソートの基本的な操作は、ソートされた順序付けられたデータにデータを挿入し、それによって番号が 1...

...

DeeCamp 2019は産学連携を促進するためにKuaishouとInnovation Worksを正式に立ち上げました

4月8日、イノベーションワークスが主催する「DeeCamp2019 人工知能サマートレーニングキャン...

崑崙Core2が量産開始：性能が2～3倍向上し、中国の産業知能に強力な「コア」を注入

8月18日、百度とCCTVニュースは共同で「百度ワールド2021」カンファレンスを開催し、AIが何千...

人工知能時代の到来とともに、私たちはどんな知識を学ぶべきでしょうか？

将来、AI知能ロボット翻訳は根本的な進歩を遂げ、筆記翻訳、口頭通訳、同時通訳など、人間による翻訳作業...

30億枚の写真データベースを持つ顔認識スタートアップがハッカーの攻撃を受ける！ 600以上の法執行機関と銀行の情報が盗まれた

多数の法執行機関と契約している顔認識会社が、ハッキングされ顧客リスト全体が盗まれたと報告した。デイリ...