前言：
实现打开摄像头，并识别人脸。
实现效果：
实现步骤：
一、安装
（1）官网下载 tracking.js 的代码包官网入口
（2）npm下载
执行命令： cnpm install tracking --save
二、demo案例代码
<template>
<div class="testTracking">
<video
id="video"
width="1000"
height="700"
preload
autoplay
loop
muted
></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.getUserMedia
return 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) {
// 旧的浏览器可能没有srcObject
if ("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到此结束了***
此外：上面的是案例，下面是另一份应用，不予解释，
<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调用电脑摄像头API
navigator.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/png
let 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) return
let stream = this.$refs['video'].srcObject
let 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) {
//最新的标准API
navigator.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) {
//旧版API
navigator.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>
