关于uniapp使用face
一、安装 npm i face-api.js
二、在uniapp里还需要安装webgl不然模型起不来。npm install @tensorflow/tfjs和npm install @tensorflow/tfjs-backend-webgl （vue里不需要）
三、把模型下载后放到static文件夹下models文件夹里
<template>
<view class="container">
<view class="content-nav" v-if="navCurrent == 0" :style="`fontSize: ${fontSize}`">
<view @click="black"><text class="balck">返回</text></view>
<view>刷脸登录</view>
<view class="time">{ { time }}S</view>
</view>
<view class="takePhotoView" :style="{ top: navCurrent == 0 ? `${160 * scale}rpx` : '0' }">
<view class="title" :style="`fontSize: ${16 * scale}rpx`"> 请正视摄像头不要遮挡 </view>
<view class="video-box" id="videoBox">
<video
ref="video"
style="border-radius: 50%; width: 100%; height: 100%"
object-fit="fill"
:show-center-play-btn="false"
muted
autoplay
:controls="false"
preload
v-if="!pictureShow"
></video>
<image :src="picture" mode="scaleToFill" style="width: 100%; height: 100%; border-radius: 50%" v-if="pictureShow"></image>
</view>
</view>
</view>
</template>
<script>
import { mixins } from '@/static/js/mixin.js'
import * as tf from '@tensorflow/tfjs'
import * as faceapi from 'face-api.js'
const constraints = {
audio: false,
video: {
width: 400,
height: 400,
facingMode: 'user'
}
}
export default {
data() {
return {
initScale: 1.277,
// device: 'front',
navCurrent: 1,
videoShow: true,
pictureShow: false,
// 图片地址
picture: '',
// 用于视频识别的节点
canvas: null,
video: null,
image: null,
cameraStream: null,
timerVideo: null,
timeout: 0,
videoWidth: 600,
相关知识
仙容Angel Face
基于Uniapp实现的鲜花商城App
基于uniapp微信小程序的摄影街拍圈子交流平台
蘭FACE美容机构应该是兰州的天HUA板了
关于花的经典英文诗句精选
uniapp+vue3+云开发全栈开发同城配送鲜花小程序任意商城基础入门到实战
【CCTV纪录频道】《花开中国》全5集
关于实行农药购买使用实名制的通告
鲜花商城同城速递项目的技术实现与探索
关于农业生产中化学农药正确认识与使用的思考
网址: 关于uniapp使用face https://m.huajiangbk.com/newsview427995.html
| 上一篇: 植物识花神器app下载 |
下一篇: 看懂黑科技丨赏花不识花？这4款A |
