Html5中如何调用手机摄像头并实现人脸识别

这篇文章主要介绍了HTML5中如何调用手机摄像头并实现人脸识别，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

需求

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

技术栈

Vue、html5、video标签、Android、iOS、百度ai

分析

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

核心代码

调用系统原生摄像头功能并使用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("摄像头打开失败,请检查权限设置!");    },

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");

调用百度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 });    },

手机适配

由于Android6之后，Android的权限管理出现变化，Android原生的壳子，需要做如下处理：

myWebView.setWebChromeClient(new WebChromeClient() {         @TargetApi(Build.VERSION_CODES.LOLLIPOP)         @Override         public void onPermissionRequest(final PermissionRequest request) {                   request.grant(request.getResources());        }});

IOS系统，Safari11之后可用

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

感谢你能够认真阅读完这篇文章，希望小编分享的“Html5中如何调用手机摄像头并实现人脸识别”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网精选频道，更多相关知识等着你来学习!