npm install tracking
安装完直接复制以下代码到页面使用即可
<template>
<div id="seePerson">
<div v-show="showContainer" class="face-capture" id="face-capture">
<p class="tip">请保持人像在取景框内</p>
<video
id="video"
:width="vwidth"
:height="vheight"
playsinline
webkit-playsinline
></video>
<canvas id="refCanvas" :width="cwidth" :height="cheight"></canvas>
<!-- <img class="img-cover" :src="getImageUrl('yuan')" alt="" /> -->
<!-- <div class="yuan"></div> -->
<p class="contentp">{
{
scanTip }}</p>
</div>
<div v-if="!showContainer" class="img-face">
<img class="imgurl" :src="imgUrl" />
</div>
<div class="face-card">
<van-form @submit="onSubmit">
<van-field name="fileList" label="身份证上传">
<template #input>
<van-uploader v-model="fileList" :after-read="afterRead" />
</template>
</van-field>
<van-field
v-model="username"
name="username"
label="法人信息"
placeholder="法人信息"
:rules="[{ required: true, message: '请填写法人信息' }]"
/>
<van-field
v-model="password"
type="password"
name="password"
label="身份证号码"
placeholder="身份证号码"
:rules="[{ required: true, message: '请填写身份证号码' }]"
/>
<div style="margin: 16px">
<van-button round block type="info" native-type="submit"
>提交</van-button
>
</div>
</van-form>
</div>
</div>
</template>
<script>
require("tracking/build/tracking-min.js");
require("tracking/build/data/face-min.js");
require("tracking/build/data/mouth-min.js");
require("tracking/examples/assets/stats.min.js");
export default {
data() {
return {
username: "",
password: "",
fileList: [],
screenSize: {
width: window.screen.width,
height: window.screen.height,
},
URL: null,
streamIns: null, // 视频流
showContainer: true, // 显示
tracker: null,
tipFlag: false, // 提示用户已经检测到
flag: false, // 判断是否已经拍照
context: null, // canvas上下文
profile: [], // 轮廓
removePhotoID: null, // 停止转换图片
scanTip: "人脸识别中...", // 提示文字
imgUrl: "",
canvas: null,
trackertask: null,