人脸检测

<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" >

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

import { FaceDetection } from "@mediapipe/face_detection"

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

import { drawConnectors, drawLandmarks, drawRectangle } 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");

    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?.detections.length > 0) {

            drawRectangle(

                canvasCtx as CanvasRenderingContext2D, results.detections[0].boundingBox,

                { color: 'blue', lineWidth: 4, fillColor: '#00000000' });

            drawLandmarks(canvasCtx as CanvasRenderingContext2D, results.detections[0].landmarks, {

                color: 'red',

                radius: 5,

            });

        }

        canvasCtx?.restore();

    }

    const faceDetection = new FaceDetection({

        locateFile: (file) => {

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

        }

    });

    faceDetection.setOptions({

        // modelSelection: 0,

        // model: "1",

        selfieMode: false,

        model: 'short',

        minDetectionConfidence: 0.5

    });

    faceDetection.onResults(onResults);

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

        onFrame: async () => {

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

        },

        width: 1280,

        height: 720

    });

    camera.start()

})

</script>

<style scoped>

</style>