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"

更多请见：http://www.mark-to-win.com/tutorial/50764.html