Web version face recognition, face login, face comparison, springboot+vue+mysql

My friend from Shanghai 2022-08-06 08:53:58 阅读数:178

webversionfacerecognitionface

Web version of face recognition,人脸登录,springboot+vue+mysql

博客地址:Detailed face login,免费开源

思路讲解:
Vue调用摄像头
封装js

/** * 获取 浏览器 拍照的权限 */
/** * Get browser permissions * @param option */
function getCamera(option) {

option.thisCancas = document.getElementById(option.canvasId);
option.thisContext = option.thisCancas.getContext("2d");
option.thisVideo = document.getElementById(option.videoId);
option.thisVideo.style.display = "block";
// Get media properties,Older versions of browsers may not support itmediaDevices,我们首先设置一个空对象
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: option.videoWidth,
height: option.videoHeight,
transform: "scaleX(-1)",
},
};
navigator.mediaDevices
.getUserMedia(constraints)
.then(function (stream) {

// 旧的浏览器可能没有srcObject
if ("srcObject" in option.thisVideo) {

option.thisVideo.srcObject = stream;
} else {

// 避免在新的浏览器中使用它,因为它正在被弃用.
option.thisVideo.src = window.URL.createObjectURL(stream);
}
option.thisVideo.onloadedmetadata = function (e) {

option.thisVideo.play();
};
})
.catch((err) => {

console.log(err);
});
return option
}
/** * 绘制图片 * 返回格式为base64 * @param option */
function draw(option){

option.thisContext.drawImage(option.thisVideo,0,0,option.videoWidth,option.videoHeight);
return option.thisCancas.toDataURL("image/png");
}
export default {

getCamera,
draw
}

使用
导入

<script>
import $camera from '../../camera/index.js'
export default {

data() {

return {

videoWidth: 200,
videoHeight: 200,
msg:'',
faceImgState:false,
faceOption:{
}
};
},
mounted() {

//调用摄像头
this.faceOption = $camera.getCamera({

videoWidth: 200,
videoHeight: 200,
thisCancas: null,
thisContext: null,
thisVideo: null,
canvasId:'canvasCamera',
videoId:'videoCamera'
});
},

页面

 <div class="videoCamera-canvasCamera">
<video id="videoCamera" :width="videoWidth" :height="videoHeight" autoplay ></video>
<canvas style="display: none" id="canvasCamera" :width="videoWidth" :height="videoHeight" ></canvas>
<!--face effect area-->
<div v-if="faceImgState" class="face-special-effects-2"></div>
<div v-else class="face-special-effects"></div>
</div>
版权声明:本文为[My friend from Shanghai]所创,转载请带上原文链接,感谢。 https://qdmana.com/2022/218/202208060851126946.html