手部追踪

<template>

    <h1>这是检测界面</h1>

    <div class="container">

        <video ref="videoElement"></video>

        <canvas class="output_canvas" ref="canvasElement" width="1280" height="720"></canvas>

    </div>

</template>

<script setup lang="ts" >

// 上面的 video 显示是摄像头的，canvas 是处理后的

import { Hands, HAND_CONNECTIONS, InputImage } from "@mediapipe/hands";

import { Camera } from "@mediapipe/camera_utils";

import { drawConnectors, drawLandmarks } from "@mediapipe/drawing_utils";

import { onMounted, ref } from 'vue'

const videoElement = ref<HTMLVideoElement | null>(null)

const canvasElement = ref<HTMLCanvasElement | null>(null)

onMounted(() => {

    const canvasCtx = canvasElement.value?.getContext("2d");

    // 上面要注意，如果要使用 dom 元素的属性赋值给变量，一定要在这里，如果

    // 放在外面，则是 undefined

    function onResults(results: any) {

        canvasCtx?.save();

        canvasCtx?.clearRect(0, 0, canvasElement.value?.width as number, canvasElement.value?.height as number);

        canvasCtx?.drawImage(

            results?.image, 0, 0, canvasElement.value?.width as number, canvasElement.value?.height as number);

        if (results?.multiHandLandmarks) {

            for (const landmarks of results?.multiHandLandmarks) {

                if (landmarks == undefined || canvasCtx == undefined) {

                    continue

                }

                drawConnectors(canvasCtx as CanvasRenderingContext2D, landmarks, HAND_CONNECTIONS,

                    { color: '#00FF00', lineWidth: 5 });

                drawLandmarks(canvasCtx as CanvasRenderingContext2D, landmarks, { color: '#FF0000', lineWidth: 2 });

            }

        }

        canvasCtx?.restore();

    }

    const camera = new Camera(videoElement.value as HTMLVideoElement, {

        onFrame: async () => {

            await hands.send({ image: videoElement.value as InputImage });

        },

        width: 1280,

        height: 720

    });

    const hands = new Hands({

        locateFile: (file) => {

            console.log("进入file");

            return `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`;

        }

    });

    hands.setOptions({

        maxNumHands: 2,

        modelComplexity: 1,

        minDetectionConfidence: 0.5,

        minTrackingConfidence: 0.5

    });

    hands.onResults(onResults);

    camera.start()

})

</script>

<style scoped>

</style>