1. Primero cargue las representaciones:
2. Antes de usar mi demostración, primero determine su entorno. Solo hay dos entornos a los que se puede acceder: 1. localhost; 2. https
3. ¡Sube el código! ! ! ! !
tipo de importación {ProFormInstance} desde '@ant-design/pro-form';
importar ProCard desde "@ant-design/pro-card";
importar {Botón, Col, mensaje, Fila} desde 'antd';
importar {
ProForm,
ProFormDatePicker,
ProFormSelect,
ProFormText,
ProFormTextArea,
StepsForm,
} desde '@ant-design/pro-form';
importar React, {useRef, useState} desde 'react';
importar momento desde "momento";
// importar "./components/video.js"
// const [Estado, setState] = useState();
const tiempo de espera = (tiempo:
export default () => {
const formRef = useRef<ProFormInstance>();
let video_ref: any = useRef();
let mediaStream:any = null;
// Borrar el lienzo de vista previa
const closeCanas = () => {
let canvas = document.getElementById("canvas");
// @ts-ignore
let ctx = canvas.getContext('2d');
ctx.clearRect(0, 20, 400, 320)
}
//Cerrar cámara
const onCloseDevice = ( ) => {
//Cerrar
if(mediaStream) {
if (mediaStream.active == true) {
let track = mediaStream.getTracks()[0];
track.stop();
}
}
}
//Obtener área de cámara de video
const getMedia = async ()=>{
closeCanas()
let video = video_ref.current;
let restricciones = {
video: {ancho: 480, alto: 320},
audio: falso
};
intente {
mediaStream = espere navigator.mediaDevices.getUserMedia(restricciones);
video.srcObject = mediaStream;
vídeo.play();
} catch (e) {
// @ts-ignore
// mensaje.error(e);
console.log(e)
}
}
// getMedia()
const takePhoto = ()=>{
if(mediaStream){
if(mediaStream.active == true){
//获得Canvas对象
let canvas = document.getElementById("canvas");
// @ts-ignorar
let ctx = canvas.getContext('2d');
ctx.drawImage(video_ref.current, 0, 20, 400, 320);
toBase64()
// onCloseDevice()
}
else{
message.error("El dispositivo no está abierto , ¡abra el dispositivo primero!")
}
}
else{
message.error("¡El dispositivo no se ha abierto, ábralo primero!")
}
}
let base64Data = null;
const toBase64 = () => {
// Obtener el objeto Canvas
let canvas = document.getElementById("canvas");
// Obtener datos de la foto del lienzo
// @ts-ignore
var imgData = canvas.toDataURL();
console. log("base64Datos:" +base64Datos);
//Convierte la imagen para Base64
base64Data = imgData.substr(22);
message.success("¡Subido correctamente!")
}
return (
<ProCard>
<StepsForm<{
nombre: cadena;
}>
formRef={formRef}
onFinish={async (valores) => {
await waitTime(3000);
if(!base64Data){
message.error('Por favor cargue una imagen')
return;
}
valores.aa = base64Data
console.log(1111,values);
message.success('Enviado correctamente');
onCloseDevice ()
}}
formProps={
{
validarMessages: {
obligatorio: 'Este elemento es obligatorio',
},
stepProps={
}}
>
<StepsForm.StepForm<{
name: string;
}>
name="base"
title="Comience a registrarse en el hotel"
stepProps={
{
descripción: 'Elija una habitación adecuada y complete la información del certificado',
}}
onFinish= {async ( ) => {
console.log(formRef.current?.getFieldsValue());
devolver verdadero;
}}
>
</StepsForm.StepForm>
<StepsForm.StepForm<{
casilla de verificación: cadena;
}>
nombre="casilla de verificación"
title="Fotos en el sitio"
descripción: 'Por favor, cargue fotos de los pasajeros',
}}
{
onFinish={async () => {
console.log(formRef.current?.getFieldsValue());
devolver verdadero;
}}
>
<div>
<div style={
{backgroundColor: "#FFF", padding: '20px'}}>
<Fila>
<Col span={12} key={1}>
<h3>实时画面:< /h3>
<video ref={video_ref} id="video" width="400" height="320" controles>
</video>
{/*<Row style={
{marginTop:
{marginTop: "36px"}}>
<Button type="primary" style={
{marginLeft: '20px'}} onClick={getMedia}>Abrir dispositivo </Button>
<Button type="primary" style={
{marginLeft: '20px'}} onClick={takePhoto}>Tomar foto y subirla</Button>
{/*<Button type="primary" style={
{ marginLeft : '20px'}} onClick={toBase64}>Aceptar para subir</Button>*/}
{/*<Button type="primary" style={
{marginLeft:'20px'}} onClick={onCloseDevice}>Cerrar dispositivo</Button>*/}
{/*<Button type="primary" style={
{marginLeft: '20px'}} onClick={closeCanas}>Borrar vista previa< /Botón>*/}
</Fila>
</Col>
<Col>
<div>
<h3>Vista previa:</h3>
<canvas id="canvas" width="400" height="320" </canvas> </div> </Col>
</Row>
<
/
div >
</div>
{/*<ProFormUploadButton width="sm" name="LK_ZP" label="Foto del pasajero" max={1} reglas={[{ obligatorio: verdadero, mensaje: "Este es un campo obligatorio" } ]}/>*/}
</StepsForm.StepsForm>
<StepsForm.StepForm
name="time"
title="Enviar registro"
stepProps={
{
descripción: 'Ingrese otra información aquí, como el número de placa, etc.', }
}
>
</StepsForm.StepForm>
</StepsForm>
</ProCard>
);
};