Uncaught TypeError: Cannot read properties of undefined (reading 'ccall')

[akau16]

I had a web Project that use Emscripten to build c++ Code and use "Module.ccall.." to call my c++ function, 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);
        }
    });
}

[kuaashish]

Hi @akau16,

We have a newer version available (0.10.20). Could you please try it and let us know if you encounter the same issue with newer version as well?

Thank you!!

[akau16]

Hi @kuaashish ,
I encountered the same issue with 0.10.20 version, somebody tell me It may be caused by the the same main function name in our both wasm file. Is this true?

Thank you!

[kuaashish]

Hi @akau16,

Based on our team's input, it seems, intentionally running two WASM modules and encountering issues as a result.

We do not believe this is related to main code. Rather, it appears that the Module variable is being overwritten when MediaPipe loads. Here are two potential solutions:

Make the WASM module modular: Use the flags -s MODULARIZE=1 and -s EXPORT_NAME='SomeUniqueName' to prevent conflicts between multiple WASM modules.

Save the WASM to a separate variable: Instead of using the global Module variable (which can be overwritten), save the WASM to a different variable. For example, before running MediaPipe, they can load the WASM with const myWasm = Module; and then use myWasm throughout the rest of the code instead of Module.

Thank you!!

[github-actions]

This issue has been marked stale because it has no recent activity since 7 days. It will be closed if no further activity occurs. Thank you.

[github-actions]

This issue was closed due to lack of activity after being marked stale for past 7 days.

[google-ml-butler]

Are you satisfied with the resolution of your issue?
Yes
No