前端获取电脑摄像头权限并拍照进行人脸识别_前端获取摄像头拍照-优快云博客

为什么要做这个呢？

不同用户具有不同的权限如果管理员用户被别人知晓了怎么办？为了解决该用户账号密码泄露导致的误操作。

前端实现思路是什么呢？

前端思想是获取摄像头权限通过canvas 获取base64图片然后转为二进制文件流通过FormData（form表单提交）和后端交互的方式进行识别

后端的实现思路呢？

创建一个sql 里面存一些有权限的人员信息包含照片等用上传的照片和sql里面的数据进行对比人脸识别进而知道进入当前系统的人是否具有某些权限当然为了界面友好还需要有权限人员库用于展示

会遇到什么问题？

中间遇到了低版本浏览器无法使用canvas的问题所以此方法只支持最新的浏览器

代码在哪里啊？(只是一个demo 下个文章我会发项目中的部分代码基于vue的啊)

就在下面了哈哈


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>摄像头拍照</title>
</head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
        #capture{
    
    
            position: absolute;
            right: 190px;
            bottom: -40px;

        }
        #video{
    
    
            position: absolute;
            right: 0;
            top: 0;
        }
        #img{
    
    
            position: absolute;
            left: 0;
            top: 0;
        }
        .auto{
    
    
            position: absolute;
            left: 50%;
            top: 50%;
            height: 320px;
            margin-top: -160px;
        }
        #sure{
    
    
            position: absolute;
            left: 210px;
            bottom: -40px;

        }
        button{
    
    
            cursor: pointer;
            margin: 0 auto;
            border: 1px solid #f0f0f0;
            background: #5CACEE;