Специфичные для плавания подключения к клавиатуре для визуализации скелета (соединительные линии) [Закрыто] ⇐ Python

[Anonymous]

Вы бы помогли мне решить проблему с помощью подключения к клавишам пловца, пожалуйста.
Я пытаюсь применить соединение суставов к видео с пловцом. Чтобы обнаружить технику и другие параметры.import React, { useRef, useEffect, useCallback } from 'react';
import { KeypointCoordinate } from '@shared/swimming-keypoints';

interface PoseOverlayProps {
videoElement: HTMLVideoElement | null;
keypoints: KeypointCoordinate[];
confidence: number;
isVisible: boolean;
onCanvasReady?: (canvas: HTMLCanvasElement) => void;
}

// Swimming-specific keypoint connections for skeleton visualization
const SWIMMING_CONNECTIONS = [
// Head connections
[0, 1], // nose to left_eye
[0, 2], // nose to right_eye
[1, 2], // left_eye to right_eye
[0, 4], // nose to neck

// Torso connections
[4, 5], // neck to left_shoulder
[4, 6], // neck to right_shoulder
[5, 6], // shoulder to shoulder
[5, 7], // left_shoulder to chest_center
[6, 7], // right_shoulder to chest_center
[7, 32], // chest_center to pelvis_center
[32, 8], // pelvis_center to left_hip
[32, 9], // pelvis_center to right_hip
[8, 9], // hip to hip

// Left arm connections
[5, 10], // left_shoulder to left_elbow
[10, 20], // left_elbow to left_forearm_mid
[20, 12], // left_forearm_mid to left_wrist
[12, 14], // left_wrist to left_hand_tip
[12, 16], // left_wrist to left_thumb
[12, 18], // left_wrist to left_pinky

// Right arm connections
[6, 11], // right_shoulder to right_elbow
[11, 21], // right_elbow to right_forearm_mid
[21, 13], // right_forearm_mid to right_wrist
[13, 15], // right_wrist to right_hand_tip
[13, 17], // right_wrist to right_thumb
[13, 19], // right_wrist to right_pinky

// Left leg connections
[8, 22], // left_hip to left_knee
[22, 30], // left_knee to left_shin_mid
[30, 24], // left_shin_mid to left_ankle
[24, 26], // left_ankle to left_toe
[24, 28], // left_ankle to left_heel

// Right leg connections
[9, 23], // right_hip to right_knee
[23, 31], // right_knee to right_shin_mid
[31, 25], // right_shin_mid to right_ankle
[25, 27], // right_ankle to right_toe
[25, 29], // right_ankle to right_heel
];

// Right arm keypoints (6, 11, 13, 15, 17, 19, 21)
if ([6, 11, 13, 15, 17, 19, 21].includes(index)) return KEYPOINT_COLORS.rightArm;

// Torso keypoints (7, 32)
if ([7, 32].includes(index)) return KEYPOINT_COLORS.torso;

// Left leg keypoints (8, 22, 24, 26, 28, 30)
if ([8, 22, 24, 26, 28, 30].includes(index)) return KEYPOINT_COLORS.leftLeg;

// Right leg keypoints (9, 23, 25, 27, 29, 31)
if ([9, 23, 25, 27, 29, 31].includes(index)) return KEYPOINT_COLORS.rightLeg;

// Default color
return '#FFFFFF';
};

export const PoseOverlay: React.FC = ({
videoElement,
keypoints,
confidence,
isVisible,
onCanvasReady
}) => {
const canvasRef = useRef(null);

// Draw keypoints and connections
const drawPose = useCallback(() => {
const canvas = canvasRef.current;
const video = videoElement;

if (!canvas || !video || !isVisible || !keypoints.length) return;

const ctx = canvas.getContext('2d');
if (!ctx) return;

// Set canvas dimensions to match video
const videoRect = video.getBoundingClientRect();
canvas.width = video.videoWidth || videoRect.width;
canvas.height = video.videoHeight || videoRect.height;

// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Only draw if confidence is high enough
if (confidence < 0.3) return;

// Draw connections first (behind keypoints)
ctx.lineWidth = 3;
ctx.lineCap = 'round';

SWIMMING_CONNECTIONS.forEach(([startIdx, endIdx]) => {
const startPoint = keypoints[startIdx];
const endPoint = keypoints[endIdx];

if (startPoint && endPoint &&
startPoint.confidence > 0.3 && endPoint.confidence > 0.3 &&
startPoint.visibility > 0 && endPoint.visibility > 0) {

const connectionColor = getConnectionColor(startIdx, endIdx);
const alpha = Math.min(startPoint.confidence, endPoint.confidence) * 0.8;

ctx.strokeStyle = connectionColor + Math.floor(alpha * 255).toString(16).padStart(2, '0');

ctx.beginPath();
ctx.moveTo(startPoint.x, startPoint.y);
ctx.lineTo(endPoint.x, endPoint.y);
ctx.stroke();
}
});

// Draw keypoints on top
keypoints.forEach((keypoint, index) => {
if (keypoint && keypoint.confidence > 0.3 && keypoint.visibility > 0) {
const color = getKeypointColor(index);
const alpha = keypoint.confidence;
const radius = 4;

// Draw keypoint circle with confidence-based opacity
ctx.fillStyle = color + Math.floor(alpha * 255).toString(16).padStart(2, '0');
ctx.beginPath();
ctx.arc(keypoint.x, keypoint.y, radius, 0, 2 * Math.PI);
ctx.fill();

// Draw white border for visibility
ctx.strokeStyle = '#FFFFFF' + Math.floor(alpha * 128).toString(16).padStart(2, '0');
ctx.lineWidth = 1;
ctx.stroke();
}
});

// Draw confidence indicator
if (confidence > 0.5) {
ctx.fillStyle = `rgba(0, 255, 0, ${confidence * 0.7})`;
ctx.font = '16px Arial';
ctx.fillText(`Confidence: ${(confidence * 100).toFixed(1)}%`, 10, 30);
}

}, [videoElement, keypoints, confidence, isVisible]);

// Update canvas when keypoints change
useEffect(() => {
drawPose();
}, [drawPose]);

// Handle canvas setup
useEffect(() => {
const canvas = canvasRef.current;
if (canvas && onCanvasReady) {
onCanvasReady(canvas);
}
}, [onCanvasReady]);

// Handle video resize
useEffect(() => {
const handleResize = () => {
drawPose();
};

window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, [drawPose]);

return (

);
};

export default PoseOverlay;



Подробнее здесь: https://stackoverflow.com/questions/796 ... oint-lines