141 lines
3.9 KiB
Python
141 lines
3.9 KiB
Python
<template>
|
|
<div style="width: 100%;height: 100%;">
|
|
<div class="testTracking">
|
|
<canvas style="display:none;" id="myCanvas" ref="canvas" :width="videoWidth" :height="videoHeight"></canvas>
|
|
<!--图片展示-->
|
|
<video ref="video" id="myVideo" :width="videoWidth" :height="videoHeight" autoplay style="display: block;margin:0 auto;border: 2px solid #333333;"></video>
|
|
<!--确认-->
|
|
<Button type="primary" @click="setImage" class="takePhoto">拍照</Button>
|
|
<div id="res"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {faceLogin} from "@/api/testModel";
|
|
export default {
|
|
props:['src'],
|
|
data () {
|
|
return {
|
|
videoWidth: 500,
|
|
videoHeight: 400,
|
|
videoArr:[],//所有的摄像头
|
|
modelSel:'',//
|
|
myInterval: null,
|
|
imgSrc: '',
|
|
isHasFace:false,//默认没有人脸
|
|
tracker:null,
|
|
}
|
|
},
|
|
created(){
|
|
},
|
|
mounted(){
|
|
this.callCamera();
|
|
this.changePhoto();
|
|
},
|
|
methods: {
|
|
// 调用摄像头
|
|
callCamera () {
|
|
// H5调用电脑摄像头API
|
|
navigator.mediaDevices.getUserMedia({
|
|
video: true
|
|
}).then(success => {
|
|
// 摄像头开启成功
|
|
this.$refs['video'].srcObject = success;
|
|
// 实时拍照效果
|
|
this.$refs['video'].play()
|
|
}).catch(error => {
|
|
alert('摄像头开启失败，请检查摄像头是否可用！')
|
|
})
|
|
},
|
|
// 拍照
|
|
setImage () {
|
|
let canvas = document.getElementById("myCanvas");
|
|
let context = canvas.getContext('2d');
|
|
let video = document.getElementById("myVideo");
|
|
context.drawImage(video,0,0,90,68);
|
|
let image = new Image();
|
|
image = canvas.toDataURL('image/png');
|
|
document.getElementById('res').innerHTML = '<img src="'+image+'">';
|
|
let imgData = {base64:image};
|
|
faceLogin(imgData).then((res) => {
|
|
if (res.code >= 200) {
|
|
this.$message.success("成功");
|
|
}
|
|
});
|
|
},
|
|
// 关闭摄像头
|
|
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)=> {
|
|
this.videoArr = [];
|
|
devices.forEach((item)=> {
|
|
if(item.kind == 'videoinput'){
|
|
this.videoArr.push({
|
|
'label': item.kind,
|
|
'id': item.deviceId
|
|
})
|
|
}
|
|
});
|
|
})
|
|
.catch(err=>{
|
|
});
|
|
},
|
|
/**打开摄像头*/
|
|
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);
|
|
}
|
|
},
|
|
setFace(data){
|
|
this.isHasFace = data;
|
|
}
|
|
|
|
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
.testTracking {
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
.takePhoto{
|
|
margin: 30px auto;
|
|
display: block;
|
|
}
|
|
</style>
|
|
|