Vue回炉重造之封装一个实用的人脸识别组件

前言

人脸识别技术现在越来越火，那么我们今天教大家实现一个人脸识别组件。 资源

element UI
Vue.js
tracking-min.js
face-min.js

源码

由于我们的电脑有的有摄像头，有的没有摄像头，所以我们需要根据不同的场景来封装这个组件。先放个图吧，大家可以看得更加直观一些。

有摄像头的话，我们就显示（需要人像识别组件）：

在这里插入图片描述

没有摄像头的话，我们就显示（这个直接上传人像即可）：

在这里插入图片描述

判断有无摄像头，我们可以使用这个方法：

// 判断有无摄像头,推荐放在created里 var deviceList = []; navigator.mediaDevices .enumerateDevices() .then(devices => { devices.forEach(device => { deviceList.push(device.kind); }); if (deviceList.indexOf(“videoinput”) == “-1”) { console.info(“没有摄像头”); return false; } else { console.info(“有摄像头”); this.videoinput = true; // 这是我自定义的一个状态，初始值为false } }) .catch(function(err) { alert(err.name + ": " + err.message); });

完整代码：

index.vue

<template>
<!-- 人脸识别 -->
    <el-dialog
      :visible.sync="openFaceView"
      width="581px"
      :show-close="false"
      v-loading="faceloading"
      element-loading-text="人脸识别中"
    >
      <div class="ovf" style="padding:20px;">
        <el-upload
          v-if="!videoinput"
          class="upload-demo"
          action
          multiple
          :limit="1"

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/119116841