h5人脸扫描代码(Html5调用手机摄像头并实现人脸识别的实现)
类别:Web前端 浏览量:1777
时间:2021-10-03 01:42:16 h5人脸扫描代码
Html5调用手机摄像头并实现人脸识别的实现需求
混合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) { 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); } }, videoSuccess(stream) { this.mediaStreamTrack = stream; this.video.srcObject = stream; this.video.play(); }, videoError(error) { console.error(error); this.$toast.center("摄像头打开失败,请检查权限设置!"); },
2、canvas获取摄像头图片
JavaScript:
this.canvas = document.createElement("canvas"); .... let context = this.canvas.getContext("2d"); context.drawImage(this.video, 0, 0, this.videoWidth, this.videoHeight); this.imgSrc = this.canvas.toDataURL("image/png");
3、调用百度AI识别图片
JavaScript:
let that = this; let base64Data = this.canvas.toDataURL(); let blob = this.dataURItoBlob(base64Data); // var file = new FormData(); file.append("file", blob); file.append("key", that.uuid); util.ajax .post("XXXXXXXXXX", file, { headers: { "Content-Type": "multipart/form-data" } }) .then(function(response) { if ((response.status = 200)) { .....识别成功,显示结果 } else { ......识别失败 } }) .catch(function(error) { console.error(error); }); //base64转换为Blob dataURItoBlob(base64Data) { var byteString; if (base64Data.split(",")[0].indexOf("base64") >= 0) byteString = atob(base64Data.split(",")[1]); else byteString = unescape(base64Data.split(",")[1]); var mimeString = base64Data .split(",")[0] .split(":")[1] .split(";")[0]; var ia = new Uint8Array(byteString.length); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ia], { type: mimeString }); },
手机适配
1、由于Android6之后,Android的权限管理出现变化,Android原生的壳子,需要做如下处理:
myWebView.setWebChromeClient(new WebChromeClient() { @TargetApi(Build.VERSION_CODES.LOLLIPOP) @Override public void onPermissionRequest(final PermissionRequest request) { request.grant(request.getResources()); } });
2、IOS系统,Safari11之后可用
3、OverconstrainedError错误,部分Android手机会报OverconstrainedError错误,原因是摄像头参数设置不合理,找不到指定设置。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- html5 页面向上滑动(html5手机键盘弹出收起的处理)
- html5图片动画制作(HTML5 3D旋转相册的实现示例)
- html5手机字体怎么设置(html5给汉字加拼音加进度条的实现代码)
- html5css3旋转特效效果(一款利用html5和css3实现的3D立方体旋转效果教程)
- h5打开小程序点允许(html5跳转小程序wx-open-launch-weapp踩坑)
- html5 data属性
- html5怎么将字体变为红色(Html5自定义字体解决方法)
- 微信html5页面怎么制作(HTML5中外部浏览器唤起微信分享功能的代码)
- html5播放代码(html5 video全屏播放/自动播放的实现示例)
- html5底部组件(HTML5 Blob对象的具体使用)
- 用html制作一个简易小游戏(Html5写一个简单的俄罗斯方块小游戏)
- html5中怎么做圆形框架(HTML5 层的叠加的实现)
- 只用html5简单动画代码(HTML5 3D书本翻页动画的实现示例)
- html5导入图片文件(HTML5 实现图片上传预处理功能)
- html5socket源码(五分钟学会HTML5的WebSocket协议)
- html5所有特性(HTML5 FileReader对象的具体使用方法)
- 以前全椒人是怎么过冬的 满满都是回忆(以前全椒人是怎么过冬的)
- NVIDIA显卡份额冲上88 A饭发愁 游戏优化恐没A卡份了(NVIDIA显卡份额冲上88A饭发愁)
- AMD YES A卡还是N卡 A卡和N卡的区别(AMDYESA卡还是N卡)
- 以后显卡多了一个新选择,N卡和A卡外又多了个I卡(以后显卡多了一个新选择)
- 读卖乐园的彩灯(读卖乐园的彩灯)
- 新疆80后在淘宝卖干果 以前是 不务正业 如今帮乡亲致富(新疆80后在淘宝卖干果)
热门推荐
- mybatis批量插入报错(解决myBatis中删除条件的拼接问题)
- 用python画圣诞树送给女朋友(情人节快乐! python绘制漂亮玫瑰花)
- python一组数字求和(Python3数字求和的实例)
- 阿里云ecs所有文件备份到本地(阿里云ECS服务器的系统重装、快照备份、恢复数据回滚教程)
- docker容器启动后怎么进入(Docker 退出container后保持继续运行的操作)
- .NET get、post 请求
- pandas 导入数据库(详解pandas的外部数据导入与常用方法)
- numpy常用统计分析函数(Numpy之random函数使用学习)
- MYSQL中GROUP BY不包含所有的非聚合字段时的注意事项
- 如何用python人脸识别(Python学习笔记之视频人脸检测识别实例教程)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9