JavaScript チュートリアル: Web アプリケーションに顔検出機能を追加する

[51CTO.com クイック翻訳] 先週、annyang を使用してマップ インターフェースに音声コマンドを追加しました (https://www.infoworld.com/article/3400658/javascript-tutorial-add-speech-recognition-to-your-web-app.html)。今週は、pico.js を使用してシンプルなヘッド トラッキング機能を追加することで、マルチモーダル インターフェイスをさらに強化します。 pico.js は、実稼働グレードのライブラリというよりは概念実証に近い、シンプルな JavaScript ライブラリですが、私が調査した顔検出ライブラリの中で最もよく機能するようです。

[[269281]]

この記事の目的は、ユーザーの頭の位置を地図上に重ねて表示するシンプルな赤い点から始めることです。

図1

まず、ユーザーの顔の位置の更新を取得するために使用できる pico.js 機能をラップするシンプルな React クラスを作成しましょう。

 <ReactPico onFaceFound={(face) => {this.setState({face})}} />

顔が検出された場合は、顔の位置の詳細を含むコンポーネントをレンダリングできます。

 {face && <FaceIndicator x={face.totalX} y={face.totalY} />}}

pico.js で最初に直面した課題は、それが JavaScript で実装された研究プロジェクトであり、必ずしも最新の JavaScript 標準に準拠した製品レベルのライブラリではなかったことです。とりわけ、これは yarn add picojs を実行できないことを意味します。 pico.js の紹介ではオブジェクト検出について詳しく説明されていますが、API ドキュメントというよりは研究論文のような内容になっています。ただし、実際にコードを使用するには、添付の例で十分です。数時間かけて、添付のサンプルを、コードを最大限に活用できる比較的シンプルな React クラスに組み込みました。

pico.js が最初に行うことは、カスケード モデルを読み込むことです。これには、顔に対して事前トレーニングされたモデルのバイナリ表現を取得するために AJAX 呼び出しが必要です。 (同じライブラリを使用して他の種類のオブジェクトを追跡することもできますが、カスタム モデルをトレーニングするには公式の pico 実装を使用する必要があります。) このモデル読み込みコードを componentDidMount ライフサイクル メソッドに配置できます。わかりやすくするために、サンプル コードをさらに抽象化して、loadFaceFinder という別のメソッドにしました。

コンポーネントマウント() {
    FaceFinder をロードします。
  }
  フェイスファインダーをロードする（）{
    const cascadeurl = 'https://raw.githubusercontent.com/nenadmarkus/pico/c2e81f9d23cc11d1a612fd21e4f9de0921a5d0d9/rnt/cascades/facefinder' ;
 fetch (cascadeurl).then ( (response) => {
      response.arrayBuffer(). then ((buffer) => {
        var bytes = new Int8Array(バッファ);
        this.setState({
          フェイスファインダー: pico.unpack_cascade(バイト)
        });
        新しい camvas(this.canvasRef. current .getContext( '2d' ), this.processVideo);
      });
    });
  }

顔検出モデルのバイナリ表現を取得して解析し、状態を設定することに加えて、<canvas> コンテキストとコールバック ハンドラーを参照する新しい camvas も作成します。 camvas ライブラリは、ユーザーのウェブカメラからのビデオをキャンバスに読み込み、レンダリングされるフレームごとにハンドラーを呼び出します。 loadFaceFinder の内容は、pico.js が提供する参照プロジェクトのほぼ正確なコピーです。状態からアクセスできるように、モデルの保存場所を変更しました。ブラウザが提供する DOM API を使用する代わりに、 react Ref を通じてキャンバス コンテキストを参照します。

this.processVideo も、リファレンス プロジェクトで提供されているコードとほぼ同じです。いくつかの変更を加えるだけで済みます。モデルがロードされたときにのみコードを実行するため、コード本体全体にチェックを追加します。また、ユーザーが渡すと予想されるコールバック ハンドラーを使用してこの React クラスを作成し、そのハンドラーを定義した後でのみ処理コードを実行するようにしました。

プロセスビデオ = (ビデオ、dt) => {
    if(this.state.faceFinder && this.props.onFaceFound) {
      /*すべてのコード */
    }
 }

私が行った他の唯一の変更は、顔が見つかったときに実行するアクションです。 pico.js の例ではキャンバス上にいくつかの円を描画しますが、代わりにそのコールバック ハンドラーにデータを渡す必要があります。コールバック ハンドラーがこれらの値を処理しやすくなるように、コードを少し変更してみましょう。

 this.props.onFaceFound({
          x: 640 - 結果[i][1],
          y: 日付[i][0],
          半径: dets[i][2],
          x比率: (640 - dets[i][1]) / 640,
          y比率: dets[i][0] / 480,
          合計X: (640 - dets[i][1]) / 640 * window.innerWidth、
          合計Y: dets[i][0] / 480 * window.innerHeight、
          });

この形式を使用すると、キャプチャされたキャンバス要素内の顔の絶対位置と半径、キャンバス要素内の顔の相対位置、キャンバス要素内の顔の位置を返すことができます。弊社のカスタマイズコースは基本的に完了です。また、最新の構文を使用するために、pico.js と pico バージョンの camvas.js にいくつかの小さな変更を加える必要がありましたが、これらはロジックよりもキーワードに重点を置いたものでした。

これで、カスタム ReactPico クラスをアプリにインポートしてレンダリングし、顔が検出された場合に FaceIndicator クラスを条件付きでレンダリングできるようになりました。私は他の顔検出ライブラリをいくつか使用しましたが、pico.js はフル機能のライブラリではないにもかかわらず、その正確性と使いやすさに驚きました。

元のタイトル: JavaScript チュートリアル: Web アプリに顔検出機能を追加する、著者: Jonathan Freeman

[51CTOによる翻訳。パートナーサイトに転載する場合は、元の翻訳者と出典を51CTO.comとして明記してください]