antdesignpro实现调取USB摄像头拍照上传demo

1、先上效果图：

2、用我的demo之前，首先确定你的环境，只有两种环境可以访问：1、localhost；2、https

3、上代码！！！！！

import type { ProFormInstance } from '@ant-design/pro-form';
import ProCard from "@ant-design/pro-card";
import {Button, Col, message, Row} from 'antd';
import {
  ProForm,
  ProFormDatePicker,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  StepsForm,
} from '@ant-design/pro-form';
import React, {useRef, useState} from 'react';
import moment from "moment";
// import "./components/video.js"


// const [State, setState] = useState();

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

export default () => {
  const formRef = useRef<ProFormInstance>();
  let video_ref: any = useRef();
  let mediaStream:any = null;

  // 清空预览画布
  const closeCanas = () => {
    let canvas = document.getElementById("canvas");
    // @ts-ignore
    let ctx = canvas.getContext('2d');
    ctx.clearRect(0, 20, 400, 320)
  }

  //关闭摄像头
  const onCloseDevice = () => {
    //关闭
    if(mediaStream) {
      if (mediaStream.active == true) {
        let track = mediaStream.getTracks()[0];
        track.stop();
      }
    }
  }
  //获得video摄像头区域
  const getMedia = async ()=>{
    closeCanas()
    let video = video_ref.current;
    let constraints = {
      video: {width: 480, height: 320},
      audio: false
    };
    try {
      mediaStream = await navigator.mediaDevices.getUserMedia(constraints);
      video.srcObject = mediaStream;
      video.play();
    } catch (e) {
      // @ts-ignore
      // message.error(e);
      console.log(e)
    }
  }
  // getMedia()
  const takePhoto = ()=>{
    if(mediaStream){
      if(mediaStream.active == true){
        //获得Canvas对象
        let canvas = document.getElementById("canvas");
        // @ts-ignore
        let ctx = canvas.getContext('2d');
        ctx.drawImage(video_ref.current, 0, 20, 400, 320);
        toBase64()
        // onCloseDevice()
      }
      else{
        message.error("未打开设备,请先打开设备哦！")
      }
    }
    else{
      message.error("未打开设备,请先打开设备哦！")
    }
  }
  let base64Data = null;
  const toBase64 = () => {
    //获得Canvas对象
    let canvas = document.getElementById("canvas");
    //从画布上获取照片数据
    // @ts-ignore
    var imgData = canvas.toDataURL();
    //将图片转换为Base64
    base64Data = imgData.substr(22);
    console.log("base64Data:"+base64Data);
    message.success("上传成功！")
  }

  return (
    <ProCard>
      <StepsForm<{
        name: string;
      }>
        formRef={formRef}
        onFinish={async (values) => {
          await waitTime(3000);
          if(!base64Data){
            message.error('请上传图片')
            return;
          }
          values.aa = base64Data
          console.log(1111,values);

          message.success('提交成功');
          onCloseDevice()
        }}
        formProps={{
          validateMessages: {
            required: '此项为必填项',
          },
        }}
      >
        <StepsForm.StepForm<{
          name: string;
        }>
          name="base"
          title="开始入住酒店"
          stepProps={{
            description: '请选择合适的房间，并填写证件信息',
          }}
          onFinish={async () => {
            console.log(formRef.current?.getFieldsValue());
            return true;
          }}
        >


        </StepsForm.StepForm>
        <StepsForm.StepForm<{
          checkbox: string;
        }>
          name="checkbox"
          title="现场照片"
          stepProps={{
            description: '请上传旅客照片',
          }}
          onFinish={async () => {
            console.log(formRef.current?.getFieldsValue());
            return true;
          }}
        >
          <div>
            <div style={{backgroundColor: "#FFF", padding: '20px'}}>
              <Row>
                <Col span={12} key={1}>
                  <h3>实时画面:</h3>
                  <video ref={video_ref} id="video" width="400" height="320" controls>
                  </video>
                  {/*<Row style={{marginTop: "36px"}}>*/}
                  {/*  <Button type="primary" style={{marginLeft: '20px'}} onClick={getMedia}>打开设备</Button>*/}
                  {/*</Row>*/}
                  <Row style={{marginTop: "36px"}}>
                    <Button type="primary" style={{marginLeft: '20px'}} onClick={getMedia}>打开设备</Button>
                    <Button type="primary" style={{marginLeft: '20px'}} onClick={takePhoto}>拍照并上传</Button>
                    {/*<Button type="primary" style={{marginLeft: '20px'}} onClick={toBase64}>确定上传</Button>*/}
                    {/*<Button type="primary" style={{marginLeft: '20px'}} onClick={onCloseDevice}>关闭设备</Button>*/}
                    {/*<Button type="primary" style={{marginLeft: '20px'}} onClick={closeCanas}>清空预览</Button>*/}
                  </Row>
                </Col>
                <Col>
                  <div>
                    <h3>预览:</h3>
                    <canvas id="canvas" width="400" height="320" ></canvas>
                  </div>
                </Col>
              </Row>
            </div>
          </div>
          {/*<ProFormUploadButton width="sm" name="LK_ZP" label="旅客照片" max={1} rules={[{ required: true, message: "这是必填项" }]}/>*/}
        </StepsForm.StepForm>
        <StepsForm.StepForm
          name="time"
          title="提交入住"
          stepProps={{
            description: '这里填入其他信息，如车牌号等',
          }}
        >
        </StepsForm.StepForm>
      </StepsForm>
    </ProCard>
  );
};