vue3 + video + canvas 人脸识别

注意调试只有在本地才可以打开摄像头，线上需要 https

该例子使用的是手动点击选择照片
稍微修改注释代码也可以实时获取人脸
示例码云地址

video 修改圆形样式

修改此属性

object-fit: cover;

人脸左右移动方向相反

利用 transform:scaleX 实现反转

video,img{transform: scaleX(-1);
}

生成的图片出现拉伸

  ctx?.drawImage(video.value,-50,0,screenshotCanvas.value.width * (320 / 240),screenshotCanvas.value.height);// 50 如何得来( screenshotCanvas.value.width - screenshotCanvas.value.width * (320 / 240) ) / 2

关闭摄像头

源码中添加

window.stream = stream

关闭摄像头

onUnmounted(() => {window.mediaStreamTrack?.stop();window.stream?.getTracks()?.forEach((track) => track?.stop());
});

base64 转换 file

//将base64转换为blob
export const dataURLtoBlob = (dataurl) => {var arr = dataurl.split(","),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });
};//将blob转换为file
export const blobToFile = (theBlob, fileName) => {theBlob.lastModifiedDate = new Date();theBlob.name = fileName;return theBlob;
};

 const blob = dataURLtoBlob(base64Img);const file = blobToFile(blob, "face");

iVCam 手机用作电脑摄像头

示例代码如下

码云地址

<template><div><div class="video-box"><img :src="src" v-show="src" /><videov-show="!src"ref="video"id="video"width="300"height="300"preloadautoplayloopmuted></video><canvas ref="canvas" id="canvas" width="300" height="300"></canvas></div><canvasref="screenshotCanvas"id="screenshotCanvas"width="300"height="300"></canvas></div><div @click="screenshotAndUpload">拍摄</div>
</template><script setup>
import { ref, reactive, onMounted } from "vue";
import * as tracking from "./assets/tracking/tracking-min.js";
import "./assets/tracking/face-min.js";const video = ref(null);
const screenshotCanvas = ref(null);
const src = ref("");onMounted(() => {init();
});// 初始化设置
function init() {// 固定写法let tracker = new window.tracking.ObjectTracker("face");tracker.setInitialScale(4);tracker.setStepSize(2);tracker.setEdgesDensity(0.1);window.tracking.track("#video", tracker, {camera: true,});// 检测出人脸 绘画人脸位置 该示例不需要// tracker.on("track", function(event) {//   context.clearRect(0, 0, canvas.width, canvas.height);//   event.data.forEach(function(rect) {//     context.strokeStyle = "#0764B7";//     context.strokeRect(rect.x, rect.y, rect.width, rect.height);//   });// });
}// 上传图片
function screenshotAndUpload() {// 绘制当前帧图片转换为base64格式let ctx = screenshotCanvas.value?.getContext("2d");ctx?.clearRect(0,0,screenshotCanvas.value.width,screenshotCanvas.value.height);ctx?.drawImage(video.value,-50,0,screenshotCanvas.value.width * (320 / 240),screenshotCanvas.value.height);const base64Img = screenshotCanvas.value?.toDataURL("image/jpeg");src.value = `${base64Img}`;// TODO 使用 base64Img 请求接口即可// setTimeout(() => {//   // 失败//   src.value = "";// }, 2000);
}
</script><style scoped>
/* 绘图canvas 不需显示隐藏即可 */
#screenshotCanvas {display: none;
}.video-box {position: relative;width: 300px;height: 300px;
}video,
img {width: 300px;height: 300px;border-radius: 50%;object-fit: cover;border: #000000 5px solid;box-sizing: border-box;transform: scaleX(-1);}
video,
canvas {position: absolute;top: 0;left: 0;
}
</style>

原生示例

<template><button @click="openMedia">打开</button><button @click="closeMedia">关闭</button><button @click="drawMedia">截取</button><!-- 摄像展示要用video标签 --><videoref="video"preloadautoplayloopmuted></video><!-- 截取的照片用canvas标签展示 --><canvas ref="canvas" width="300" height="300"></canvas>
</template><script setup>
import { ref, onMounted } from "vue";const video = ref(null);
const canvas = ref(null);
const imgSrc = ref("");onMounted(() => {openMedia();console.info('video',video.value);console.log('video',video.value.width);console.log('video',video.value.height);
});function openMedia() {// 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象if (navigator.mediaDevices === undefined) {navigator.mediaDevices = {};}// 标准的APInavigator.mediaDevices.getUserMedia({video: true,}).then((stream) => {// 摄像头开启成功video.value.srcObject = stream;video.value?.play();}).catch((err) => {console.log("err", err);});
}
function closeMedia() {video.value.srcObject.getTracks()[0].stop();
}
function drawMedia() {console.log(canvas.value.width, canvas.value.width * (320 / 240));const ctx = canvas.value?.getContext("2d");ctx?.clearRect(0, 0, canvas.value.width, canvas.value.height);ctx.drawImage(video.value,(canvas.value.width - canvas.value.width * (320 / 240)) / 2,0,canvas.value.width * (320 / 240),canvas.value.height);// 获取图片base64链接const image = canvas.value.toDataURL("image/png");imgSrc.value = image;
}
</script><style scoped>
video {object-fit: cover;transform: scaleX(-1);
}
canvas {transform: scaleX(-1);
}
</style>

vue3 + video + canvas 人脸识别相关推荐

h5手机拍照+人脸识别
预览地址:https://face-camera.vercel.app 调用手机默认的相机调用  <input type="file&q ...
人脸识别opencv+python
人脸识别一.什么是人脸识别二.openCV 1.安装openCV 2.使用openCV ①.加载图片 ②.图片灰度转换 ③.修改图片的尺寸 ④.画图 ⑤.人脸检测 Haar级联获取Haar级联数 ...
vue3 基于faceapi.js实现人脸识别
vue3 基于faceapi.js实现人脸识别先贴代码 <template><div class="app-container"><div>{ ...
【微信小程序】基于百度大脑人体检测、人脸识别以及调用阿里垃圾分类识别小程序利用canvas完成人脸画图、分割手部部分图片算法
演示好久没发了,最近在做比赛看下成品演示: 说明:人体出现在镜头里用红色框将人脸圈出来.用黄色框将手部圈出来,定时器触发后,通过百度返回的top+.left+.width+.height+将拍照的截 ...
PC人脸识别登录，出乎意料的简单
之前不是做了个开源项目嘛,在做完GitHub登录后,想着再显得有逼格一点,说要再加个人脸识别登录,就我这佛系的开发进度,过了一周总算是抽时间安排上了. 源码在文末其实最近对写文章有点小抵触,写的东西 ...
玩了一个人脸识别登录
最近温差大,请别感冒前言这篇文章就没有目录了,直接从头正序开始即可. 因为突然接到了一个需求,一个xx局,内部使用的移动端项目(是我们开发的),需要添加一个人脸识别登录的需求. 内部员工使用的识别 ...
vue 拍照人脸识别_安排上了！PC人脸识别登录，出乎意料的简单
推荐阅读: 微服务实战文档分享,阿里内部的Spring cloud微服务精髓都在里面去面试3W月薪的Java岗位,被虐哭了,原来是我这些技术点还有欠缺春招失厉,狂刷200+面试文档,终斩获头条,阿 ...
网页实现人脸识别PHP,奇思妙想-用HTML5进行人脸识别
今天发现一篇文章写的很有趣,叫你如何使用HTML5进行人脸识别.在网页内进行人脸识别,很好很强大! "现代Web"不断发展出不少有趣的API,但你并不会在大多数项目中使用到所有的内 ...
java人脸识别_自从加了PC人脸识别登录功能，网站立马显得高大上
之前不是做了个开源项目嘛,在做完GitHub登录后,想着再显得有逼格一点,说要再加个人脸识别登录,就我这佛系的开发进度,过了一周总算是抽时间安排上了. 源码在文末其实最近对写文章有点小抵触,写的东西 ...

vue3 + video + canvas 人脸识别

注意调试只有在本地才可以打开摄像头，线上需要 https

video 修改圆形样式

人脸左右移动方向相反

生成的图片出现拉伸

关闭摄像头

base64 转换 file

iVCam 手机用作电脑摄像头

示例代码如下

原生示例

vue3 + video + canvas 人脸识别相关推荐

最新文章

热门文章