JavaScript 얼굴 인식 기술 및 얼굴 인식 JavaScript 라이브러리 Tracking.js_javascript 기술

저는 인공지능 인식 기술에 늘 관심이 많았어요. 어떤 알고리즘인지, 어떤 분석 과정인지 상상이 안 가거든요. 음성인식이든, 얼굴인식이든, 다른 종류의 인식이든 사람의 외모와 말하는 방식이 너무 다르기 때문에 사진을 찍는 방식도 다르고 이런 인식 기술이 어떻게 작동하는지 이해할 수 없습니다. 이런 인식 기술을 활용한 '마스크'라는 게임도 있다. 얼굴 인식 기술도 연구해야 할 것 같다. Facebook은 이 기술을 사용하며 제스처 제어에도 사용할 수 있으므로 웹사이트에 이를 위한 공간이 있을 것입니다.

얼굴 인식에 사용할 수 있는 JavaScript 패키지 중 하나는 Jay Salvat와 Liu Liu가 개발한 얼굴 감지입니다. 제공된 이미지를 분석하고 발견된 모든 얼굴 이미지의 좌표를 반환하는 표준 jQuery 플러그인입니다. 어떻게 사용되는지 살펴보겠습니다!

jQuery.faceDetection

얼굴 인식 jQuery 플러그인을 사용하려면 4개의 js 파일을 가져와야 합니다:

<script src="jquery-1.4.3.min.js"></script>
<!-- mas js -->
<script src="facedetection/ccv.js"></script>
<script src="facedetection/face.js"></script>
<script src="jquery.facedetection.js"></script>

이 얼굴 인식 플러그인의 처음 두 파일은 이를 통해 사진의 얼굴 좌표 정보를 저장하는 배열 개체를 얻을 수 있습니다. 예를 들면 다음과 같습니다.

var coords = jQuery("#myImage").faceDetection();
/* 返回：
 {
 x: 525
 y: 435,
 width: 144,
 height: 144,
 positionX: 532.6353328125226,
 positionY: 443.240976080536,
 offsetX: 532.6353328125226,
 offsetY: 443.240976080536,
 confidence: 12.93120119,
 neighbour: undefined,
 }
*/

탐지 방법에 이벤트 콜백 기능을 추가할 수도 있습니다.

var coords = jQuery("#myImage").faceDetection({
 complete: function(image, coords) {
 // Do something
 },
 error: function() {
 console.warn("无法分析图片");
 }
});

인식된 얼굴 정보에 대해 어떠한 처리도 할 수 있습니다. 사진 속 얼굴 주위에 프레임을 그릴 수 있습니다.

jQuery("img").each(function() {
 var img = this;
 // 获取脸部坐标
 var coordinates = jQuery(img).faceDetection();
 // 在脸上画出框线
 if(coordinates.length) {
 coordinates.forEach(function(coord) {
 jQuery("<div&gt", {
 css: {
 position: "absolute",
 left: coord.positionX + 5 + "px",
 top: coord.positionY + 5 + "px",
 width: coord.width + "px",
 height: coord.height + "px",
 border: "3px solid white"
 }
 }).appendTo(img.parentNode);
 });
 }
});

이것은 매우 간단합니다. 물론 추출과 같은 복잡한 처리도 할 수 있습니다.

다양한 사진을 활용해 얼굴인식을 시도했는데, 예상대로 결과가 완벽하지 않았습니다. 하지만 그럼에도 불구하고 여전히 꽤 좋습니다. 이는 매우 간단한 스크립팅 기술이며 완벽한 기술은 없습니다. 본 얼굴 인식 플러그인에는 얼굴 비교 기능이 없습니다. 이 기능을 사용하려면 다른 방법을 사용하고 얼굴 특징 정보를 제공해야 합니다. 전체적으로 꽤 괜찮습니다. 꼭 시도해 보시기를 적극 권장합니다.

얼굴 인식 JavaScript 라이브러리 Tracking.js

웹 개발자를 위해 오픈 소스 JavaScript 라이브러리 Tracking.js는 컴퓨터 비전 및 증강 현실 기술을 더 쉽게 만들고 Kinect 또는 Wii와 유사한 효과로 모션 감지 애플리케이션을 표시하는 데 사용할 수 있으며 JavaScript 라이브러리는 크기가 작습니다. (~ 7k), 매우 가볍고 간단한 인터페이스를 제공합니다.

Tracking.js는 모바일 웹 애플리케이션, 데스크톱 애플리케이션에서 작동할 수 있으며 Node.js 기반 서버와도 페어링될 수 있습니다. 컴퓨터 그래픽 알고리즘과 기술을 브라우저에 적용하고 얼굴 인식(특정 색상 또는 사람/얼굴/몸이 움직일 때), 실시간 색상 추적 기능을 갖습니다. 웹 개발의 경우 예전에는 C나 C 기술을 통해서도 비슷한 효과를 얻을 수 있었습니다. 이제 Traking.js는 웹 구성 요소를 제공하므로 웹 프런트 엔드 개발자는 JavaScript를 몰라도 HTML 태그 구성 요소에 액세스하여 유사한 기능을 구현할 수 있으므로 웹 개발이 크게 단순화됩니다.

Tracking.js에는 웹 브라우저가 얼굴과 눈의 변화를 인식할 수 있도록 하는 색상 추적 알고리즘과 개체 추적 구성 요소가 포함되어 있습니다. 예를 들어, 웹 프런트 엔드는 이 기능을 사용하여 사용자 아바타를 설정할 수도 있습니다. 이는 동시에 일부 웹 사이트의 멋진 기능이기도 합니다. 추적된 얼굴 데이터를 배경 데이터베이스와 일치시켜 사용자에게 더 유용한 피드백을 제공할 수 있습니다. 사용자.

현재 GitHub의 Tracking.js 소스 코드 프로젝트는 200회 이상 포크되었습니다. 8월 초 JS 라이브러리가 버전 1.0으로 업그레이드되었습니다.

위 내용은 JavaScript 얼굴 인식 기술과 얼굴 인식 JavaScript 라이브러리 Tracking.js가 마음에 드셨으면 좋겠습니다.