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

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