この記事では、画像やビデオのトラッキングのためのTrackingJsを使って、コンピュータビジョンとオブジェクトや色検出のトラッキング機能を設定する方法を見ていきます。

本ブログは英語版からの翻訳です。オリジナルはこちらからご確認いただけます。一部機械翻訳を使用しております。翻訳の間違いがありましたら、ご指摘いただけると幸いです。

TrackingJsとは何ですか？

Tracking.jsはJavaScriptのフレームワークで、開発者がコーディングや複雑なアルゴリズムを必要とせずに、コンピュータビジョンやオブジェクト検出機能をウェブアプリケーションに簡単に埋め込むことができるように作られています。Tracking.jsは比較的シンプルで使いやすく、多くの点でJQueryに似ています。トラッカー、さまざまな計算操作のためのユーティリティ機能、その他のウェブコンポーネントを提供し、生活をより簡単にしてくれます。

Trackerの種類

tracking.jsのTrackerとは、画像や動画の要素を検出して追跡するJSオブジェクトのことで、この要素には顔や色、オブジェクトなどがあります。また、Tracking.jsはカスタムトラッカーを作成して好きなものを検出する機能も提供しています。具体的なトラッカーを見てみましょう。

Color Tracker

Color Trackerは、画像やビデオ内の色の特定のセットを追跡するために使用することができます。デフォルトでは、このTrackerはマゼンタ、シアン、イエローの色をサポートしていますが、他のカスタムカラーを追加する可能性があります。実際にTrackerを見てみましょう。

これはGitHubで利用可能なコードをスニップしたものです。

ここにコードの説明があります。

• 6行目:tracking-min.js を含んでいます。
• 14 行目: video コンポーネントを定義しています。
• 21行目: ColorTracker のインスタンスを作成します。

var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);

• 23行目: トラックイベントが発生したときに何が起こるかを定義しています。つまり、ビデオが実行されているときに、Tracking.jsはそのイベントオブジェクトに何が含まれているかを分析し始めます。イベントオブジェクトにはdata属性が含まれており、その長さが0と異なるかどうかをテストしています。 これはデータがあることを意味しており、実際、そのデータはビデオ/イメージのどこかで見つかった色に関する情報を表しているので、データには色が見つかった位置（x軸、y軸）、それを含む領域の高さと幅、色のラベルが含まれています。これは、29行目に印刷されたものです。
• 34 行目 DOM に配置されたビデオ コンポーネントのトラッキングを開始します。 では、カスタムカラーを追加する方法を見てみましょう。カラーラベルとコールバック関数をパラメータとして、関数 registerColor を使用しています。

GitHubで公開されているコードを抜粋してみました。

27行目と34行目で、この関数を使って2つの新しい色を登録したことがわかります。実際のところ、Tracking.jsはRGB表現を使って色を扱うので、デフォルトではマゼンタ、シアン、イエローの色しかライブラリに登録されていないのですが、もしもっと色を追加したいのであれば、この関数を使って色を検出する方法をlibに示すことができます。

私たちの場合、緑と黒を追加したのは、それぞれのRGB表現を持っているからです。(0,255,0) と (0,0,0,0) です。2番目のパラメータは、色を検出するためのロジックを含むコールバックです。

これは非常にシンプルで、Tracking.jsはトラッキング時の色を(RGB形式で)このコールバックに送ります。例えば、緑（絶対緑）の場合、RGBコードは(0,255,0)なので、受信したデータがそれに対応するかどうかを検証し、この時点でTracking.jsはその領域を考慮すべきかどうかを知っているので、true/falseを返すだけです。

tracking.ColorTracker.registerColor('green', function(r, g, b) {
  if (r == 0 && g == 250 && b == 0) {
     return true;      
  }
  return false;   
});

最後にやるべきことは、トラッカーを初期化するときにカラーリストに色のラベルを追加することです。

var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow','green']);

Object Tracker

この部分は、一連の画像やビデオの中でトラッキングしたいものをトラッキングすることに関連しています。そのためには、トラッカーが何をトラッキングすべきかについての入力として訓練されたデータを提供するのがベストです。幸いにもTrackingJsには目、口、顔の3つのデータセットが用意されています。これらのデータセットがどのように機能するのか見てみましょう。

オブジェクト検出の例を実装してみましょう。コードはこちらです。

ここでは、顔、目、口を検出するように訓練されたデータセットをファイルツリーの先頭に含めています。デフォルトでは、これらがこのライブラリで利用できる唯一のツリーです。このリンクをクリックすると、新しいオブジェクトを検出するためのカスタムデータセットを作成する方法を見ることができます。

• plot()関数があり、検出されたオブジェクトの周りに矩形を描くのが役割です。

結果は以下のようになります。

ユーティリティ

コンピュータを使って何かを可視化するプログラムを作るのは、さまざまな意味で非常に難しいことです。例えば、ユーザのカメラを開いて利用可能なピクセルを処理する方法を考えなければならないでしょうし、画像の曲線を検出したり、その他の重い計算処理もあります。ユーティリティは、ウェブ開発者のための軽量で使いやすいAPIです。実際、利用可能なユーティリティのいくつかは以下の通りです。機能検出、コンボリューション、Gray Scale、画像のぼかし、インテグラル画像、Sobel、Viola-Jones。

機能の検出

この機能は、画像内で利用可能なオブジェクトのコーナーを見つけることによって機能します。そのAPIは次のようになります。

var corners = tracking.Fast.findCorners(pixels, width, height);

コンボリューション(畳み込み演算）

次に、畳み込みフィルタがありますが、これは画像のエッジの検出、ぼかし、シャープネス、エンボスなどに役立ちます。画像の畳み込みには、水平方向、垂直方向、畳み込みを分離する方法の3つの方法があります。

tracking.Image.horizontalConvolve(pixels, width, height, weightsVector, opaque);
tracking.Image.verticalConvolve(pixels, width, height, weightsVector, opaque);
tracking.Image.separableConvolve(pixels, width, height, horizWeights, vertWeights, opaque);

Gray Scale

Gray Scaleは画像のGray Scaleのトーン側の輝度値を検出するために使用されます。

tracking.Image.grayscale(pixels, width, height, fillRGBA);

画像のぼかし

Tracking.jsはGaussian Blurと呼ばれるぼかし効果の一種であるぼかしアルゴリズムを実装しています。この特定のぼかし効果は主にマルチメディアソフトウェアで使用されており、画像のノイズや不要なディテールを減らすのに役立ちます。一行のコードで画像をぼかす構文は以下の通りです。

tracking.Image.blur(pixels, width, height, diameter);

インテグラル画像

この機能は、開発者がグリッドの長方形のサブセット内の値の合計を持つことができます、それはまた、summed area table(合計領域テーブル)と呼ばれています。画像処理の分野では、積分画像としても知られています。これをTracking.jsで計算するには、以下のようにします。

tracking.Image.computeIntegralImage(
  pixels, width, height,
  opt_integralImage,opt_integralImageSquare,opt_tiltedIntegralImage,
  opt_integralImageSobel
 );

Sobel

この機能は画像の垂直方向と水平方向のグラデーションを計算し、 計算された画像を組み合わせて画像のエッジを見つけ出します。Sobelフィルタの実装方法は、 まず画像をグレースケールしてから水平方向と垂直方向のグラデーションを計算し、 最後にグラデーション画像を組み合わせて最終的な画像を作成します。

APIは以下のようになっています。

tracking.Image.sobel(pixels, width, height);

Viola-Jones

Viola-Jonesオブジェクト検出フレームワークは、リアルタイムで競争力のあるオブジェクト検出率をリアルタイムで提供する最初のオブジェクト検出フレームワークです。この手法はtracking.ObjectTracker実装の内部で使用されています。

Viola-Jonesを使ってTracking.jsを使って画像ピクセルのオブジェクトを検出するには:

tracking.ViolaJones.detect(pixels, width, height, initialScale, scaleFactor, stepSize, edgesDensity, classifier);

Webコンポーネント

コンピュータビジョンプログラムを書くのは大変なことが多く、単純な作業であっても完了させるために多くの計算が必要であり、コーディングも非常に反復的なものになっていました。この優れたlibの主な目的は、ウェブ上での複雑な処理を直感的なAPIで提供することであり、Web コンポーネントが付属しています。

様々な意味でのWebコンポーネントは、現代のWeb開発における新しい概念です。それらの目的は、より簡単なロジックカプセル化モデルを持ち込むことです。実際、これにより、開発者は機能のすべてのロジックを HTML 要素にカプセル化し、DOM 要素と同じように自然に使用することができます。これは、 react や angular などのライブラリの背後にある同じコンセプトを利用しています。しかし、これらとは異なり、WebコンポーネントはWebブラウザに完全に統合されています。

そこでTracking.jsは、上で説明したようなAPIの一部を、上で説明したWebコンポーネント要素に埋め込むことで、コンピュータビジョンをWeb上で簡単に実現する方法を提供しています。これらを使用するには、まず bower パッケージを介してインストールする必要があります。以下のコマンドを入力するだけで、TrakingJsのWebコンポーネントをインストールできます。

bower install tracking-elements --save

これを利用することで、Color要素(色を検出するために使われる)やObject要素(要素を検出するために使われる)のようないくつかの基本的な要素を提供することができます。TrackingJsのWebコンポーネントの大原則は、ネイティブのWeb要素(<video />, <img />などを拡張することと、フレームワークに新しい機能を追加することです。これは新しい属性 id=“"で行われ、検出する要素(色やオブジェクトなど)は target=“"属性で定義されます。

Color要素

いくつかの色を検出してみましょう：マゼンタ、シアン、イエロー:

<!-- detect colors into an image -->
<img is="image-color-tracking" target="magenta cyan yellow" />
<canvas is="canvas-color-tracking" target="magenta cyan yellow"></canvas>
<video is="video-color-tracking" target="magenta cyan yellow"></video>

上記のコードでは、ネイティブの <img/> 要素を拡張していることを指定するために is="image-color-tracking” を使用し、ターゲットとしている色をトラッカーに知らせるために target="magenta cyan yellow” を使用しています。

Object要素

実践でやってみましょう。

ここにコードスニペットがあります。

• 5行目 :ウェブコンポーネントの機能を有効にするためにポリフィルをインポートします。
• 7行目 :ウェブコンポーネントをインポートします。
• 11行目: ネイティブのものをis属性で拡張し、target属性で追跡対象のオブジェクトを定義することで、Webコンポーネント自体を使用しています。
• 18 行目: 要素にイベント・リスナーを追加し、顔が検出されたときに発生するトラック・イベントをリッスンします。
• 20 行目: plotRectagle()関数を呼び出して、検出された領域の周りに矩形を描画します。

結論

今回の記事では、Web上にコンピュータビジョンをインストールして適用し、TrackingJsを使っていくつかのオブジェクトや色検出機能を実行する方法を見てきました。

アリババクラウドは日本に２つのデータセンターを有し、世界で60を超えるアベラビリティーゾーンを有するアジア太平洋地域No.1(2019ガートナー)のクラウドインフラ事業者です。
アリババクラウドの詳細は、こちらからご覧ください。
アリババクラウドジャパン公式ページ