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

需求

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

技术栈

vue、html5、video肖申克救赎经典台词标签、android、ios、百度ai

分析

1、使用navigator.mediadevices.geturmedia调用系统原生摄像头功能
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");      ttimeout(() => {        if (          navigator.mediadevices.geturmedia ||          navigator.geturmedia ||          navigator.webkitgeturmedia ||          navigator.mozgeturmedia        ) {          //调用用户媒体设备, 访问摄像头          this.geturmedia(            {              video: {                width: {                  ideal: that.videowidth,                  max: that.videowidth                },                height: {                  ideal: that.videoheight,                  max: that.videoheight                },                facingmode: "ur",    //前置摄像头                framerate: {                  ideal: 30,                  min: 10                }              }            },            this.videosuccess,            this.videoerror          );        } el {          this.$toast.center("摄像头打开失败,请检查权限设置!");        }      }, 300);    },     geturmedia(constraints, success, error) {      if (navigator.mediadevices.geturmedia) {        //最新的标准api        navigator.mediadevices          .geturmedia(constraints)          .then(success)          .catch(error);      } el if (navigator.webkitgeturmedia) {        //webkit核心浏览器        navigator.webkitgeturmedia(constraints, success, error);      } el if (navigator.mozgeturmedia) {        //firfox浏览器        navigator.mozgeturmedia(constraints, success, error);      } el if (navigator.geturmedia) {        //旧版api        navigator.geturmedia(constraints, success, error);      }    },    videosuccess(stream) {      this.mediastreamtrack = str秋天的早晨eam;      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 ba64data = this.canvas.todataurl();        let blob = this.datauritoblob(ba64data);           //        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(respon) {            if ((respon.status = 200)) {                .....识别成功，显示结果            } el {            富翁排行榜    ......识别失败            }          })          .catch(function(error) {            console.error(error);          });              //ba64转换为blob    datauritoblob(ba64data) {      var bytestring;      if (ba64data.split(",")[0].indexof("ba64") >= 0)        bytestring = atob(ba64data.split(",")[1]);      el bytestring = unescape(ba64data.split(",")[1]);      var mimestring = ba64data        .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.twebchromeclient(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错误，原因是摄像头参数设置不合理，找不到指定设置。

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