二、trackingjs人脸捕获 vue3

<template>
  <div class="wrapp">
    <video id="myVideo" width="800" height="500" preload="preload" autoplay loop muted/>
    <canvas ref="myCanvas" class="myCanvas" width="800" height="500"></canvas>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';

// 标识用的画布
const myCanvas = ref<HTMLCanvasElement | null>(null);

// 实例颜色检查器
const myTracker = new tracking.ObjectTracker('face');
myTracker.setInitialScale(4);
myTracker.setStepSize(2);
myTracker.setEdgesDensity(0.1);

// 监听颜色检查器
myTracker.on('track', (event: tracking.TrackEvent) => {
  const context = myCanvas.value?.getContext('2d') as CanvasRenderingContext2D;
  if (myCanvas.value) {
    context.clearRect(0, 0, myCanvas.value.width, myCanvas.value.height);
  }
  if (event.data.length === 0) {
    console.log('没有捕获到内容');
  } else {
    event.data.forEach((rect: tracking.TrackRect) => {
      const { x, y, width, height} = rect;
      context.strokeStyle = '#a64ceb';
      context.strokeRect(x, y, width, height);
      context.font = '11px Helvetica';
      context.fillStyle = '#fff';
      context.fillText(`x:${x}px`, x + width + 5, y + 11);
      context.fillText(`y:${y}px`, x + width + 5, y + 22);
    });
  }
});

onMounted(() => {
  // 触发颜色检查器
  tracking.track('#myVideo', myTracker, { camera: true });
});
</script>
<style lang="less" scoped>
.wrapp {
  position: relative;
  .myCanvas {
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>