Tracking.Noodl로 js 해볼게요.

이 글은 GW advent 달력 Noodl 카탈로그 회의 5일차 글입니다!
https://gw-advent.9wick.com/calendars/2020/70
Tracking.js 소개
얼굴과 색상 등을 감지하고 약간의 이미지 인식이 가능한 자바스크립트의 프로그램 라이브러리입니다.
https://trackingjs.com/
이번에는 카메라로 얼굴을 검사하는 프로그램 라이브러리를 사용하려고 합니다.
https://trackingjs.com/examples/face_camera.html

완성되면 조금 남자답게...
차리다
Tracking.js에 필요한 프로그램 라이브러리 다운로드
액세스https://trackingjs.com/docs.html#introductionTo get started, download the project.의 링크부터 트랙킹.js-Master를 다운로드합니다.
다 쓰는 게 아니라 필요한 것만 꺼내.
필요한 라이브러리
build 디렉터리를 모두 꺼내 주십시오.

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

이미지
다음 이미지를 저장하십시오.

Noodl
새 프로젝트 작성
다운로드할 라이브러리 (모든build 디렉터리) 와 그림을 Noodl 프로젝트에 저장하십시오.
Script Downloader 노드
External Script에 두 경로를 입력합니다.
- 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) {
        // ...
    }
})

노드 생성 및 연결
다음 노드를 만들어 연결하세요.

그룹 노드 설정

Width: 600px

Height: 320px

※ 적당히 사용하면 되지만, 비율 대신 px로 지정하세요.
비디오 노드 설정

Autoplay 검사

Image 노드 설정

SizeMode: Content Height

Width: 200px

Source: 방금 다운로드한 이미지 선택

Position: Absolute

Canvas 노드는 별도로 설정할 필요가 없습니다.
이렇게 완성!
남은 과제
이런 작법은 단지 한 사람만 검출할 수 있다.두 사람이 찍히면 두 사람의 얼굴 위치 이미지가 번갈아 오간다.
Noodl의Create Component API 등을 사용하면Javascript 노드에 모두 쓰는 것이 좋을까요?