Итак, я работаю над своим почти завершенным проектом, когда мой менеджер подходит ко мне и говорит: «У нас есть этот потрясающий новый проект, и я хочу, чтобы вы взяли на себя инициативу». Я сказал: «Здорово, когда я начну», и у нас состоялся разговор.
Подводя итог, я должен создать приложение в reactjs и использовать что-то, называемое mediapipe, чтобы обнаруживать и связывать позы пользователя с заранее определенными позами, которые мы выбираем.
Я начал некоторые исследования и сказал ему, что готов начать, как только мы получим зеленый свет.
В любом случае, я перейду сразу к проблеме. Существует не так много ресурсов о том, как это сделать, особенно с реакцией, и я заблудился, пытаясь работать с примером javascript, который они предоставляют.
Я преобразовал нужные мне фрагменты из кода javascript и запустил свой проект. Хотя, это не сработало. Хотя в моем синтаксисе не было ничего плохого. Я продолжал получать «Uncaught (in promise) RuntimeError: abort(undefined) at Error» каждый раз, когда запускал приложение.
Я расстроился и решил попробовать другие решения. Я выполнил те же шаги для сетки лица, и это сработало. Пытался сопоставить мой код, и он не совпал, потому что он был таким же, за исключением того, что я использовал пакет сетки лица вместо пакета позы. Я не мог этого понять, поэтому начал гуглить, потому что ошибка, которую я продолжал получать, была связана с файлом «pose_solution_simd_wasm_bin.js», которого, конечно же, не было в моем коде.
В конце концов я понял, что есть то, что я бы назвал проблемами совместимости с зависимостями, которые я пытался использовать.
В любом случае, вот код и шаги, чтобы заставить его работать.
Установите зависимости из npm.
@mediapipe/camera_utils: 3.1640029074,
@mediapipe/control_utils: 3.1622680678,
@mediapipe/drawing_utils: 3.1620248257,
@mediapipe/поза: 3.1621277220,
реакция-веб-камера: 6.0.0,
Вышеупомянутые версии - это те, которые работали для меня. Поза версии 5, но она не работала, поэтому пришлось попробовать старые.
import * as cam from "@mediapipe/camera_utils";
import * as mediapipePose from "@mediapipe/pose";
import React, { useEffect, useRef } from 'react';
import { drawConnectors, drawLandmarks } from '@mediapipe/drawing_utils'
import { Pose } from "@mediapipe/pose";
import Webcam from 'react-webcam'
const UserPose = () => {
// refs to the html elements
const webcamRef = useRef(null);
const canvasRef = useRef(null);
const landmarkRef = useRef(null);
// landmarkRef = new LandmarkGrid(landmarkContainer);
let camera = null; // variable to initialize the camera
// function to draw the landmarks once the pose has been determnined
function onResults(results) {
// Define the canvas elements
canvasRef.current.width = webcamRef.current.video.videoWidth
canvasRef.current.height = webcamRef.current.video.videoHeight
const canvasElement = canvasRef.current;
const canvasCtx = canvasElement.getContext("2d")
canvasCtx.save();
canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
canvasCtx.drawImage(results.image,
0,
0,
canvasElement.width,
canvasElement.height
)
drawConnectors(canvasCtx,
results.poseLandmarks, mediapipePose.POSE_CONNECTIONS,
{ color: '#3240CF', lineWidth: 2 });
// The dots are the landmarks
drawLandmarks(canvasCtx, results.poseLandmarks,
{ color: 'red', lineWidth: 2, radius: 3 });
canvasCtx.restore();
}
useEffect(() => {
const userPose = new Pose({
locateFile: (file) => {
return `https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/${file}`;
},
});
userPose.setOptions({
maxNumFaces: 1,
minDetectionConfidence: 0.5,
minTrackingConfidence: 0.5,
});
userPose.onResults(onResults);
if (
typeof webcamRef.current !== "undefined" &&
webcamRef.current !== null
) {
camera = new cam.Camera(webcamRef.current.video, {
onFrame: async () => {
await userPose.send({ image: webcamRef.current.video });
},
width: 1280,
height: 720,
});
camera.start();
}
}, []);
return <div>
<div className="App">
<Webcam
ref={webcamRef}
style={{
position: "absolute",
marginLeft: "auto",
marginRight: "auto",
left: 0,
right: 0,
textAlign: "center",
zindex: 9,
width: 1280,
height: 720,
}}
/>{" "}
<canvas
ref={canvasRef}
style={{
position: "absolute",
marginLeft: "auto",
marginRight: "auto",
left: 0,
right: 0,
textAlign: "center",
zindex: 9,
width: 1280,
height: 720,
}}
></canvas>
<div className="landmark-grid-container"></div>
</div>
</div>
};
export default UserPose;
Внешний css, похоже, не работал, поэтому мне пришлось придерживаться старого доброго встроенного css.
Это рабочая версия кода, я не вижу необходимости что-то объяснять, поэтому, если возникнут вопросы, пишите в комментариях.
