Mantra MFS100生物识别设备在React应用中的集成教程

import React, { useState } from 'react';

const MantraFingerprintScanner = () => {
    // 使用useState管理捕获到的指纹图像数据
    const [fingerprintImage, setFingerprintImage] = useState('');
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState(null);

    /**
     * 处理Mantra MFS100指纹捕获逻辑
     * 通过向本地MFS100服务发送HTTP请求来捕获指纹
     */
    const handleCaptureFingerprint = async () => {
        setIsLoading(true);
        setError(null); // 清除之前的错误信息

        const myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json");

        // 构建发送给本地MFS100服务的请求体
        const MFS100Request = {
            "Quality": 100, // 指纹图像质量 (1-100, 建议最低55)
            "TimeOut": 10   // 捕获超时时间 (秒, 建议最低10, 最高60, 0为无限)
        };

        // 将请求数据JSON字符串化
        const rawBody = JSON.stringify({
            "data": JSON.stringify(MFS100Request)
        });

        const requestOptions = {
            method: 'POST',
            headers: myHeaders,
            body: rawBody,
            redirect: 'follow'
        };

        try {
            // 向本地MFS100服务发送捕获请求
            const response = await fetch('http://localhost:8004/mfs100/capture', requestOptions);
            if (!response.ok) {
                throw new Error(`HTTP error! Status: ${response.status}`);
            }
            const result = await response.json();

            // 检查MFS100服务返回的数据结构
            if (result && result.BitmapData) {
                // 将Base64编码的指纹图像数据更新到状态中
                setFingerprintImage('data:image/png;base64,' + result.BitmapData);
            } else {
                // 如果服务返回的数据格式不符合预期
                throw new Error('MFS100 service did not return valid BitmapData.');
            }
        } catch (err) {
            console.error('Error capturing fingerprint:', err);
            setError(`捕获指纹失败: ${err.message}. 请确保Mantra MFS100服务已运行。`);
            setFingerprintImage(''); // 清空图像，以防显示旧数据
        } finally {
            setIsLoading(false);
        }
    };

    return (
        <div style={{ padding: '20px', textAlign: 'center' }}>
            <h2>Mantra MFS100 指纹捕获</h2>
            {error && <p style={{ color: 'red' }}>{error}</p>}
            {isLoading && <p>正在扫描指纹，请稍候...</p>}
            <div style={{ margin: '20px 0' }}>
                {fingerprintImage ? (
                    <img
                        src={fingerprintImage}
                        alt="Captured Fingerprint"
                        style={{ maxWidth: '200px', border: '1px solid #ccc' }}
                    />
                ) : (
                    <div style={{
                        width: '200px', height: '200px', border: '1px dashed #ccc',
                        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                        color: '#999'
                    }}>
                        等待指纹图像...
                    </div>
                )}
            </div>
            <button
                onClick={handleCaptureFingerprint}
                disabled={isLoading}
                style={{
                    padding: '10px 20px',
                    fontSize: '16px',
                    cursor: isLoading ? 'not-allowed' : 'pointer',
                    backgroundColor: '#007bff',
                    color: 'white',
                    border: 'none',
                    borderRadius: '5px'
                }}
            >
                {isLoading ? '捕获中...' : '捕获指纹'}
            </button>
        </div>
    );
};

export default MantraFingerprintScanner;