MediaPipe 入門 (3) - Hands
以下の記事を参考にして書いてます。
前回
1. MediaPipe Hands
「MediaPipe Hands」は、動画から手の姿勢を推論するライブラリです。手の21個のランドマーク位置を予測できます。
3. モデル
◎ Palm Detection Model
「Palm Detection Model」は、手の領域を検出するモデルです。
◎ Hand Landmark Model
「Hand Landmark Model」は、手の領域内の21個のランドマークを検出するモデルです。
4. ソリューションAPI
◎ オプション
・STATIC_IMAGE_MODE : 静止画かどうか。(true:静止画,false:動画, デフォルト:false)
・MAX_NUM_HANDS : 検出する手の最大数。(デフォルト:2)
・MIN_DETECTION_CONFIDENCE : ランドマーク検出成功したとみなす最小信頼値。([0.0、1.0], デフォルト:0.5)
・MIN_TRACKING_CONFIDENCE : ランドマーク追跡成功とみなす最小信頼値。([0.0、1.0], デフォルト:0.5)
◎ 出力
・MULTI_HAND_LANDMARKS
ランドマークのリスト。
各ランドマークは、以下で構成されている。
- x : ランドマークのX座標([0.0、1.0])
- y : ランドマークのY座標([0.0、1.0])
- z : ランドマークの震度。手首を原点として、値が小さいほどカメラに近くなる。([0.0、1.0])
・MULTI_HANDEDNESS
右手か左手かのリスト。
各要素は、以下で構成されている。
- label : 右手か左手か。(Left, Right)
- score : 利き手の推定確率。
5. Python ソリューションAPI
◎ サポートオプション
・static_image_mode
・max_num_hands
・min_detection_confidence
・min_tracking_confidence
◎ コード
import cv2
import mediapipe as mp
mp_drawing = mp.solutions.drawing_utils
mp_hands = mp.solutions.hands
# 静止画像の場合:
with mp_hands.Hands(
static_image_mode=True,
max_num_hands=2,
min_detection_confidence=0.5) as hands:
for idx, file in enumerate(file_list):
# 画像を読み取り、利き手が正しく出力されるようにy軸を中心に反転
image = cv2.flip(cv2.imread(file), 1)
# 処理する前にBGR画像をRGBに変換
results = hands.process(cv2.cvtColor(image, cv2.COLOR_BGR2RGB))
# 利き手を出力し、画像に手のランドマークを描画
print('Handedness:', results.multi_handedness)
if not results.multi_hand_landmarks:
continue
image_height, image_width, _ = image.shape
annotated_image = image.copy()
for hand_landmarks in results.multi_hand_landmarks:
print('hand_landmarks:', hand_landmarks)
print(
f'Index finger tip coordinates: (',
f'{hand_landmarks.landmark[mp_hands.HandLandmark.INDEX_FINGER_TIP].x * image_width}, '
f'{hand_landmarks.landmark[mp_hands.HandLandmark.INDEX_FINGER_TIP].y * image_height})'
)
mp_drawing.draw_landmarks(
annotated_image, hand_landmarks, mp_hands.HAND_CONNECTIONS)
cv2.imwrite(
'/tmp/annotated_image' + str(idx) + '.png', cv2.flip(annotated_image, 1))
# Webカメラ入力の場合:
cap = cv2.VideoCapture(0)
with mp_hands.Hands(
min_detection_confidence=0.5,
min_tracking_confidence=0.5) as hands:
while cap.isOpened():
success, image = cap.read()
if not success:
print("Ignoring empty camera frame.")
# ビデオをロードする場合は、「continue」ではなく「break」を使用してください
continue
# 後で自分撮りビューを表示するために画像を水平方向に反転し、BGR画像をRGBに変換
image = cv2.cvtColor(cv2.flip(image, 1), cv2.COLOR_BGR2RGB)
# パフォーマンスを向上させるために、オプションで、参照渡しのためにイメージを書き込み不可としてマーク
image.flags.writeable = False
results = hands.process(image)
# 画像に手のアノテーションを描画
image.flags.writeable = True
image = cv2.cvtColor(image, cv2.COLOR_RGB2BGR)
if results.multi_hand_landmarks:
for hand_landmarks in results.multi_hand_landmarks:
mp_drawing.draw_landmarks(
image, hand_landmarks, mp_hands.HAND_CONNECTIONS)
cv2.imshow('MediaPipe Hands', image)
if cv2.waitKey(5) & 0xFF == 27:
break
cap.release()
6. JavaScript ソリューションAPI
◎ サポートオプション
・maxNumHands
・minDetectionConfidence
・minTrackingConfidence
◎ コード
<!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>
<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>
次回
この記事が気に入ったらサポートをしてみませんか?