项目需求是要实现类似于微信扫描的人脸识别
来看看官方解释
官方解释.png
项目里面用到拍摄自定义页面,起初我尝试使用
Barcode 组件来写,然后效果并不好 ,不能修改为前摄像头。
然后去看了下 camera 这个组件只支持小程序?
camera.png
此时我的心已经凉了一大截!!!苍天啊,不会写原生插件怎么玩??
然后我尝试使用plus写摄像的东西
plus.png
此时我的内心又懵逼了。
然后我放弃了uniapp转向 h5 来思考。
在csdn找到了h5解决方案 h5解决来源
最终使用webview来包裹实现了效果
上核心代码
initVideo()
function initVideo() {
let that = this;
this.video = document.getElementById(“webcam”);
this.videoHeight = 375
this.videoWidth = 375
setTimeout(() => {
if (
navigator.mediaDevices.getUserMedia ||
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia
) {
//调用用户媒体设备, 访问摄像头
this.getUserMedia({
video: {
width: {
ideal: that.videoWidth,
max: that.videoWidth
},
height: {
ideal: that.videoHeight,
max: that.videoHeight
},
facingMode: “user”, //前置摄像头
frameRate: {
ideal: 30,
min: 10
}
}
},
this.videoSuccess,
this.videoError
);
} else {
this.$toast.center(“摄像头打开失败,请检查权限设置!”);
}
}, 300);
}
function getUserMedia(constraints, success, error) {
if (navigator.mediaDevices.getUserMedia) {
//最新的标准API
navigator.mediaDevices
.getUserMedia(constraints)
.then(success)
.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);
}
}
function videoSuccess(stream) {
this.mediaStreamTrack = stream;
this.video.srcObject = stream;
this.video.play();
}
function videoError(error) {
console.error(error);
this.$toast.center(“摄像头打开失败,请检查权限设置!”);
}
完整示例可以找我私聊获取