npm install face-api.js # 安裝依賴

<template> 
    <div> 
        <!-- 視頻標簽，設(shè)置寬度、高度、視頻源，并添加 ended 事件監(jiān)聽 -->
        <video id="video" width="300" height="500" src="../assets/video.mp4" controls @ended="videoEnded"></video> 
        <!-- 畫布標簽，用于繪制馬賽克圖片 -->
        <canvas id="canvas" width="300" height="500"></canvas> 
    </div> 
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import * as facejs from 'face-api.js';
import mosaic from '../assets/mosaic.png';

// 初始化函數(shù)，加載人臉檢測模型
const init = () => {
    Promise.all([
        // 加載 TinyFaceDetector 模型，用于檢測人臉位置
        facejs.nets.tinyFaceDetector.loadFromUri('/models'), 
        // 加載 SSD Mobilenetv1 模型，用于檢測 68 個面部關(guān)鍵點
        facejs.nets.ssdMobilenetv1.loadFromUri('/models') 
    ]).then((res) => {
        // 模型加載完成后，開始處理人臉
        entryFaces(); 
    });
};

// 定義計時器引用
const timer = ref(null);

// 處理人臉的函數(shù)
const entryFaces = () => {
    // 獲取視頻元素
    const video = document.getElementById('video');
    // 獲取畫布元素
    const canvas = document.querySelector('canvas');
    // 獲取畫布的 2D 上下文
    const ctx = canvas.getContext('2d');

    // 監(jiān)聽視頻的 play 事件
    video.addEventListener('play', () => {
        // 獲取視頻的顯示尺寸
        const displaySize = { width: video.width, height: video.height };
        // 調(diào)整畫布尺寸與視頻一致
        facejs.matchDimensions(canvas, displaySize);

        // 創(chuàng)建馬賽克圖片對象
        const mosaicImage = new Image();
        mosaicImage.src = mosaic;

        // 馬賽克圖片加載完成后的回調(diào)函數(shù)
        mosaicImage.onload = () => {
            // 設(shè)置定時器，每隔 100 毫秒執(zhí)行一次人臉檢測和繪制操作
            timer.value = setInterval(async () => {
                // 檢測視頻幀中的所有人臉
                const detections = await facejs.detectAllFaces(video);
                // 調(diào)整檢測結(jié)果的尺寸與視頻一致
                const resizedDetections = facejs.resizeResults(detections, displaySize);

                // 清空畫布并繪制視頻幀
                ctx?.drawImage(video, 0, 0, canvas.width, canvas.height);

                // 遍歷檢測到的所有人臉
                resizedDetections.forEach(detection => {
                    // 在人臉位置繪制馬賽克圖片
                    ctx?.drawImage(mosaicImage, detection.box.x, detection.box.y, detection.box.width, detection.box.height);
                });
            }, 100);
        };
    });
};

// 視頻播放結(jié)束時的處理函數(shù)
const videoEnded = () => {
    // 清除定時器，停止人臉檢測和繪制操作
    clearInterval(timer.value);
};

// 組件掛載完成后調(diào)用初始化函數(shù)
onMounted(() => {
    init();
});
</script>