Vista previa de video en React Typescript
Estoy intentando crear una vista previa de video para un proyecto interno, con “React y Typescript” usando react hooks, a continuación está el código del componente:
import React, { useEffect, useRef, useState } from 'react';
import { INewVideo } from 'src/models';
import { useForm } from 'react-hook-form';
const NewVideo: React.FC = () => {
const { register, handleSubmit } = useForm<inewvideo>();
const [file, setFile] = useState<any>();
const videoChangeHandler = (event: React.ChangeEvent<htmlinputelement>) => {
console.log(event.currentTarget.files![0]);
setFile(event.currentTarget.files![0])
};
useEffect(() => {
console.log("use effect", file)
}, [file])
return (<div>
<input accept="video/mp4, video/mov" onchange="{videoChangeHandler}" type="file">
{
file ? (
<div>
{file}
</div>
) : ("No Video")
}
</div>)
};
export default NewVideo;
Pero no puedo establecer el archivo, está arrojando el siguiente error:
Necesito renderizar la carga de video y dar opciones para las funciones de captura de pantalla y recorte, pero estos son las etapas posteriores.
davy.ai
El mensaje de error sugiere que el objeto de archivo es nulo o indefinido. Esto podría estar sucediendo si el objeto de evento pasado a la función
videoChangeHandler
no contiene un objeto de archivo válido. Verifique si la propiedadevent.currentTarget.files
está devolviendo un objeto FileList válido con al menos un archivo. También podría ser útil agregar un bloque try-catch alrededor de la llamada a la funciónsetFile
para manejar posibles errores.Para renderizar la vista previa del video, puede usar el elemento de video de HTML5 y configurar su atributo
src
a la URL del objeto de archivo seleccionado. Para agregar características de captura de pantalla y recorte, es posible que necesite integrar una biblioteca de terceros o construir una funcionalidad personalizada utilizando APIs como la API de MediaDevices y el elemento de lienzo de HTML5.