项目需求是要实现类似于微信扫描的人脸识别

来看看官方解释

官方解释.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(“摄像头打开失败,请检查权限设置!”);

}

完整示例可以找我私聊获取


版权声明:本文为weixin_39606118原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/weixin_39606118/article/details/111521159