Node-RID로 간단하게 얼굴 체크하기

본고에서 사용한 node-red-node-ui-webcam은 WebRTC의 Node-RID를 지원하는 Dashboard 기능 중의 하나이다.
HTML5가 설치된 웹RTC의 웹 브라우저에 카메라가 사용할 수 있는 환경이 있으면 Node-RID가 작동하는 환경에서 카메라 등을 준비할 필요가 없어 얼굴 인증 등을 위한 시스템을 손쉽게 구축할 수 있다.

작업 환경 정보

노드 RED 환경을 준비합니다.https에 대한 접근을 사용하십시오.
팔레트 메뉴에서 노드를 추가하여 다음 노드를 추가합니다.
node-red-dashboard
node-red-node-base64
node-red-node-ui-webcam
node-red-contrib-face-recognition

테스트 환경 정보

웹캠에서 가져온 이미지에서 얼굴 검사를 했습니다.

이 처리는 다음과 같은 지극히 간단한 구성으로 진행되었다.

대시보드 메뉴의 Webcam은 jpeg 이미지의 바이너리 데이터를 출력합니다.
faceapi, msg로 이동합니다.paylad에서 출력한 jpeg의 이진 데이터를 직접 입력하십시오.
faceapi의 노드 설정에 따라 얻은 정보는 달라지지만 출력에는 JSON 형식으로 각 파라미터와 각 파라미터의 이미지가 추가됩니다.
wabcam에서 온 데이터와 검측 결과의 데이터는 jpeg 이미지의 2진 데이터이기 때문에base 64 노드에서 전개되며 템플릿 노드를 통해 계기판을 표시합니다.
샘플 프로세스는 다음과 같습니다.

[{"id":"a33ed927.6f9888","type":"change","z":"8c800a7.bed71f8","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload[\"face-api-compute\"].image","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":580,"y":140,"wires":[["45a658cb.1014f8"]]},{"id":"8c3c0205.30fe7","type":"debug","z":"8c800a7.bed71f8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":770,"y":80,"wires":[]},{"id":"bff66af1.359f28","type":"ui_template","z":"8c800a7.bed71f8","group":"438d1ff6.c6274","name":"HTMLインライン画像の表示","order":1,"width":0,"height":0,"format":"<div style=\"height: 240px; width: 320px\">\n<img src=\"data:image/low;base64,{{msg.payload}}\"\n width='320'\n height='240'\n id='img'\n alt='getting image'\n />\n </div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":360,"y":240,"wires":[[]]},{"id":"8f36b725.c232f8","type":"ui_template","z":"8c800a7.bed71f8","group":"438d1ff6.c6274","name":"HTMLインライン画像の表示","order":2,"width":0,"height":0,"format":"<div style=\"height: 480px; width: 640px\">\n<img src=\"data:image/low;base64,{{msg.payload}}\"\n width='640'\n height='480'\n id='img'\n alt='getting image'\n />\n </div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":780,"y":240,"wires":[[]]},{"id":"c70b7138.ebfc7","type":"base64","z":"8c800a7.bed71f8","name":"","action":"","property":"payload","x":300,"y":140,"wires":[["bff66af1.359f28"]]},{"id":"45a658cb.1014f8","type":"base64","z":"8c800a7.bed71f8","name":"","action":"","property":"payload","x":760,"y":140,"wires":[["8f36b725.c232f8"]]},{"id":"4b06232c.8e1dfc","type":"ui_webcam","z":"8c800a7.bed71f8","name":"","group":"82a62f87.98d31","order":1,"width":6,"height":5,"countdown":false,"autoStart":false,"hideCaptureButton":false,"showImage":"2","mirror":true,"format":"png","x":140,"y":80,"wires":[["c70b7138.ebfc7","75806a6d.7a55b4"]]},{"id":"75806a6d.7a55b4","type":"face-api-input","z":"8c800a7.bed71f8","name":"Find Faces","numNodes":1,"computeNode1":"7036a75e.c08048","computeNode2":"","computeNode3":"","computeNode4":"","computeNode5":"","computeNode6":"","computeNode7":"","computeNode8":"","computeNode9":"","computeNode10":"","x":450,"y":80,"wires":[["a33ed927.6f9888","8c3c0205.30fe7"]]},{"id":"438d1ff6.c6274","type":"ui_group","name":"face api","tab":"1a1a693e.9db8d7","order":2,"disp":true,"width":12,"collapse":false},{"id":"82a62f87.98d31","type":"ui_group","name":"Webcam","tab":"1a1a693e.9db8d7","order":1,"disp":true,"width":"6","collapse":false},{"id":"7036a75e.c08048","type":"face-api-compute","name":"face-api-compute","childHost":true,"recognitionType":"SSD","multipleFaces":"Multiple Faces","confidence":"50","inputSize":"416","landmarks":true,"expressions":true,"ageGender":true,"recognition":false,"labelName":"known","recognitionMetric":"Mean Squared Error","recognitionConfidence":"","file":""},{"id":"1a1a693e.9db8d7","type":"ui_tab","name":"ホーム","icon":"dashboard","disabled":false,"hidden":false}]

그러므로

우선 애저의페이스도 넣어보았지만 공개된 노드는 간단한 테두리 테스트에 불과했다.function 노드 등을 통해 상세한 요청 파라미터를 기술하고 http에 방문하면 다양한 정보를 얻을 수 있습니다.
이번에는 단지 이 기능으로 간단하게 Webcam에서 입력 처리할 수 있다.