seo优化| 运维百科| 网站建设技术| 网页设计技术| 网页设计教程| html及CSS教程|

Html5调用手机摄像头并实现人脸识别的实现

人浏览  发布时间:2021-01-20

这篇文章主要介绍了Html5调用手机摄像头并实现人脸识别的实现,混合App开发,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 需求 混合App开发,原生壳子+webApp,在web部分调用原生...
这篇文章主要介绍了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) {
     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错误,原因是摄像头参数设置不合理,找不到指定设置。
 
以上就是本文的全部内容,希望对大家的学习有所帮助
(编辑:360度神搜网)

备注:本网站资料免费下载浏览,为百度空间下载资料,需用户注册有百度账号,登陆后才可浏览下载,如有疑问联系我们免费解答。


你可能喜欢的:

友情链接
24小时服务电话:13992352808 地址:陕西省西安市,长乐西路180号 WebDesign ©2012 Corporation 360°神搜网网络科技传媒技术服务工作室 网站地图