一、系统架构设计

摄像头采集 → 特征提取 → 模型预测 → 手势响应 → 视觉反馈

二、核心功能实现

1. 摄像头实时处理

class CameraProcessor {
    constructor(videoElement) {
        this.video = videoElement;
        this.stream = null;
    }

    async start() {
        try {
            this.stream = await navigator.mediaDevices.getUserMedia({
                video: {
                    width: 640,
                    height: 480,
                    facingMode: 'user'
                }
            });
            this.video.srcObject = this.stream;
            await this.video.play();
        } catch (err) {
            console.error('摄像头启动失败:', err);
        }
    }

    captureFrame() {
        const canvas = document.createElement('canvas');
        canvas.width = this.video.videoWidth;
        canvas.height = this.video.videoHeight;
        canvas.getContext('2d').drawImage(
            this.video, 0, 0, canvas.width, canvas.height
        );
        return canvas;
    }
}

2. TensorFlow.js模型加载

class GestureModel {
    constructor() {
        this.model = null;
        this.labels = ['✊', '✋', '✌️', '👍', '👎'];
    }

    async load() {
        this.model = await tf.loadLayersModel('models/gesture-model.json');
        // 预热模型
        const warmupInput = tf.zeros([1, 224, 224, 3]);
        this.model.predict(warmupInput).dispose();
    }

    async predict(imageElement) {
        const tensor = tf.browser.fromPixels(imageElement)
            .resizeNearestNeighbor([224, 224])
            .toFloat()
            .expandDims();
        
        const prediction = this.model.predict(tensor);
        const scores = await prediction.data();
        prediction.dispose();
        
        return this.labels[scores.indexOf(Math.max(...scores))];
    }
}

3. 手势响应系统

class GestureController {
    constructor() {
        this.gestureMap = new Map([
            ['✊', this.handleFist],
            ['✋', this.handlePalm],
            ['✌️', this.handleVictory],
            ['👍', this.handleThumbUp],
            ['👎', this.handleThumbDown]
        ]);
    }

    onGesture(gesture) {
        const handler = this.gestureMap.get(gesture);
        if (handler) handler.call(this);
    }

    handleFist() {
        document.body.style.backgroundColor = '#ffebee';
        console.log('检测到拳头手势');
    }

    handlePalm() {
        document.body.style.backgroundColor = '#e8f5e9';
        console.log('检测到手掌手势');
    }
}

三、高级功能实现

1. 手势轨迹追踪

class GestureTracker {
    constructor() {
        this.positions = [];
        this.maxPositions = 20;
    }

    addPosition(x, y) {
        this.positions.push({x, y});
        if (this.positions.length > this.maxPositions) {
            this.positions.shift();
        }
    }

    getCurrentDirection() {
        if (this.positions.length  Math.abs(dy)) {
            return dx > 0 ? '→' : '←';
        } else {
            return dy > 0 ? '↓' : '↑';
        }
    }
}

2. 性能优化方案

• Web Worker：模型预测移入后台线程
• 帧率控制：动态调整检测频率
• 模型量化：8位整型模型减小体积
• 内存管理：及时释放Tensor内存

四、实战案例演示

1. 主应用集成

const video = document.getElementById('camera');
const resultDiv = document.getElementById('result');

const camera = new CameraProcessor(video);
const model = new GestureModel();
const controller = new GestureController();

(async function main() {
    await Promise.all([
        camera.start(),
        model.load()
    ]);
    
    setInterval(async () => {
        const frame = camera.captureFrame();
        const gesture = await model.predict(frame);
        resultDiv.textContent = `识别结果: ${gesture}`;
        controller.onGesture(gesture);
    }, 300);
})();

2. 性能测试数据

测试设备：MacBook Pro M1
模型加载时间：1.2s
预测耗时：45ms
内存占用：85MB
准确率：92.5%