Spaces:
Sleeping
Sleeping
File size: 2,873 Bytes
9a9d08c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
import React, { useEffect, useRef } from "react";
interface VideoWrapperProps {
width?: string | number;
height?: string | number;
className?: string;
handleNextStep: () => void; // Function to handle the next step
setImage: (imageDataUrl: string) => void; // Function to set the image data URL
}
const DarkVideoWrapper: React.FC<VideoWrapperProps> = ({
width,
height,
className,
handleNextStep,
setImage,
}) => {
const videoRef = useRef<HTMLVideoElement | null>(null);
const canvasRef = useRef<HTMLCanvasElement | null>(null);
useEffect(() => {
const startCamera = async () => {
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: true,
});
if (videoRef.current) {
videoRef.current.srcObject = stream;
}
} catch (error) {
console.error("Erreur lors de l'accès à la caméra :", error);
}
};
startCamera();
return () => {
if (videoRef.current) {
const stream = videoRef.current.srcObject as MediaStream;
if (stream) {
const tracks = stream.getTracks();
tracks.forEach((track) => track.stop());
}
}
};
}, []);
const captureImage = async () => {
const canvas = canvasRef.current;
const video = videoRef.current;
if (canvas && video) {
const context = canvas.getContext("2d");
if (context) {
canvas.width = video.videoWidth; // Width of the video
canvas.height = video.videoHeight; // Height of the video
context.drawImage(video, 0, 0, canvas.width, canvas.height); // Draw the video on the canvas
return canvas.toDataURL("image/png"); // Return the image as a Data URL
}
}
};
return (
<>
<div
className={`relative shadow-blue-200 ${className}`}
style={{
width,
height,
backgroundColor: "black",
display: "flex",
justifyContent: "center",
alignItems: "center",
overflow: "hidden",
}}
>
<video
ref={videoRef}
autoPlay
muted
style={{
display: "block",
width: "100%",
height: "100%",
objectFit: "cover",
}}
/>
<canvas ref={canvasRef} style={{ display: "none" }} />{" "}
{/* Hidden canvas */}
</div>
<button
onClick={async () => {
const imageDataUrl = await captureImage(); // Capture the image
setImage(imageDataUrl ?? ""); // Set the captured image
handleNextStep(); // Proceed to the next step
}}
className="bg-blue-600 transition text-white rounded-2xl text-xl hover:bg-gray-800 mt-16 w-40 h-16"
>
Continue
</button>
</>
);
};
export default DarkVideoWrapper;
|