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

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！