vue 基于获取摄像头权限 拍照的人脸识别技术

为什么要做这个呢？

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

前端实现思路是什么呢？

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

后端的实现思路呢？

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

会遇到什么问题？

中间遇到了低版本浏览器无法使用canvas的问题 所以此方法只支持最新的浏览器
上传至服务器时出现http的谷歌因为安全设置问题 导致无法获取摄像机资源 需用https解决 或通过配置chrome安全限制解决 详情可以看我的下个文章

代码在哪里啊？(基于vue的初版代码)

调用方法

		<living-validation :response="livingValidationResponse" v-if="livingValidationResponse.isShowDialog" @realAddNewTask = "realAddNewTask"></living-validation>
	data设置如下
	livingValidationResponse:{
		isShowDialog: false,
		title: "活体检测",
		callbackName:"",
		item: {}	
	},

就在下面了 哈哈

<template>
	<div>
		<add-dialog :response="response" v-if="response.isShowDialog" ref="addDialogRef" @closeDialog="closeDialog">
			<div slot="libBox" class="libBox">
				<div class="auto">
					<video id="video" width="480" height="320" autoplay></video>
					<canvas id="canvas" width="480" height="320" style="display: none;"></canvas>
					<img src="/static/images/body_default.png" id="img" width="480" height="320" style="margin-left: 20px;">
					<!-- <img src="" id="img" width="480" height="320" style="margin-left: 20px;"> -->
					<div>
						<button id="capture" title="点击进行拍照" @click="takePhoto">拍照</button>
					</div>
					<div>
						<button id="sure" title="是否用这张图片进行验证" @click="sure">确认</button>
					</div>
				</div>
			</div>
		</add-dialog>
		<loading :loadingStatus="loadingStatus"></loading>
		
	</div>
</template>
<script>
	import loading from "src/biz_components/loading/loading.vue";
	import addDialog from "biz_components/dialog.vue";
	export default {
    
		name: "livingvalidation",
		props: ["response"],
		/*	authuor wenbin by 2019-03-26
			response:{
			isShowDialog: false, //是否展示
			title: "活体检测", //标题
			item: {}	需要传入数据用于子组件使用
		},*/
		components: {
    
			addDialog: addDialog,
			loading:loading
		},
		data: function() {
    
			return {
    
				File: