最近在做一個項目,涉及到了人臉識別登錄,我們的人臉識別都是跑在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 }