컴굥일지
[모션인식] PoseNet을 사용하여 실시간으로 자세 인식하기 본문
반응형
1. 모션 인식 - PoseNet
PoseNet은 MobileNet 기반의 pose estimation 네트워크입니다.
PoseNet의 장점은 아래와 같습니다.
1. TensorFlow.js에서 실행이 가능하기 때문에, js 기반으로 코딩이 가능합니다.
2. 웹캠/핸드폰 카메라로 실행할 수 있습니다.
3. 브라우저 상에서 실행이 되고, 데이터가 남지 않습니다.
OpenPose와 Django로 배포가 실패했기 때문에, 저희 팀은 js 기반으로 코딩이 가능하다는 점이 매우 중요했습니다.
백엔드로 배포하여 프론트와 연결하는 것보다, 프론트에 붙여서 같이 배포하는 것이 훨씬 쉬웠습니다.
PoseNet은 SinglePose와 MultiplePose를 검출 할 수 있습니다.
SinglePose는 한 사람만 추정하며 훨씬 정확도가 높습니다. (훨씬 사용하기가 쉽습니다.)
MultiplePose는 여러 사람을 추정하는 버전입니다.
저희 팀에서는 SinglePose를 검출하는 기술을 사용했습니다.
2. PoseNet 사용하기
먼저, 제가 PoseNet 사용법을 익힌 유튜브 동영상을 첨부하겠습니다.
아래는 PoseNet을 쓰기 위한 기본 코드를 적도록 하겠습니다.
React를 사용하는 코드도 많지만, 이 글에서는 그냥 js를 사용하여 쓴 코드를 작성하겠습니다.
<!-- posenet.html -->
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.11.0/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet@2.2.2/dist/posenet.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core@3.11.0/dist/tf-core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter@3.11.0/dist/tf-converter.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl@3.11.0/dist/tf-backend-webgl.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/pose-detection@0.0.6/dist/pose-detection.min.js"></script>
<style>
/* 이미지에 캔버스를 겹쳐서 그리기 위함 */
canvas {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
video {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
</style>
</head>
<body>
<video id="video" width="640" height="480" autoplay muted playsinline></video>
<canvas id="canvas"></canvas>
</body>
<script src="posenet.js"></script>
</html>// posenet.js
const video = document.getElementById("video");
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
//webcam을 enable하는 코드
navigator.mediaDevices.getUserMedia({video: true, audio: false}).then(function (stream) {
video.srcObject = stream;
});
//then 안쪽이 function(model){} 이렇게 쓰는거랑 같다 (인자가 하나라 중괄호가 없는 것)
posenet.load().then((model) => {
// 이곳의 model과 아래 predict의 model은 같아야 한다.
video.onloadeddata = (e) => {
//비디오가 load된 다음에 predict하도록. (안하면 콘솔에 에러뜸)
predict();
};
function predict() {
//frame이 들어올 때마다 estimate를 해야하니 함수화 시킴
model.estimateSinglePose(video).then((pose) => {
canvas.width = video.width; //캔버스와 비디오의 크기를 일치시킴
canvas.height = video.height;
drawKeypoints(pose.keypoints, 0.6, context); //정확도
drawSkeleton(pose.keypoints, 0.6, context);
});
requestAnimationFrame(predict); //frame이 들어올 때마다 재귀호출
}
});
/* PoseNet을 쓰면서 사용하는 함수들 코드 - 그냥 복사해서 쓰기*/
//tensorflow에서 제공하는 js 파트
const color = "aqua";
const boundingBoxColor = "red";
const lineWidth = 2;
function toTuple({y, x}) {
return [y, x];
}
function drawPoint(ctx, y, x, r, color) {
ctx.beginPath();
ctx.arc(x, y, r, 0, 2 * Math.PI);
ctx.fillStyle = color;
ctx.fill();
}
function drawSegment([ay, ax], [by, bx], color, scale, ctx) {
ctx.beginPath();
ctx.moveTo(ax * scale, ay * scale);
ctx.lineTo(bx * scale, by * scale);
ctx.lineWidth = lineWidth;
ctx.strokeStyle = color;
ctx.stroke();
}
function drawSkeleton(keypoints, minConfidence, ctx, scale = 1) {
const adjacentKeyPoints = posenet.getAdjacentKeyPoints(keypoints, minConfidence);
adjacentKeyPoints.forEach((keypoints) => {
drawSegment(toTuple(keypoints[0].position), toTuple(keypoints[1].position), color, scale, ctx);
});
}
function drawKeypoints(keypoints, minConfidence, ctx, scale = 1) {
for (let i = 0; i < keypoints.length; i++) {
const keypoint = keypoints[i];
if (keypoint.score < minConfidence) {
continue;
}
const {y, x} = keypoint.position;
drawPoint(ctx, y * scale, x * scale, 3, color);
}
}
function drawBoundingBox(keypoints, ctx) {
const boundingBox = posenet.getBoundingBox(keypoints);
ctx.rect(
boundingBox.minX,
boundingBox.minY,
boundingBox.maxX - boundingBox.minX,
boundingBox.maxY - boundingBox.minY
);
ctx.strokeStyle = boundingBoxColor;
ctx.stroke();
}위 코드를 복사하여 실행하면 쉽게 웹캠을 열고 자세를 추정할 수 있습니다.
3. PoseNet을 프로젝트에 적용하기
이제는 위의 코드를 사용하여 저희 프로젝트에 적용하도록 하겠습니다.
아래는 OX 자세를 검출하는 코드입니다.
<!-- OX.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.11.0/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet@2.2.2/dist/posenet.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core@3.11.0/dist/tf-core.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter@3.11.0/dist/tf-converter.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl@3.11.0/dist/tf-backend-webgl.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/pose-detection@0.0.6/dist/pose-detection.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>OX-Pose</h1>
<h1 id="result_label"></h1>
<div>
<video id="video" width="640" height="480" autoplay muted playsinline></video>
<canvas id="canvas"></canvas>
</div>
<script src="OX.js"></script>
</body>
</html>// OX.js
const video = document.getElementById("video");
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const result_label = document.getElementById("result_label");
let pose_status = 2;
let keep_time = [0, 0, 0];
let result_message = "";
//webcam을 enable하는 코드
navigator.mediaDevices.getUserMedia({video: true, audio: false}).then(function (stream) {
video.srcObject = stream;
});
//then 안쪽이 function(model){} 이렇게 쓰는거랑 같다 (인자가 하나라 중괄호가 없는 것)
posenet.load().then((model) => {
// 이곳의 model과 아래 predict의 model은 같아야 한다.
video.onloadeddata = (e) => {
//비디오가 load된 다음에 predict하도록. (안하면 콘솔에 에러뜸)
predict();
};
function predict() {
//frame이 들어올 때마다 estimate를 해야하니 함수화 시킴
model.estimateSinglePose(video).then((pose) => {
canvas.width = video.width; //캔버스와 비디오의 크기를 일치시킴
canvas.height = video.height;
drawKeypoints(pose.keypoints, 0.6, context);
drawSkeleton(pose.keypoints, 0.6, context);
check_OX(pose);
});
requestAnimationFrame(predict); //frame이 들어올 때마다 재귀호출
}
});
/* Timer */
let count_time = setInterval(function () {
if (keep_time[pose_status] == 0) {
//다른 모션에서 바뀌어 들어옴
keep_time[0] = keep_time[1] = keep_time[2] = 0;
keep_time[pose_status]++;
} else {
if (pose_status == 0)
window.parent.postMessage({message: `O를 ${keep_time[pose_status]}초 유지하셨습니다.`}, "*");
else if (pose_status == 1)
window.parent.postMessage({message: `X를 ${keep_time[pose_status]}초 유지하셨습니다.`}, "*");
else if (pose_status == 2) window.parent.postMessage({message: `포즈를 취해주세요.`}, "*");
if (pose_status != 2 && keep_time[pose_status] == 5) {
if (pose_status == 0) {
result_message = "O";
} else {
result_message = "X";
}
clearInterval(count_time);
window.parent.postMessage({message: result_message}, "*");
}
keep_time[pose_status]++; //시간은 항상 세고 있다.
}
}, 1000);
/* 자세 검출 함수들 */
function check_OX(pose) {
if (!check_O(pose) && !check_X(pose)) {
pose_status = 2;
} else if (check_O(pose)) {
pose_status = 0;
} else if (check_X(pose)) {
pose_status = 1;
}
}
function check_HandsUp(pose) {
head = pose.keypoints[0].position; //머리(코)
rw = pose.keypoints[10].position; //오른쪽 손목
re = pose.keypoints[8].position; //오른쪽 팔꿈치
rs = pose.keypoints[6].position; //오른쪽 어깨
lw = pose.keypoints[9].position; //왼쪽 손목
le = pose.keypoints[7].position; //왼쪽 팔꿈치
ls = pose.keypoints[5].position; //왼쪽 어깨
//팔꿈치가 어깨보다 높을 것, 양 팔꿈치 사이에 머리가 위치할 것
if (re.y < rs.y && le.y < ls.y && re.x < head.x && head.x < le.x) {
//양쪽 손목 중, 어느 하나라도 머리보다는 위에 위치할 것
if (rw.y < head.y || lw.y < head.y) {
return true;
} else {
return false;
}
} else {
return false;
}
}
function check_O(pose) {
rw = pose.keypoints[10].position; //오른쪽 손목
re = pose.keypoints[8].position; //오른쪽 팔꿈치
lw = pose.keypoints[9].position; //왼쪽 손목
le = pose.keypoints[7].position; //왼쪽 팔꿈치
if (check_HandsUp(pose) && ((re.x < rw.x && rw.y < re.y) || (le.x > lw.x && le.y > lw.y))) {
return true;
} else {
return false;
}
}
function check_X(pose) {
head = pose.keypoints[0].position; //머리(코)
rw = pose.keypoints[10].position; //오른쪽 손목
re = pose.keypoints[8].position; //오른쪽 팔꿈치
rs = pose.keypoints[6].position; //오른쪽 어깨
lw = pose.keypoints[9].position; //왼쪽 손목
le = pose.keypoints[7].position; //왼쪽 팔꿈치
ls = pose.keypoints[5].position; //왼쪽 어깨
b = pose.keypoints[12].position; //body(오른쪽 골반)
//골반보다 팔꿈치가 위쪽에 위치, 팔꿈치보다 손목이 위쪽에 위치, 손목보다 머리가 위쪽에 위치
if (b.y > le.y && b.y > re.y && le.y > lw.y && re.y > rw.y && lw.y > head.y && rw.y > head.y) {
//어깨 안쪽으로 손목이 위치
if (rs.x < rw.x || lw.x < ls.x) {
r_gradient = -1;
l_gradient = 1;
if (rw.x - re.x != 0) {
r_gradient = (rw.y - re.y) / (rw.x - re.x);
}
if (lw.x - le.x != 0) {
l_gradient = (lw.y - le.y) / (lw.x - le.x);
}
if (r_gradient < 0 || l_gradient > 0) {
return true;
} else {
return false;
}
} else {
return false;
}
} else {
return false;
}
}
/* PoseNet을 쓰면서 사용하는 함수들 코드 - 그냥 복사해서 쓰기 */
//tensorflow에서 제공하는 js 파트
const color = "aqua";
const boundingBoxColor = "red";
const lineWidth = 2;
function toTuple({y, x}) {
return [y, x];
}
function drawPoint(ctx, y, x, r, color) {
ctx.beginPath();
ctx.arc(x, y, r, 0, 2 * Math.PI);
ctx.fillStyle = color;
ctx.fill();
}
function drawSegment([ay, ax], [by, bx], color, scale, ctx) {
ctx.beginPath();
ctx.moveTo(ax * scale, ay * scale);
ctx.lineTo(bx * scale, by * scale);
ctx.lineWidth = lineWidth;
ctx.strokeStyle = color;
ctx.stroke();
}
function drawSkeleton(keypoints, minConfidence, ctx, scale = 1) {
const adjacentKeyPoints = posenet.getAdjacentKeyPoints(keypoints, minConfidence);
adjacentKeyPoints.forEach((keypoints) => {
drawSegment(toTuple(keypoints[0].position), toTuple(keypoints[1].position), color, scale, ctx);
});
}
function drawKeypoints(keypoints, minConfidence, ctx, scale = 1) {
for (let i = 0; i < keypoints.length; i++) {
const keypoint = keypoints[i];
if (keypoint.score < minConfidence) {
continue;
}
const {y, x} = keypoint.position;
drawPoint(ctx, y * scale, x * scale, 3, color);
}
}
function drawBoundingBox(keypoints, ctx) {
const boundingBox = posenet.getBoundingBox(keypoints);
ctx.rect(
boundingBox.minX,
boundingBox.minY,
boundingBox.maxX - boundingBox.minX,
boundingBox.maxY - boundingBox.minY
);
ctx.strokeStyle = boundingBoxColor;
ctx.stroke();
}
4. PoseNet 사용 결과
python으로 OpenPose를 사용할 때보다, js로 PoseNet을 사용할 때가 훨씬 코드가 간단하고 사용하기가 쉬웠습니다.
배포 측면에서도 PoseNet이 훨씬 쉬웠습니다.
OpenPose를 사용하며 발생했던 문제 또한, 프론트에서 카메라를 키기 때문에 해결이 되었습니다.
PoseNet을 사용했을 때, 자세 검출이 생각보다 잘 되고, 많은 예시도 있어서 사용하기 쉬운 것 같습니다.
반응형
'프로젝트 > 졸프 - 참여형 동화 서비스' 카테고리의 다른 글
| [모션인식] Django에서 OpenPose로 실시간 자세 검출하기 (2) | 2022.05.10 |
|---|---|
| [모션 인식] Python과 OpenPose(OpenCV)를 사용하여 실시간 자세 추정하기 (11) | 2022.05.07 |
| [모션 인식] Teachable Machine으로 자세 추정하기 (0) | 2022.05.06 |
| 참여형 동화 서비스 - 주제 변경 (0) | 2022.05.05 |
| 참여형 동화 서비스 - NLP(KoGPT2) (9) | 2021.11.25 |
'프로젝트/졸프 - 참여형 동화 서비스' Related Articles
more
Comments