如何将MediaPipe原生JS代码改造为Vue组件并通过npm安装使用

1. 安装依赖 #

通过npm安装所需的MediaPipe官方包：

npm install @mediapipe/hands @mediapipe/camera_utils @mediapipe/drawing_utils

2. 封装Vue组件 #

直接创建单文件组件即可使用，以下为Vue3组合式API写法的完整示例：

<template>
  <div class="mediapipe-container">
    <!-- 视频元素仅用于采集画面，默认隐藏 -->
    <video ref="videoRef" class="input-video" style="display: none;"></video>
    <canvas ref="canvasRef" class="output-canvas" width="1280" height="720"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { Hands, HAND_CONNECTIONS } from '@mediapipe/hands'
import { Camera } from '@mediapipe/camera_utils'
import { drawConnectors, drawLandmarks } from '@mediapipe/drawing_utils'

const videoRef = ref(null)
const canvasRef = ref(null)
let cameraInstance = null
let handsInstance = null

onMounted(() => {
  const videoEl = videoRef.value
  const canvasEl = canvasRef.value
  const canvasCtx = canvasEl.getContext('2d')

  // 检测结果渲染逻辑
  function handleResults(results) {
    canvasCtx.save()
    canvasCtx.clearRect(0, 0, canvasEl.width, canvasEl.height)
    canvasCtx.drawImage(results.image, 0, 0, canvasEl.width, canvasEl.height)
    // 绘制手部关键点和连线
    if (results.multiHandLandmarks) {
      results.multiHandLandmarks.forEach(landmarks => {
        drawConnectors(canvasCtx, landmarks, HAND_CONNECTIONS, {
          color: '#00FF00',
          lineWidth: 5
        })
        drawLandmarks(canvasCtx, landmarks, {
          color: '#FF0000',
          lineWidth: 2
        })
      })
    }
    canvasCtx.restore()
  }

  // 初始化手部检测实例
  handsInstance = new Hands({
    locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`
  })
  handsInstance.setOptions({
    maxNumHands: 1,
    minDetectionConfidence: 0.6,
    minTrackingConfidence: 0.5
  })
  handsInstance.onResults(handleResults)

  // 初始化摄像头采集
  cameraInstance = new Camera(videoEl, {
    onFrame: async () => {
      await handsInstance.send({ image: videoEl })
    },
    width: 1280,
    height: 720
  })
  cameraInstance.start()
})

// 组件卸载时清理资源，避免内存泄漏
onUnmounted(() => {
  cameraInstance?.stop()
  handsInstance?.close()
})
</script>

<style scoped>
.mediapipe-container {
  position: relative;
  width: 1280px;
  height: 720px;
}
.output-canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
</style>

注意事项 #

• 调用摄像头需要页面运行在HTTPS或者localhost环境下，否则会触发浏览器权限限制
• 如果使用Vue2，只需要将组合式API写法替换为选项式API，通过this.$refs获取DOM元素即可
• 模型加载路径可根据需求自行替换为本地静态资源路径，无需依赖CDN

内容的提问来源于stack exchange，提问作者k3nzy