LoginSignup
6
5

More than 3 years have passed since last update.

Tracking.jsをNoodlで使ってみる

Posted at

この記事は、GWアドベントカレンダー Noodlもくもく会の5日目の記事です!
https://gw-advent.9wick.com/calendars/2020/70

Tracking.jsとは

顔や色の検出など、ちょっとした画像認識ができるJavascriptのライブラリです。
https://trackingjs.com/

今回は、カメラを使って顔を検出するライブラリを使ってみたいと思います。
https://trackingjs.com/examples/face_camera.html
スクリーンショット 2020-05-03 11.45.46.png

ちょっと笑い男感がある仕上がり...

準備

Tracking.jsで必要なライブラリをダウンロード

https://trackingjs.com/docs.html#introduction にアクセスし、
To get started, download the project.のリンクから、tracking.js-master をダウンロードします。
全部使うわけではないので、必要なものだけ取り出しておきます。

必要なライブラリ

buildディレクトリまるごと取り出しておいてください。

build/
  data/
  tracking.js
  tracking-min.js

画像

下記画像を保存してください。
ukiyoe.png

Noodl

新しいプロジェクトを作成

準備でダウンロードしたライブラリ(buildディレクトリごと)と画像をNoodlプロジェクトに格納してください。

Script Downloaderノード

External Scriptに2つのパスを入力します。
- build/tracking-min.js
- build/data/face-min.js

Javascriptノード

Javascriptノードを作成し、下記コードをコピペ

NoodlのJavascriptノード
define({
    // The input ports of the Javascript node, name of input and type
    inputs:{
        // ExampleInput:'number',
        // Available types are 'number', 'string', 'boolean', 'color' and 'signal',
        mySignal:'signal',
        video:'domelement',
        canvas:'domelement',
        img:'reference'
    },

    // The output ports of the Javascript node, name of output and type
    outputs:{
        // ExampleOutput:'string',
        posX:'number',
        posY:'number'
    },

    // All signal inputs need their own function with the corresponding name that
    // will be run when a signal is received on the input.
    mySignal:function(inputs,outputs) {
        // ...
        var _this = this;
        inputs.video.setAttribute("id",'video');
          var video = inputs.video;
          var canvas = inputs.canvas;
          var context = canvas.getContext('2d');

          var tracker = new tracking.ObjectTracker('face');
          tracker.setInitialScale(4);
          tracker.setStepSize(2);
          tracker.setEdgesDensity(0.1);

          tracking.track('#video', tracker, { camera: true });

          tracker.on('track', function(event) {
            context.clearRect(0, 0, canvas.width, canvas.height);

            event.data.forEach(function(rect) {
                outputs.posX = rect.x;
                outputs.posY = rect.y;
                _this.flagOutputDirty("posX");
                _this.flagOutputDirty("posY");
            });
          });
    },

    // This function will be called when any of the inputs have changed
    change:function(inputs,outputs) {
        // ...
    }
})

ノードを作成してつなぐ

下記のようにノードを作成し、つなげてください。
スクリーンショット 2020-05-03 11.39.39.png

Groupノードの設定

  • Width: 600px
  • Height: 320px

※適当でよいのですが、比率でなくpxで指定してください。

Videoノードの設定

  • Autoplay にチェック

Imageノードの設定

  • SizeMode: Content Height
  • Width: 200px
  • Source: 先程ダウンロードした画像を選択
  • Position: Absolute

Canvasノードは特に設定いりません。

これで完成です!

残っている課題

この書き方だと、一人しか検出できません。2人映ると二人の顔の位置を画像が交互に行き来してしまいます。
NoodlのCreateComponentAPIなどを使って、Javascriptノード内にすべて書いたほうがいいかもしれない?

6
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
5