没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
Html5调用手机摄像头并实现人脸识别的实现调用手机摄像头并实现人脸识别的实现
主要介绍了Html5调用手机摄像头并实现人脸识别的实现,混合App开发,对大家的学习或者工作具有一定的参
考学习价值,需要的朋友们下面随着小编来一起学习学习吧
需求需求
混合App开发,原生壳子+webApp,在web部分调用原生摄像头功能并且在网页指定区域显示摄像头内容,同时可以手动拍照
并进行人脸识别,将识别结果显示在网页上。
技术栈技术栈
vue、Html5、video标签、Android、IOS、百度AI
分析分析
1、使用navigator.mediaDevices.getUserMedia调用系统原生摄像头功能
2、video标签显示摄像头内容
3、canvas标签获取图片
4、将图像上传服务器,通过百度AI识别图片
5、web显示识别结果
核心代码核心代码
1、调用系统原生摄像头功能并使用video标签显示html:
<video
id="webcam"
:style="videoStyle"
:width="videoWidth"
:height="videoHeight"
loop
preload
>
</video>
JavaScript:
initVideo() {
let that = this;
this.video = document.getElementById("webcam");
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);
},
getUserMedia(constraints, success, error) {
资源评论
- ftpxia2021-03-06没什么用,用别人的插件,浪费我的分,你说清楚不行吗?
- danialinfo22021-04-16骗人积分的,一点用处都没有,垃圾
weixin_38607088
- 粉丝: 4
- 资源: 921
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功