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

最新推荐文章于 2025-10-28 10:55:58 发布

原创

最新推荐文章于 2025-10-28 10:55:58 发布 · 1.1w 阅读

35 ·

CC 4.0 BY-SA版权

文章标签：

#vue 人脸识别 # vue 获取摄像头权限 #vue摄像头拍照并上传

本文探讨了在Vue项目中如何获取摄像头权限进行拍照，并结合人脸识别功能。文章讲解了前端和后端的实现思路，讨论可能遇到的问题，并提供了基于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:"", //上传图片文件
				streamPicture:"",
				loadingStatus: {