实现步骤：

一、安装

（1）官网下载 tracking.js 的代码包官网入口

（2）npm下载

执行命令： cnpm install tracking --save

二、demo案例代码

<template><div class="testTracking"><videoid="video"width="1000"height="700"preloadautoplayloopmuted></video><canvas id="canvas" width="1000" height="700"></canvas><div class="buttonDiv"><button type="button" @click="submit" style="font-size: 3vw;">提取照片</button><button type="button" name="button" @click="checkFace" style="font-size: 3vw;">检测人脸</button><button type="button" name="button" @click="getCompetence" style="font-size: 3vw;">打开摄像头</button><button type="button" name="button" @click="de" style="font-size: 3vw;">停</button></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 {name: "testTracking",data() {return {};},methods: {checkFace() {var video = document.getElementById("video");var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");var tracker = new tracking.ObjectTracker("face");tracker.setInitialScale(4);tracker.setStepSize(2);tracker.setEdgesDensity(0.1);this.trackerTask = tracking.track("#video", tracker, { camera: true });tracker.on("track", function (event) {if (event.data.length <= 0) {return;}context.clearRect(0, 0, canvas.width, canvas.height);event.data.forEach(function (rect) {context.strokeStyle = '#a64ceb';context.strokeRect(rect.x, rect.y, rect.width, rect.height);context.font = '11px Helvetica';context.fillStyle = "#fff";context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);});});},submit() {let that = this;let canvas = document.getElementById("canvas");let context = canvas.getContext("2d");let video = document.getElementById("video");context.drawImage(video, 0, 0, 1000, 700);canvas.toBlob((blob) => {// axios.post({ faceUrl: URL.createObjectURL(blob) }).then((res) => {//   console.log("上传成功");// });var reader = new FileReader();reader.readAsDataURL(blob);console.log(reader);});},getCompetence() {var _this = this;this.thisCancas = document.getElementById("canvas");this.thisContext = this.thisCancas.getContext("2d");this.thisVideo = document.getElementById("video");// 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象if (navigator.mediaDevices === undefined) {navigator.mediaDevices = {};}// 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象// 使用getUserMedia，因为它会覆盖现有的属性。// 这里，如果缺少getUserMedia属性，就添加它。if (navigator.mediaDevices.getUserMedia === undefined) {navigator.mediaDevices.getUserMedia = function (constraints) {// 首先获取现存的getUserMedia(如果存在)var getUserMedia =navigator.webkitGetUserMedia ||navigator.mozGetUserMedia ||navigator.getUserMedia;// 有些浏览器不支持，会返回错误信息// 保持接口一致if (!getUserMedia) {return Promise.reject(new Error("getUserMedia is not implemented in this browser"));}// 否则，使用Promise将调用包装到旧的navigator.getUserMediareturn new Promise(function (resolve, reject) {getUserMedia.call(navigator, constraints, resolve, reject);});};}var constraints = {audio: false,video: {width: this.videoWidth,height: this.videoHeight,transform: "scaleX(-1)",},};navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {// 旧的浏览器可能没有srcObjectif ("srcObject" in _this.thisVideo) {_this.thisVideo.srcObject = stream;} else {// 避免在新的浏览器中使用它，因为它正在被弃用。_this.thisVideo.src = window.URL.createObjectURL(stream);}_this.thisVideo.onloadedmetadata = function (e) {_this.thisVideo.play();};}).catch((err) => {console.log(err);});},de() {// 停止侦测this.trackerTask.stop();// 关闭摄像头this.trackerTask.closeCamera();},},destroyed() {// 停止侦测this.trackerTask.stop();// 关闭摄像头this.trackerTask.closeCamera();},};
</script><style lang="less" scoped>.testTracking {height: 100vh;width: 100%;position: relative;> * {position: absolute;left: 0;right: 0;margin: auto;}video,canvas {top: 0;}.buttonDiv {bottom: 10px;}}
</style>

demo到此结束了

参考文章：https://blog.csdn.net/qingwu1104/article/details/100881658

此外：上面的是案例，下面是另一份应用，不予解释，

<template><div style="width: 100%;height: 100%;"><Select v-model="modelSel" style="width:200px;margin-bottom:1%;" @on-change="changeSel"><Option v-for="(item,index) in videoArr" :value="item.id" :key="index">{{ item.label }}</Option></Select><div class="testTracking"><!--开启摄像头--><!--<Button  type="primary"  @click="callCamera" style="margin-right: 10px;">开启摄像头</Button>--><!--<Button @click = 'changePhoto' style="margin-right: 10px;">切换摄像头</Button>--><!--关闭摄像头--><!--<Button  type="primary"  @click="closeCamera">关闭摄像头</Button>--><!--canvas截取流--><canvas style="display:none;" ref="canvas" :width="videoWidth" :height="videoHeight"></canvas><!--图片展示--><video ref="video" id="video" :width="videoWidth" :height="videoHeight" autoplay style="display: block;margin:0 auto;"></video><canvas id="canvas"  :width="videoWidth" :height="videoHeight"></canvas><!--确认--><!--<Button  type="primary" @click="setImage">拍照</Button>--><!--<img :src="imgSrc" alt="" class="tx_img">--></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 {props:['src'],data () {return {videoWidth: 900,videoHeight: 700,videoArr:[],//所有的摄像头modelSel:'',//myInterval: null,imgSrc: '',isHasFace:false,//默认没有人脸tracker:null,}},created(){},mounted(){this.callCamera();this.changePhoto();this.checkFace();if(this.src!='user'){this.myInterval = setInterval(()=>{this.setImage();},2000)}},methods: {// 调用摄像头callCamera () {// H5调用电脑摄像头APInavigator.mediaDevices.getUserMedia({video: true}).then(success => {// 摄像头开启成功this.$refs['video'].srcObject = success// 实时拍照效果this.$refs['video'].play()}).catch(error => {console.error('摄像头开启失败，请检查摄像头是否可用！')})},// 拍照setImage () {console.log(this.isHasFace);if(!this.isHasFace){return false;}let ctx = this.$refs['canvas'].getContext('2d')// 把当前视频帧内容渲染到canvas上ctx.drawImage(this.$refs['video'], 0, 0,  this.videoWidth, this.videoHeight)// 转base64格式、图片格式转换、图片质量压缩---支持两种格式image/jpeg+image/pnglet imgBase64 = this.$refs['canvas'].toDataURL('image/jpeg');this.imgSrc = imgBase64;this.$emit('refreshDataList', imgBase64)return true;/**------------到这里为止，就拿到了base64位置的地址，后面是下载功能----------*/// 由字节转换为KB 判断大小// let str = imgBase64.replace('data:image/jpeg;base64,', '')// let strLength = str.length// let fileLength = parseInt(strLength - (strLength / 8) * 2)　　　 // 图片尺寸  用于判断// let size = (fileLength / 1024).toFixed(2)// console.log(size) 　　  // 上传拍照信息  调用接口上传图片 .........//// // 保存到本地// let ADOM = document.createElement('a')// ADOM.href = this.headImgSrc// ADOM.download = new Date().getTime() + '.jpeg'// ADOM.click()},// 关闭摄像头closeCamera () {if (!this.$refs['video'].srcObject) returnlet stream = this.$refs['video'].srcObjectlet tracks = stream.getTracks()tracks.forEach(track => {track.stop()})this.$refs['video'].srcObject = null},//切换本地摄像头changePhoto(){/**得到所有的设备*/navigator.mediaDevices.enumerateDevices().then((devices)=> {console.log(devices)this.videoArr = [];devices.forEach((device)=> {if(device.kind == 'videoinput'){this.videoArr.push({'label': device.label,'id': device.deviceId})}});}).catch(function(err) {layer.msg(err.name + ": " + err.message);});},//切换下拉changeSel(val){const videoConstraints = {};if (val === '') {videoConstraints.facingMode = 'environment';} else {videoConstraints.deviceId = { exact: val };}var constraints = {video: videoConstraints,};this.getUserMedia(constraints);},/**打开摄像头*/getUserMedia(constraints, success, error) {if (navigator.mediaDevices.getUserMedia) {//最新的标准APInavigator.mediaDevices.getUserMedia(constraints).then(success=>{// 摄像头开启成功this.$refs['video'].srcObject = success// 实时拍照效果this.$refs['video'].play()}).catch(error);} else if (navigator.webkitGetUserMedia) {//webkit核心浏览器navigator.webkitGetUserMedia(constraints,success, error)} else if (navigator.mozGetUserMedia) {//firfox浏览器navigator.mozGetUserMedia(constraints, success, error);} else if (navigator.getUserMedia) {//旧版APInavigator.getUserMedia(constraints, success, error);}},/*** 检查取景框是否有人脸* */checkFace() {var video = document.getElementById("video");var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");this.tracker = new tracking.ObjectTracker("face");this.tracker.setInitialScale(4);this.tracker.setStepSize(2);this.tracker.setEdgesDensity(0.1);this.trackerTask = tracking.track("#video",  this.tracker, { camera: true });let self = this;this.tracker.on("track", event=> {if (event.data.length <= 0) {self.setFace(false);return;}self.setFace(true);context.clearRect(0, 0, canvas.width, canvas.height);event.data.forEach(function (rect) {context.strokeStyle = '#a64ceb';context.strokeRect(rect.x, rect.y, rect.width, rect.height);context.font = '11px Helvetica';context.fillStyle = "#fff";context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);});});},setFace(data){this.isHasFace = data;}},beforeDestroy () {clearInterval(this.myInterval);// 停止侦测this.trackerTask.stop();}}
</script>
<style lang="less" scoped>.testTracking {min-height: 700px;width: 100%;position: relative;> * {position: absolute;left: 0;right: 0;margin: auto;}video,canvas {top: 0;}.buttonDiv {bottom: 10px;}}
</style>

vue实现拍照人脸识别功能带人脸选中框相关推荐

java 百度api人脸识别功能（人脸识别+详细案例+接口及所需工具类）
最近开发过程中需要用到人脸识别认证功能,然后就用的是百度API接口进行开发,起初设想用直接用人脸识别还是用注册到百度人脸库识别两种方法,为了简化开发直接就用了第一种方式: 直接上业务逻辑代码吧: po ...
BAT人脸识别功能第二步-人脸检测
今晚课题点击[阅读原文]或长按图片[识别图中的二维码]即可参加今晚的课程.
用 Java 实现人脸识别功能（附源码）
远程在家办公的第N天,快要闲出屁了,今天突然有个小学弟加我VX说要咨询我点技术问题(终于可以装X了). 看了他的需求描述,大概是要做一个Java web版本的人脸识别功能,然后存储人物的特征,再扫脸比 ...
人脸特性提取java_基于 Java 实现的人脸识别功能（附源码）
引言远程在家办公的第N天,快要闲出屁了,今天突然有个小学弟加我VX说要咨询我点技术问题(终于可以装X了).看了他的需求描述,大概是要做一个Java web版本的人脸识别功能,然后存储人物的特征,再扫 ...
【转】人脸识别功能的用户体验设计优化
2016-08-09 人脸识别技术是生物特征识别技术的一种,因其相对其它生物特征识别技术的优点而在市场上得到广泛应用.在人脸识别功能优化设计的项目中,主要以"三步走"的流程完成了设 ...
Facebook表示将不会默认开启人脸识别功能，被罚怕了？
据外媒报道,Facebook在本周二表示,该公司的人脸识别功能现将面向所有用户开放,不过用户可以选择不使用这项技术,并且,对于未自行选择的用户,Facebook也将不会默认开启这项功能. 在此之后,已 ...
Facebook面向所有用户开放人脸识别功能；福布斯美国最具创新力领袖公布；AMD：将发新BIOS 优化三代锐龙加速性能……...
戳蓝字"CSDN云计算"关注我们哦! 嗨,大家好,重磅君带来的[云重磅]特别栏目,如期而至,每周五第一时间为大家带来重磅新闻.把握技术风向标,了解行业应用与实践,就交给我重磅君吧! ...
基于pyqt5的登录界面及人脸识别功能界面相互跳转的设计（1）
基于pyqt5的登录界面及人脸识别功能界面相互跳转的设计(1) 这个是登录界面: 部分代码如下: // An highlighted block from 文件1 import * from PyQt ...
用Python-opencv快速实现人脸识别功能（从零开始教你）（复制粘贴即可用）
用Python快速实现人脸识别功能首先: 一.开发环境: 1.你需要个Python,下载好后设置环境变量(CSDN上面有很多这里不做过多介绍)可以参考 Python下载教程 2.下载pip-参考博主 ...
人脸识别手机端APK分享 | 极速体验人脸识别功能创建一个简单的人脸识别手机APP程序
1.前言虹软公司提供免费离线人脸识别,对于开发者提供了比较友好.完整的可配置demo.但是如需直接体验功能,还是要花一点时间去完成项目编译.配置等一系列工作,对于初学者.不怎么熟悉整个项目的人来说可 ...

vue实现拍照人脸识别功能带人脸选中框

前言：

实现打开摄像头，并识别人脸。

实现效果：

实现步骤：

一、安装

（1）官网下载 tracking.js 的代码包官网入口

（2）npm下载

二、demo案例代码

demo到此结束了

参考文章：https://blog.csdn.net/qingwu1104/article/details/100881658

此外：上面的是案例，下面是另一份应用，不予解释，

vue实现拍照人脸识别功能带人脸选中框相关推荐

最新文章

热门文章

vue实现拍照人脸识别功能带人脸选中框

前言：

实现打开摄像头，并识别人脸。

实现效果：

实现步骤：

一、安装

（1）官网下载 tracking.js 的代码包官网入口

（2）npm下载

二、demo案例代码

***demo到此结束了***

参考文章：https://blog.csdn.net/qingwu1104/article/details/100881658

此外：上面的是案例，下面是另一份应用，不予解释，

vue实现拍照人脸识别功能带人脸选中框相关推荐

最新文章

热门文章

demo到此结束了