网页版人脸识别,人脸登录,人脸对比,springboot+vue+mysql

来自上海的这位朋友 2022-08-06 08:51:23 阅读数:562

网页登录识别人脸

网页版人脸识别,人脸登录,springboot+vue+mysql

博客地址:详细人脸登录,免费开源

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

/** * 获取 浏览器 拍照的权限 */
/** * 获取浏览器权限 * @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";
// 获取媒体属性,旧版本浏览器可能不支持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: 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>
<!--人脸特效区域-->
<div v-if="faceImgState" class="face-special-effects-2"></div>
<div v-else class="face-special-effects"></div>
</div>
版权声明:本文为[来自上海的这位朋友]所创,转载请带上原文链接,感谢。 https://tanyongpeng.blog.csdn.net/article/details/125922869