前端实现调取摄像头实现人脸识别

在近期项目中有一个奇怪的需求，就是要求页面调取摄像头进行人脸识别，虽然感觉在PC端网站调取摄像头不符合常识，但需求都提了，那就稍微满足（敷衍）一下吧！

前端人脸识别中所需的东西有哪一些：

1.电脑（没有你就别干了）；

2.摄像头（没有就去买）；

3.插件包（在我资源里面找找，我上传了）；

4.人脸（这个人人都有）；

进入主题：

<template><div><template><Row :gutter="16"><Col span="12"><div class="camera_outer" style="position: relative;"><video id="videoCamera" width="480" height="560" autoplay></video><canvas style="display: block;position: absolute;top: 0;" width="480" height="560" id="canvasCamera"></canvas><div class="button"><Button @click="getCompetence()">打开摄像头</Button><Button @click="stopNavigator()">关闭摄像头</Button><Button @click="setImage()">拍照</Button></div></div></Col><Col span="12"><div v-if="imgSrc" class="img_bg_camera"><p>效果预览</p><img :src="imgSrc" alt class="tx_img" /></div></Col></Row></template></div>
</template>
<script>
export default {data() {return {videoWidth: 450,videoHeight: 650,imgSrc: "",thisCancas: null,thisContext: null,thisVideo: null,openVideo:false};},mounted(){//this.getCompetence()//进入页面就调用摄像头},methods: {// 调用权限（打开摄像头功能）getCompetence() {var _this = this;var a = document.getElementById("canvasCamera");var b = a.getContext("2d");this.thisVideo = document.getElementById("videoCamera");this.thisVideo.style.display = 'block';var tracker = new tracking.ObjectTracker('face');tracker.setInitialScale(4);tracker.setStepSize(2);tracker.setEdgesDensity(0.1);this.trackerTask = tracking.track('#videoCamera', tracker, { camera: true });tracker.on('track', function(event) {b.clearRect(0, 0, a.width, a.height);event.data.forEach(function(rect){b.font = '18px Helvetica';b.fillText("已识别到人脸，请静止等待拍照",100,40);b.strokeStyle = 'lawngreen';b.strokeRect(rect.x, rect.y, rect.width, rect.height);// setTimeout(_this.setImage(),60000);});});// 获取媒体属性，旧版本浏览器可能不支持mediaDevices，我们首先设置一个空对象if (navigator.mediaDevices === undefined) {navigator.mediaDevices = {};}// 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象// 使用getUserMedia，因为它会覆盖现有的属性。// 这里，如果缺少getUserMedia属性，就添加它。if (navigator.mediaDevices.getUserMedia === undefined) {navigator.mediaDevices.getUserMedia = function(constraints) {// 首先获取现存的getUserMedia(如果存在)var getUserMedia =navigator.webkitGetUserMedia ||navigator.mozGetUserMedia ||navigator.getUserMedia;// 有些浏览器不支持，会返回错误信息// 保持接口一致if (!getUserMedia) {//不存在则报错return Promise.reject(new Error("getUserMedia is not implemented in this browser"));}// 否则，使用Promise将调用包装到旧的navigator.getUserMediareturn new Promise(function(resolve, reject) {getUserMedia.call(navigator, constraints, resolve, reject);});};}var constraints = {audio: false,video: {width: this.videoWidth,height: this.videoHeight,transform: "scaleX(-1)"}};navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {// 旧的浏览器可能没有srcObjectif ("srcObject" in _this.thisVideo) {_this.thisVideo.srcObject = stream;} else {// 避免在新的浏览器中使用它，因为它正在被弃用。_this.thisVideo.src = window.URL.createObjectURL(stream);}_this.thisVideo.onloadedmetadata = function(e) {_this.thisVideo.play();};}).catch(err => {console.log(err);});},//  绘制图片（拍照功能）setImage() {var _this = this;// canvas画图var a = document.getElementById("canvasCamera");var b = a.getContext("2d");b.drawImage(_this.thisVideo,0,0,_this.videoWidth,_this.videoHeight);// 获取图片base64链接var image = a.toDataURL("image/png");_this.imgSrc = image;//赋值并预览图片_this.stopNavigator();return;},// 关闭摄像头stopNavigator() {this.thisVideo.srcObject.getTracks()[0].stop();}// base64转文件，此处没用到// dataURLtoFile(dataurl, filename) {//   var arr = dataurl.split(",");//   var mime = arr[0].match(/:(.*?);/)[1];//   var bstr = atob(arr[1]);//   var n = bstr.length;//   var u8arr = new Uint8Array(n);//   while (n--) {//     u8arr[n] = bstr.charCodeAt(n);//   }//   return new File([u8arr], filename, { type: mime });// }}
};
</script>

上方这是我写好的的demo代码；

对于人脸识别使用的js插件包在我博客资源里面就有，想要自己去下就好。
js插件包原网址：https://trackingjs.com/ 。

下好以后在index.html页面引入），然后贴上上方的代码，你也可以按照项目需求改成你需要的样子，里面有很多没有用的代码，可以自己进行删减。

前端实现调取摄像头实现人脸识别相关推荐

FPGA驱动摄像头实现人脸识别(基于肤色)
FPGA驱动摄像头实现人脸识别(基于肤色) 验证平台:黑金AX309 OV5640 时至今日图像处理已经得到了广泛应用,今天我们来讲一讲利用FPGA结合摄像头来实现一个简单的人脸识别(当然误检率很高, ...
基于python调用摄像头进行人脸识别，支持多张人脸同时识别
介绍调用摄像头进行人脸识别, 支持多张人脸同时识别; 摄像头人脸录入请不要离摄像头过近, 人脸超出摄像头范围时会有 "OUT OF RANGE" 提醒提取特征建立人脸数据库 ...
python鱼眼图像识别_一种基于鱼眼摄像头的人脸识别锁以及识别方法与流程
本发明涉及人脸识别领域,特别涉及一种基于鱼眼摄像头的人脸识别锁. 背景技术: 人脸识别具有用在门锁上存在一些不足.例如,门锁一般装在门上,其高度在安装时已经固定,针对不同身高的用户来说可能造成人脸图像 ...
Java + opencv 实现人脸识别，图片人脸识别、视频人脸识别、摄像头实时人脸识别
搭建环境 opencv官网下载windows安装包 https://opencv.org/releases/ 选择最新版4.1.1 下载完成后是一个opencv-4.1.1-vc14_vc15.exe ...
VUE+faceApi.js实现摄像头拍摄人脸识别
需求:前端获取到摄像头信息,通过模型来进行判断人像是否在镜头中,镜头是否有被遮挡. 实现步骤: 1.通过video标签来展示摄像头中的内容 2.通过canvas来绘制视频中信息进行展示 3.在拍照时候 ...
python人脸识别毕业设计-用python3.6在电脑上实现用摄像头来人脸识别源程序
# -*- coding: UTF-8 -*- import face_recognition import cv2 import os # 这是一个超级简单(但很慢)的例子,在你的网络摄像头上实时运 ...
调用远程摄像头进行人脸识别_人脸识别技术植入手机APP
随着物联网技术的日益成熟,我们看到已经有很多APP用到了人脸识别技术,特别是金融和互联网领域的应用纷纷加入了人脸识别.表示,人脸识别技术基于人的脸部特征信息进行身份识别,为互联网金融等行业解决在线多维 ...
python调用摄像头人脸识别代码_利用face_recognition，dlib与OpenCV调用摄像头进行人脸识别...
用已经搭建好 face_recognition,dlib 环境来进行人脸识别未搭建好环境请参考: 使用opencv 调用摄像头 import face_recognition import cv2 ...
csi python 摄像头树莓派_树莓派之摄像头和人脸识别
安装好Python与树莓派外置硬件GPIO库文件 sudo apt-get install python-rpi.gpio 在python中使用GPIO示例: import RPi.GPIO as G ...
调用远程摄像头进行人脸识别_工地安全：AI如何实现安全帽检测与人脸识别？...
安全生产一直是施工生产中很重要的一部分,只有保障了员工的安全,才能保证企业的利益.安全帽作为保护.防护的重要防范手段,一直是各大企业要求员工佩戴的,可还是发生了各种由于未佩戴安全帽导致的安全事故. 通 ...

前端实现调取摄像头实现人脸识别

前端实现调取摄像头实现人脸识别相关推荐

最新文章

热门文章