在项目中获取摄像头权限拍照

在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 &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>

<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>