欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-26 16:25:55
这篇文章主要介绍了Html5调用手机摄像头并实现人脸识别的实现,混合App开发,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 18-12-21...

需求

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

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