Итак, я работаю над своим почти завершенным проектом, когда мой менеджер подходит ко мне и говорит: «У нас есть этот потрясающий новый проект, и я хочу, чтобы вы взяли на себя инициативу». Я сказал: «Здорово, когда я начну», и у нас состоялся разговор.
Подводя итог, я должен создать приложение в 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.
Это рабочая версия кода, я не вижу необходимости что-то объяснять, поэтому, если возникнут вопросы, пишите в комментариях.