前端PC人臉識別登錄

  最近在做一個項目,涉及到了人臉識別登錄,我們的人臉識別都是跑在PC端上的。一共發現了三個問題。並且解決了。

  第一個問題是,前端掉起攝像頭的時候,報錯“TypeError: Cannot read property 'getUserMedia' of undefined”,這個和代碼沒有關係,代碼都是正確的。主要的原因是因爲前端的使用“navigator.mediaDevices.getUserMedia”的時候,需要使用https協議,或者使用localhost的方式(本地直接雙擊打開HTML文件也是可以的),如果必須需要使用ip的話,需要通過瀏覽器設置白名單的方式。具體的操作方式,請看這個鏈接

  第二個問題是,你如果參考的代碼比較老的情況下, 會有一個“createObjectURL”報錯。這個是因爲這個屬性在新的瀏覽器版本中,已經不在支持了。詳情看這個鏈接。這裏放一幅圖吧。

可以看到基本上新的瀏覽器版本都不支持了。所以裏面直接使用“srcObject”就行了。

  第三個問題就是人臉識別的整體流程了。其實前端能做的也是很簡單的,前端調起攝像頭,然後截一副圖,然後把這個圖片發送給後臺就可以了,我們後臺是使用的騰訊雲的人臉識別,這裏也附上一個鏈接。然後後臺會告訴你,這個人臉是不是咱們已經錄入過的人臉。話說,這個人臉的識別率還是很高的。

  最後附上代碼

  1 var video = document.getElementById('video');
  2 var canvas = document.getElementById('canvas');
  3 var context = canvas.getContext('2d');
  4 // 這裏的寬高可以設置爲固定的,因爲我們的人臉識別區域不是固定的大小,所以這裏是傳的參數
  5 function startFace(width,height) {
  6     // video.width = width + "px";
  7     $(video).attr("width",width+"px").attr("height",height + "px");
  8     $(canvas).attr("width",width+"px").attr("height",height + "px");
  9     try {
 10         if (navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia) {
 11             getUserMediaToPhoto({
 12                 video: {
 13                     width: width,
 14                     height: height
 15                 },
 16                 audio: false
 17             }, success, error);
 18         } else {
 19             alert('你的瀏覽器不支持訪問用戶媒體設備');
 20         }
 21     } catch (error) {
 22         console.error(error);
 23         console.log("請使用http+localhost的方式或者https域名的方式訪問,暫不支持http的格式人臉登錄");
 24     }
 25 }
 26 
 27 function getUserMediaToPhoto(constraints, success, error) {
 28     if (navigator.mediaDevices.getUserMedia) {
 29         //最新標準API
 30         navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
 31     } else if (navigator.webkitGetUserMedia) {
 32         //webkit核心瀏覽器
 33         navigator.webkitGetUserMedia(constraints, success, error);
 34     } else if (navigator.mozGetUserMedia) {
 35         //firefox瀏覽器
 36         navigator.mozGetUserMedia(constraints, success, error);
 37     } else if (navigator.getUserMedia) {
 38         //舊版API
 39         navigator.getUserMedia(constraints, success, error);
 40     }
 41 }
 42 
 43 //成功回調函數
 44 function success(stream) {
 45     //兼容webkit核心瀏覽器
 46     var CompatibleURL = window.URL || window.webkitURL;
 47     //將視頻流轉化爲video的源
 48     // video.src = CompatibleURL.createObjectURL(stream);
 49     try{
 50         video.src = window.URL.createObjectURL(stream);
 51     }catch(e){
 52         video.srcObject = stream;
 53     }
 54     video.play(); //播放視頻
 55     //將視頻繪製到canvas上
 56     postFace();
 57 }
 58 
 59 // 獲取不成功
 60 function error() {
 61     console.error("獲取視頻設備失敗");
 62 }
 63 
 64 function postFace() {
 65     setTimeout(function () {
 66         context.drawImage(video, 0, 0, faceWidth, faceHeight);
 67         img = canvas.toDataURL('image/jpg')
 68         // $("#faceImg").attr("src", img);
 69         // img = img.split(',')[1];
 70         console.log(img);
 71         $("#faceImg").attr("src", img);
 72         //將照片以base64用ajax傳到後臺
 73         $.ajax({
 74             type: 'post',
 75             dataType: 'json',
 76             url: '/sensetechTencentloginkit/tencentlogin',
 77             contentType: 'application/text;charset=utf-8',
 78             headers:{
 79                 
 80             },
 81             data: JSON.stringify({
 82                 image: img
 83             }),
 84             success: function (response) {
 85                 // console.log(response);
 86                 $("#reading").hide();
 87                 if(response.result == "success"){
 88                     $("#faileInfo").hide();
 89                     $("#successInfo").show();
 90                     setTimeout(function(){
 91                         loginTrue(response.userName);
 92                     },1000)
 93                 }else{
 94                     $("#successInfo").hide();
 95                     $("#faileInfo").show();
 96                 }
 97             }
 98         });
 99         
100     }, 1*1000)
101 }

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章