前端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 }