這篇文章主要介紹了Html5中如何調(diào)用手機攝像頭并實現(xiàn)人臉識別，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

專注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)雞冠免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了近千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

需求

混合App開發(fā)，原生殼子+webApp，在web部分調(diào)用原生攝像頭功能并且在網(wǎng)頁指定區(qū)域顯示攝像頭內(nèi)容，同時可以手動拍照并進行人臉識別，將識別結(jié)果顯示在網(wǎng)頁上。

技術(shù)棧

vue、Html5、video標簽、Android、IOS、百度AI

分析

1、使用navigator.mediaDevices.getUserMedia調(diào)用系統(tǒng)原生攝像頭功能
2、video標簽顯示攝像頭內(nèi)容
3、canvas標簽獲取圖片
4、將圖像上傳服務(wù)器，通過百度AI識別圖片
5、web顯示識別結(jié)果

核心代碼

1、調(diào)用系統(tǒng)原生攝像頭功能并使用video標簽顯示html:

JavaScript：

 initVideo() {
      let that = this;
      this.video = document.getElementById("webcam");
      setTimeout(() => {
        if (
          navigator.mediaDevices.getUserMedia ||
          navigator.getUserMedia ||
          navigator.webkitGetUserMedia ||
          navigator.mozGetUserMedia
        ) {
          //調(diào)用用戶媒體設(shè)備, 訪問攝像頭
          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("攝像頭打開失敗,請檢查權(quán)限設(shè)置!");
        }
      }, 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("攝像頭打開失敗,請檢查權(quán)限設(shè)置!");
    },

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、調(diào)用百度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)) {
                .....識別成功，顯示結(jié)果
            } else {
                ......識別失敗
            }
          })
          .catch(function(error) {
            console.error(error);
          });
          
    //base64轉(zhuǎn)換為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的權(quán)限管理出現(xiàn)變化，Android原生的殼子，需要做如下處理：

myWebView.setWebChromeClient(new WebChromeClient() {

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

2、IOS系統(tǒng)，Safari11之后可用

3、OverconstrainedError錯誤，部分Android手機會報OverconstrainedError錯誤，原因是攝像頭參數(shù)設(shè)置不合理，找不到指定設(shè)置。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Html5中如何調(diào)用手機攝像頭并實現(xiàn)人臉識別”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!