paiza times

paizaがお届けする、テック・キャリア・マネジメント領域における「今必要な情報」を届けるWebメディア

logo

paizaがお届けする、テック・キャリア・マネジメント領域の「今必要な情報」を届けるWebメディア

JavaScriptのみ!3つのメソッドだけで手を検出可能な機械学習ライブラリ「Handtrack.js」を使ってみた!

f:id:paiza:20210210114346j:plain
どうも、まさとらん(@0310lan)です!

今回は、JavaScriptで機械学習モデルを手軽に扱える便利なライブラリをご紹介します!

わずかなプログラムで静止画像やWebカメラからのリアルタイムな映像を解析して「手」を検出できるのが特徴です。JavaScriptライブラリを読み込むだけですぐに使えるので、HTMLファイル1つあればブラウザ上で実行できるのも魅力的です。

手の動きを利用したWebアプリを簡単に開発できるので、機械学習にご興味ある方はぜひ参考にしてみてください!

なおJavaScriptの基本は、paizaラーニングの「JavaScript入門編」で学ぶことができます。

Handtrack.js

f:id:paiza:20210210114428j:plain

■「Handtrack.js」で実現できること

使い方を解説する前に、まずは「Handtrack.js」でどのようなことが実現できるのかサンプル例を見ていきましょう。

「Handtrack.js」はブラウザ上で実行されるわけですが、この特徴を活用するとWebカメラを利用してリアルタイムに「手」を検出することができます。


以下のGIFを見てください。

f:id:paiza:20210210114643g:plain

これはWebカメラから見える「手」をリアルタイムに検出している様子です。手の部分に枠線が描画されてしっかりとトラッキングできているのが分かりますね。


この特徴をさらに応用すると、手の動きに合わせて線を描画しながら以下のようにお絵かきすることも可能です。

f:id:paiza:20210210114707g:plain


また、「手」をゲームのコントローラーとして利用する遊び方も考えられますね。

f:id:paiza:20210210114941g:plain

このように機械学習モデルをブラウザ上で手軽に利用できれば、アイデアしだいで新しい使い方や遊び方ができるようになるわけです。

ちなみに、ここでご紹介したサンプル例は、以下のリンクから実際に試すことができるのでぜひ挑戦してみてください!


<参考リンク>

■「Handtrack.js」の使い方

それでは「Handtrack.js」の基本的な使い方からご紹介していきます!

ライブラリの本体ファイル自体はGitHubからダウンロードできますが、CDN経由から手軽に利用することも可能です。


オススメは以下の「jsDelivr」を利用する方法です!

jsDelivr - Handtrack.js

f:id:paiza:20210210115154j:plain

「Copy URL」の項目から専用のURLを取得できます。実際には次のようなURLになります。

https://cdn.jsdelivr.net/npm/handtrackjs@0.0.13/dist/handtrack.min.js

あとは、このURLをscriptタグで読み込むだけで「Handtrack.js」を導入できます。


次に、JavaScriptでプログラムを組み立てていきます。

基本的な使い方として以下のように3つのメソッドを覚えておくだけで利用でき、誰でも扱いやすいように工夫されています。

f:id:paiza:20210210115331j:plain


上図の内容を実際のJavaScriptプログラムに変換すると以下のようになります。

// モデルの読み込み
handTrack.load(options).then(model => {

    // 「手」の検出
    model.detect(img).then(predictions => {

        // 結果を出力
        model.renderPredictions();

    });
});

このように、わずか3つのメソッドを実行するだけで、簡単に機械学習モデルを扱えるわけです。

■静止画像から「手」を検出しよう!

「Handtrack.js」の概要を踏まえたうえで、簡単なサンプルデモを作ってみましょう。

作成するのは機械学習モデルに画像を読み込ませて「手」を検出するというシンプルなWebアプリです。

f:id:paiza:20210210115444j:plain


そこで、まずはHTML内にimg要素と「手」を検出した結果を出力するCanvas要素を配置しましょう。

<img id="myimg" src="sample.jpg" width="480" height="320" crossorigin="anonymous"/>
<canvas id="mycanvas" width="480" height="320"></canvas>

結果が分かりやすいようにどちらも480×320のサイズに統一していますが、お好みで調整してもらって構いません。(※画像へアクセスできるようにcrossorigin属性も付与しておきましょう)


あとは、冒頭で解説したようにJavaScriptのプログラムを書くだけです!

handTrack.load(options).then(function(model) {

    model.detect(img).then(predictions => {
    
        model.renderPredictions(predictions, canvas, ctx, img);

    });
});


renderPredictions()の引数として以下の4つを設定しています。

  • predictions:機械学習モデルが予測した結果
  • canvas:HTMLに配置したCanvas要素
  • ctx:Canvasのコンテキスト
  • img:HTMLに配置したimg要素


上記の引数を設定して実行するだけで、検出した「手」の部分に自動で枠線を強調表示してくれるのです。

f:id:paiza:20210210115630j:plain


また、handTrack.load()メソッドを利用して機械学習モデルを読み込む際にオプションを設定することができます。

今回の場合であれば、以下のように3つのオプションを設定しておくといいでしょう。

const options = {
    flipHorizontal: false,  // 水平方向の反転
    maxNumBoxes: 3,        // 検出するボックスの最大数
    scoreThreshold: 0.7,   // 予測信頼度のしきい値
};

「しきい値」に設定する値ですが、最初は低い値にしておいて実行結果に表示される数値をもとにしながら適切な値を探っていくのが良さそうです。

今回作成したサンプルデモのソースコードは、以下のリンクからすべて閲覧できますのでぜひ参考にしてみてください!


<参考リンク>

■リアルタイムに映像から「手」を検出しよう!

今度は静止画像ではなく、Webカメラからの映像を利用した「リアルタイム検出」ができるサンプルデモを作ってみましょう!

f:id:paiza:20210210115902j:plain


必要になるHTML要素ですが、今回はWebカメラの映像を利用するのでvideo要素を配置しておきましょう。それと、結果を出力するためのCanvas要素があればOKです!

<canvas id="mycanvas" width="480" height="320"></canvas>
<video id="myvideo" width="480" height="320"></video>


次にJavaScriptのプログラムですが、Webカメラを利用する場合は専用のメソッドが用意されています。

handTrack.startVideo()を実行すると、自動的にWebカメラが起動してくれます。これを利用して正常にWebカメラが起動したかどうかを条件分岐しておくといいですね。

let model;

handTrack.load(options).then(function(model_data) {
  model = model_data;

  // Webカメラを起動する
  handTrack.startVideo(video).then(function(status) {
    if(status) {
      startDetection();
    } else {
      console.log("ビデオエラーが検出されました...", status);
    }
  });

});

また、読み込んだ機械学習モデルはリアルタイム検出をする際に繰り返し利用するので、適当な変数に格納しておくようにしましょう。(今回はmodelという変数に格納しました)


正常にWebカメラが起動したらstartDetection()という関数を実行するようにしました。内容は以下のとおりです。

function startDetection() {
  model.detect(video).then(predictions => {
    model.renderPredictions(predictions, canvas, ctx, video);

    // 「手」の検出と結果の出力を繰り返し実行する
    if(state) requestAnimationFrame(startDetection);
  });
}

これは静止画像のサンプルデモと同じく「手」を検出して結果を出力するプログラムなのですが、リアルタイム検出をするために繰り返し実行できるようにしているのがポイントです。


これにより映像から「手」をリアルタイムに検出できるようになるわけです!

f:id:paiza:20210210120021g:plain

この仕組みを応用すれば、線を描画したりゲームのコントローラーに活用したりなどが手軽にできるわけです。

ここまでのサンプルデモのソースコードは以下のリンクからすべて閲覧できますので、ぜひ参考にしてみてください!


<参考リンク>

■動画&ゲームでプログラミングが学べるpaizaラーニング

動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

Pythonで画像認識や音声分析が学べる「Python×AI・機械学習入門編」も公開中!

また、paizaでは『コードクロニクル』をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください。


■まとめ

今回は、JavaScriptだけで機械学習モデルを活用した「手」の検出ができるライブラリをご紹介しました。

「手」の検出に特化したライブラリですが、とても扱いやすいうえプログラムも簡単なので機械学習を利用したWebアプリを作りたい初心者の方にもオススメです。

また、ライブラリ自体もアップグレードを予定しており、さらに高速な処理ができるようになったり手の形を検出できるようになったりといったことも期待されています。

ぜひみなさんもこのライブラリを活用して、ユニークで新しいWebアプリを開発してみてください!


<参考リンク>




paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら
paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら
paizaのスキルチェック

paizaのおすすめコンテンツ

Webセキュリティ入門 ハッカー入門 Webセキュリティ講座がスタート!CVは内田真礼さん! Python✕AI 機械学習入門講座 CVに上坂すみれさんを起用!人気の機械学習講座を公開中!
paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.