vue3中使用webcamjs拍照

最近做了一个考试答题的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 &amp; 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

vue3中使用webcamjs拍照

猜你喜欢