Html5启用手机上摄像头并完成面部识别的完成

2021-02-23 03:24 jianzhan

要求

混和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不正确,缘故是摄像头主要参数设定不符合理,找不到特定设定。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。