1. 미디어파이프(Mediapipe)를 활용한 AI Web페이지 개발하기
미디어파이프는 사용하기 편하게 라이브러리 형태로 모듈화되어 제공되는데 지원가능한 환경이나 언어가 매우 다양해 Andoid, iOS, C++, Python, JavaScript, Coral 등이 지원된다. 이중에서 JavaScript언어 지원기능을 사용하면 미디어파이프 AI기능이 포함된 Web 페이지를 손쉽게 개발할 수 있다.
미디어파이프에서 JavaScript 방식으로 제공하는 모듈들은 다음과 같다.
이외에 다음과 같은 추가 모듈이 제공된다.
- @mediapipe/drawing_utils - Utilities to draw landmarks and connectors.
- @mediapipe/camera_utils - Utilities to operate the camera.
- @mediapipe/control_utils - Utilities to show sliders and FPS widgets.
2.설치
위의 모듈들은 NPM 패키지형태로 제공되는데 이를 자체 웹서버에 설치하려면 npm install명령으로 가능하다. 즉 손모양인식을 위한 hands모듈은 "npm install @mediapipe/hands."라는 명령어로 설치하면 된다. 그러나 웹서버가 인터넷환경에서 운영될 것이라면 굳이 자체 서버에 설치할 필요도 없이 구글에서 제공하는 사이트를 링크걸어 사용하면 된다.
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils@0.1/drawing_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/holistic@0.1/holistic.js" crossorigin="anonymous"></script>
</head>
3.샘플 웹페이지
-HTML 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<video class="input_video"></video>
<canvas class="output_canvas" width="1280px" height="720px"></canvas>
</div>
</body>
</html>5~8 line : 세가지 유티리티 모듈과 손동작 인식 AI 모델기능인 hands.js를 링크하는 것 만으로 필요한 미디어파이프 기능을 모두 사용할 수 있다
-CSS
body {
bottom: 0;
font-family: 'Titillium Web', sans-serif;
color: white;
left: 0;
margin: 0;
position: absolute;
right: 0;
top: 0;
transform-origin: 0px 0px;
overflow: hidden;
}
.container {
position: absolute;
background-color: #596e73;
width: 100%;
max-height: 100%;
}
.input_video {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
&.selfie {
transform: scale(-1, 1);
}
}
.output_canvas {
max-width: 100%;
display: block;
position: relative;
left: 0;
top: 0;
}
-JavaScript
<script type="module">
const videoElement = document.getElementsByClassName('input_video')[0];
const canvasElement = document.getElementsByClassName('output_canvas')[0];
const canvasCtx = canvasElement.getContext('2d');
function onResults(results) {
canvasCtx.save();
canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
canvasCtx.drawImage(
results.image, 0, 0, canvasElement.width, canvasElement.height);
if (results.multiHandLandmarks) {
for (const landmarks of results.multiHandLandmarks) {
drawConnectors(canvasCtx, landmarks, HAND_CONNECTIONS,
{color: '#00FF00', lineWidth: 5});
drawLandmarks(canvasCtx, landmarks, {color: '#FF0000', lineWidth: 2});
}
}
canvasCtx.restore();
}
const hands = new Hands({locateFile: (file) => {
return `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`;
}});
hands.setOptions({
maxNumHands: 2,
minDetectionConfidence: 0.5,
minTrackingConfidence: 0.5
});
hands.onResults(onResults);
const camera = new Camera(videoElement, {
onFrame: async () => {
await hands.send({image: videoElement});
},
width: 1280,
height: 720
});
camera.start();
</script>24~28 Line : 손동작 인식 AI모델을 실행할 때 option으로 인식할 최대 손모양 갯수, 최소 신뢰도 값을 지정한다.
6 ~ 19 Line : 손동작 인식 AI모델 실행결과에 따른 처리
12 ~ 16 Line : 인식된 손가락 Landmark 좌표를 이용하여 원하는 기능의 동작을 프로그램할 수 있다.
9~10 Line의 촬영이미지 Display 부분을 삭제하면 다음과 같이 인식된 손가락 모양만 표시된다.
4. 테스트 사이트
다음 링크에 접속하면 Codepen 기능을 이용하여 구글에서 제공하는 데모 프로그램을 동작시켜 볼 수 있고, 여기에서 내용을 수정해 가면서 작동되는 내용을 즉석에서 테스트 확인해 볼 수도 있다.
MediaPipe - Hands
...
codepen.io
'메이킹프로젝트 > AI 툴과 프로젝트' 카테고리의 다른 글
| 미디어파이프(MediaPipe)로 AI python프로그램 개발하기 (0) | 2021.08.19 |
|---|---|
| 구글 AI 프레임워크 미디어파이프(MediaPipe) 소개 (1) | 2021.08.02 |
| Teachable Machine 재미있는 개발 프로젝트들 (0) | 2021.03.12 |
| Teachable Machine 에서 제작된 AI학습모델로 웹서비스 만들기 (0) | 2021.03.10 |
| Teachable Machine으로 AI머신러닝 실습 (0) | 2021.03.01 |