在React 或Vue项目中获取摄像口截图
React项目中使用react-webcam
npm命令 npm i react-webcam
yarn命令 yarn add react-webcam
使用方法
// @ts-nocheck
import myImage from '../img/640.jpg';
import ReactProfileImage from 'react-profile-image';
import Webcam from "react-webcam";
import styles from './index.less';
import React, { useState } from 'react';
export default function IndexPage() {
let [imgsrc,setimgsrc]=useState('')
const videoConstraints = {
//初始化窗口宽度和高度
width: 1280,
height: 720,
facingMode: "user"
};
//webcamRef 获取Webcam 实例对象
const webcamRef = React.useRef(null);
const capture = React.useCallback(
() => {
//getScreenshot获取转换成base64的图片数据
const imageSrc = webcamRef.current.getScreenshot();
console.log(webcamRef.current);
console.log(imageSrc);
setimgsrc(imageSrc)
},
[webcamRef]
);
const guan=()=>{
// 暂停
webcamRef.current.stopAndCleanup()
// webcamRef.current.componentWillUnmount()
}
return (
<div style={{ display: "flex" }}>
<Webcam
audio={false}
height={420}
ref={webcamRef}
screenshotFormat="image/jpeg"
width={380}
onUserMedia={(a)=>{
console.log(a);
if(imgsrc){
a.removeTrack()
}
}}
videoConstraints={videoConstraints}
/>
<button onClick={capture}>Capture photo</button>
<img src={imgsrc} alt="" />
<button onClick={()=>{
guan()
}}>暂停</button>
</div>
);
}
react-webcam npm地址
我研究了半天没有找到怎么关闭摄像头 感兴趣的可以去官网研究
知道react-webcam关闭摄像头的请在下方评论留言
Vue项目中获取摄像头截图
在Vue项目中获取摄像头权限 用的是webcamjs
npm 命令 npm i webcamjs
yarn 命令 yarn add webcamjs
使用代码如下
<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>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import { reactive, ref, watch, onMounted } from "vue";
//引入
import Webcam from "webcamjs";
//
export default {
name: 'HomeView',
components: {
HelloWorld
},
methods:{
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 + '"/>';
});
},
close_snapshot:()=>{
//关闭摄像头
Webcam.reset();
},
},
mounted(){
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>