最近做了一个考试答题的pc端vue3项目,就是pc端有人脸识别这个流程。于是熟悉了下。附上官方文档地址:https://www.npmjs.com/package/webcamjs
一。 第一步下载 :npm i webcamjs
二。 vue3中引入:
//html部分
<template>
<div>
<div id="results">Your captured image will appear here...</div>
<h1>WebcamJS Test Page</h1>
<h3>Demonstrates simple 320x240 capture & display</h3>
<div id="my_camera"></div>
<form>
<input type=button value="拍照" @click="take_snapshot">
<input type="button" value="关闭" @click="close_snapshot" />
</form>
</div>
</template>
// js部分
<script lang="ts" setup>
import {
reactive, ref, watch, onMounted } from "vue";
//引入
import Webcam from "webcamjs";
//
const take_snapshot = () => {
// 要抓拍照片,只需调用Webcam.snap()函数,传入一个回调函数。图像数据将作为data URI传递给函数,然后您可以在您的web页面中显示它,或提交给服务器
Webcam.snap(function (data_uri) {
// display results in pages
console.log(data_uri);
document.getElementById("results").innerHTML =
"<h2>Here is your image:</h2>" + '<img src="' + data_uri + '"/>';
});
};
const close_snapshot=()=>{
//关闭摄像头
Webcam.reset();
}
//以下为配置项可自取
onMounted(() => {
Webcam.set({
width: 320,//实时摄像机查看器的宽度
height: 240,//实时摄像机查看器的高度
dest_width:400,//捕获相机图像的宽
dest_height:400,//捕获相机图像的高
crop_width:300,//最终裁剪图像的宽度(以像素为单位),默认为dest_width。
crop_height:300,//最终裁剪图像的高度(以像素为单位),默认为dest_height。
image_format: "jpeg",//捕获图像的期望图像格式,可以是“jpeg”或“png”。
jpeg_quality: 90,//对于JPEG图像,这是理想的质量,从0(最差)到100(最好)。
enable_flash:true,//启用或禁用Flash回退,如果没有本机网络摄像头访问。
force_flash:false,//将此设置为true将始终在adobeflash回退模式下运行。
flip_horiz:false,//将此设置为true将水平翻转图像(镜像模式)。
fps:30,//设置所需的fps(帧/秒)捕获速率。
swfURL:"./webcam.swf",//为adobeflash回退SWF文件设置一个备用位置
flashNotDetectedText:"未检测到flash播放器的文本/html。",//未检测到flash播放器的文本/html。
unfreeze_snap:true,//是否在拍照后解冻相机
upload_name:"webcam",//在上传摄像头图像文件时使用哪个HTTP POST参数名
});
// DOM元素必须已经创建并且为空。将ID或CSS选择器传递给Webcam.attach()函数(挂载dom)
Webcam.attach("#my_camera");
});
</script>
三。里面还有webcamjs一些API和事件:附上地址 :https://github.com/jhuckaby/webcamjs/blob/master/DOCS.md