Back

Technologies:

javascriptjavascript
htmlhtml
reactjsreactjs
jqueryjquery
avatar
Tolerim
a day ago

What is the solution to resolving the 'CaptureFinger' is not defined error that arises when collecting biometric input through JavaScript using Mantra MFS100?

As a React.js developer, I am working on a web application that utilizes the Mantra MFS100 biometric scanner to input biometrics. To accomplish this, I have imported the necessary JavaScript files, including <script src="jquery-1.8.2.js" type="text/javascript"></script> and <script src="mfs100.js"></script>, and included them in the head tag per the provided documentation. However, when I run the application, I encounter the following error displayed in the browser:
ERROR [eslint] src\App.js Line 20:19: 'CaptureFinger' is not defined no-undef ..

I have tried ignoring the error, and the application seems to work correctly; nonetheless, the issue is still unresolved. To capture the biometric data, I have written the following code: 
import React, { useEffect } from 'react';
import $ from 'jquery';

const App = () => {
    
    useEffect(() => {
        const script = document.createElement('script');
        script.src = './mfs100.js';
        script.async = true;

        document.body.appendChild(script);

    }, []);

    function capture(fingerImgToDisplay) {
        console.log("hello")
        var quality = 100; //(1 to 100) (recommended minimum 55)
        var timeout = 10; // seconds (minimum=10(recommended), maximum=60, unlimited=0)
        let res = CaptureFinger(quality, timeout);
        console.log(fingerImgToDisplay);
        console.log(res.data.BitmapData);
        $(fingerImgToDisplay).show();
        $('#progress').hide();
        $(fingerImgToDisplay).attr(
            'src',
            'data:image/png;base64,' + res.data.BitmapData
        );

    }

    return (
        <>

            <div className="container">
                <div className="fingerbox">
                    <img
                        id="fingerImg1"
                        className="capturedImg"
                        src="scanning.gif"
                        alt="Scanning"
                    />
                    <br />
                    <button
                        className="btnReadThumbs"
                        id="finger1"
                        onClick={() => capture('#fingerImg1')}
                    >
                        Capture Finger1
                    </button>
                </div>


            </div>
        </>
    );
};

export default App;
My goal is to resolve the error and ensure that it does not appear when running the application. Can you please help me with this issue?
Answers(1)
avatar
Tolerim
a day ago
Verified Answer
The error you are seeing is because the function CaptureFinger() is not defined in your JavaScript code. Based on the code you provided, it seems that CaptureFinger() is defined in the mfs100.js file that you imported. However, the error message suggests that ESLint is not able to detect this function, which is likely because it is not defined as a global function. One way to resolve this issue is to define CaptureFinger() as a global function by attaching it to the window object. You can add the following line to your useEffect() function to make CaptureFinger() a global function: 
window.CaptureFinger = CaptureFinger;
This will make the CaptureFinger() function available globally and should resolve the ESLint error you are seeing. Note that you should only use this approach if you are confident that CaptureFinger() does not introduce any security vulnerabilities in your code. Additionally, make sure that you have correctly included the jquery-1.8.2.js and mfs100.js files in your project directory and that you are importing them correctly in your code.
;