h5摄像头人脸捕捉,html5 摄像头
需求
混合应用开发，原生壳子webApp，在网部分调用原生摄像头功能并且在网页指定区域显示摄像头内容，同时可以手动拍照并进行人脸识别，将识别结果显示在网页上。
技术栈
vue、Html5、视频标签、安卓、IOS、百度人工智能
分析
1、使用领航员。媒体设备。获取用户媒体调用系统原生摄像头功能
2、视频标签显示摄像头内容
3、画布标签获取图片
4、将图像上传服务器，通过百度人工智能识别图片
5、网络显示识别结果
核心代码
1、调用系统原生摄像头功能并使用录像标签显示html:
视频id=网络摄像头:样式=视频样式:宽度=视频宽度:高度=视频高度循环预加载/videoJavaScript:
init video(){ let that=this；这个。视频=文档。getelementbyid(网络摄像头);settime out(()={ if(navigator。媒体设备。getuser media 导航器。getuser media 导航器。WebKit getuser media navigator。mozzgetuser media){//调用用户媒体设备，访问摄像头这个。getuser media({ video:{ width:{ ideal:that。视频宽度，max: that.videoWidth }，高度：{ ideal: that.videoHeight，max: that.videoHeight }，朝向模式：用户，//前置摄像头帧率：{ ideal: 30，min: 10 } }，this.videoSuccess，this。视频错误)；} else { this .$toast.center(摄像头打开失败，请检查权限设置!);} }, 300);}，getUserMedia(constraints，success，error){ if(navigator。媒体设备。获取用户媒体){//最新的标准API navigator.mediaDevices .getUserMedia(约束)。然后（成功)。接住(错误);} else if(导航员。WebKit getuser media){//WebKit核心浏览器navigator.webkitGetUserMedia(约束、成功、错误);} else if(导航员。mozgetusermedia){//fir fox浏览器navigator.mozGetUserMedia(约束、成功、错误);} else if(导航员。获取用户媒体){//旧版API navigator.getUserMedia(约束、成功、错误);} }，视频成功(流){这个。mediastreamtrack=stream这个。视频。src object=stream这个。视频。play()；}，视频错误(错误){控制台。错误(error)；这个$toast.center(摄像头打开失败，请检查权限设置!);}、2、画布获取摄像头图片
JavaScript:
这个。画布=文档。createelement(“canvas”)；让上下文=这个。画布。获取上下文(“2d”)；context.drawImage(this.video，0，0，this.videoWidth，this。视频高度)；这个。img src=this。画布。toda taurl( image/png )；3、调用百度人工智能识别图片
JavaScript:
让那个=这个；让base 64数据=这个。画布。toda taurl()；设blob=这个。datauritoblob(base 64数据)；//var file=new FormData()；file.append(file ，blob)；file.append(key ，即。uuid)；util.ajax .post(XXXXXXXXXX ，file，{ headers:{ Content-Type : multipart/form-data }).然后(函数(响应){ if((响应。状态=200)){.识别成功，显示结果}否则{.识别失败} }) .catch(函数(错误){ console。错误(error)；});//base64转换为blob dataURItoBlob(base 64 data){ var byteString；if (base64Data.split(，)[0].( base64 )=0)字节串的索引=atob(base64数据。split(，)[1])；else byteString=unescape(base 64数据。split(，)[1])；var mimeString=base64Data .拆分(,)[0]。split(:)[1].拆分(;)[0];var ia=新的uint 8数组(字节字符串。长度)；for(var I=0；I bytestring . length I){ ia[I]=bytestring。charcodeat(I)；}返回新的Blob([ia]，{ type:mime string })；},手机适配
1、由于安卓6之后，安卓的权限管理出现变化，安卓原生的壳子，需要做如下处理：
我的网络视图。setwebchromeclient(new WebChromeClient(){ @ target API(Build .版本代码. LOLLIPOP)@ Override public void onPermissionRequest(最终权限请求){ request。授予(请求。获取资源())；}});2、IOS系统，Safari11之后可用
3、过约束误差错误，部分机器人手机会报过度约束误差错误，原因是摄像头参数设置不合理，找不到指定设置。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。