当前位置:Web前端 > > 正文

h5人脸扫描代码(Html5调用手机摄像头并实现人脸识别的实现)

时间:2021-10-03 01:42:16类别:Web前端

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错误,原因是摄像头参数设置不合理,找不到指定设置。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    上一篇下一篇

    猜您喜欢

    热门推荐