I had a web Project that used Emscripten to build c++ Code and use "Module.ccall.." to call my c++ function, the main feature is to render by using OpenGL ES, now I want to add MediaPipe's Gesture recognition to my Project using JavaScript, but I have to called "GestureRecognizer.createFromOptions.." 2~3 times, the process will go ahead is the first problem, and the second is after process can go ahead, but when I call "Module.ccall..", it will show message "Uncaught TypeError: Cannot read properties of undefined (reading 'ccall')", some one can help? Thanks!, the code is bellow:
import { FilesetResolver, GestureRecognizer } from "https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]";
async function startGestureDetection() {
const videoElement = document.getElementById('webcam');
const canvasElement = document.getElementById('webcam_preview');
const canvasCtx = canvasElement.getContext('2d');
videoStream = await navigator.mediaDevices.getUserMedia({ video: true });
videoElement.srcObject = videoStream;
try {
console.log("[ges] FilesetResolver: ", FilesetResolver);
const vision = await FilesetResolver.forVisionTasks(
"https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/wasm"
);
console.log("[ges] vision: ", vision);
console.log("[ges] GestureRecognizer: ", GestureRecognizer);
gestureRecognizer = await GestureRecognizer.createFromOptions(vision, {
baseOptions: {
,
modelAssetPath: "./models/gesture_recognizer.task",
delegate: "GPU"
},
runningMode: "VIDEO"
});
} catch (error) {
console.error("Error initializing hand detection:", error);
}
console.log("[ges][startGestureDetection] gestureRecognizer: ", gestureRecognizer);
videoElement.addEventListener('loadeddata', async () => {
while (isGestureDetectionActive) {
const results = await gestureRecognizer.recognizeForVideo(videoElement, performance.now());
canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
canvasCtx.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
if (results.gestures.length > 0) {
const categoryName = results.gestures[0][0].categoryName;
const categoryScore = parseFloat(results.gestures[0][0].score * 100).toFixed(2);
canvasCtx.fillStyle = 'red';
canvasCtx.font = '20px Arial';
canvasCtx.fillText(`${categoryName} (${categoryScore})`, 10, 30);
}
await new Promise(requestAnimationFrame);
}
});
}
I want Module.ccall.. to work