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

需求

混合App开发，原生壳子+webApp，在web部分调用原生摄像头功能并且在网页指定区域显示摄像头内容，同时可以手动拍照并进行人脸识别，将识别结果显示在网页上。

技 术 栈

vue、Ht ML 5、 video标签 、And ROI d、IOS、 百度 ai

分析

1、使用navigator.mediaDevices.getUserMedia调用系统原生摄像头功能
2、video标签显示摄像头内容
3、canvas标签获取图片
4、将图像上传 服务器 ，通过百度AI识别图片
5、web显示识别结果

核心代码

1、调用系统原生摄像头功能并使用video标签显示html:

      <video
        id="webc am "
        :style="videoStyle"
        :width="videoWidth"
        :h ei ght="videoHeight"
        loop
         PR eload
      >
      </video>

JavaScript：

 in IT Video() {
      let t hat  = this;
      this.video = document.getElementById("webcam");
      setTimeout(() => {
        if (
          navigator.mediaDevices.getUserMedia ||
          navigator.getUserMedia ||
          navigator. webkit GetUserMedia ||
          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. img Src = 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.ap PE nd("file", blob);
        file.append("key", that.uuid);
        util.ajax
          .post("XXXXXXXXXX", file, {
            headers: {
              "Content -t ype": " ;m ultipart/form-data"
            }
          })
          .then(function(response) {
            if ((response. stat us = 200)) {
                .....识别成功，显示结果
            } else {
                ......识别失败
            }
          })
          .catch(function(error) {
            console.error(error);
          });
          
    //base64转换为Blob
    dataURItoBlob(base64Data) {
      var by test ring;
      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.setWebCh rom eClient(new WebC hr omeClient() {

         @T arg etApi(Build.VERSION_CODES. LOL L IPO P)
         @ override 
         p ub lic void onPermissionRequest(final PermissionRequest request) {
                   request.grant(request.getResources());
        }
});

2、IOS系统，Safari11之后可用

3、OverconstrainedError错误，部分Android手 机会 报OverconstrainedError错误， 原因 是摄像头参数设置不合理，找不到指定设置。

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

总结

以上是 为你收集整理的 Html5调用手机摄像头并实现人脸识别的实现 全部内容，希望文章能够帮你解决 Html5调用手机摄像头并实现人脸识别的实现 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于Html5调用手机摄像头并实现人脸识别的实现的详细内容...