40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import Webcam from "react-webcam";
|
|
import { useRef, useState } from "react";
|
|
import React from "react";
|
|
import uploadAzure from "../scripts/uploadAzure";
|
|
|
|
const CustomWebcam = () => {
|
|
const webcamRef = useRef(null);
|
|
const [imgSrc, setImgSrc] = useState(null);
|
|
const isCapture = useState(false)
|
|
const capture = React.useCallback(() => {
|
|
if (webcamRef.current != null) {
|
|
const imageSrc = webcamRef.current.getScreenshot();
|
|
setImgSrc(imageSrc);
|
|
isCapture[1](true)
|
|
}
|
|
}, [webcamRef]);
|
|
|
|
return (
|
|
<div className="webcam-container">
|
|
{imgSrc ? (
|
|
<img src={imgSrc} alt="webcam"/>
|
|
) : (
|
|
<Webcam height={600} width={600} ref={webcamRef} />
|
|
)}
|
|
<div className="button-container">
|
|
<button onClick={capture}>Capture photo</button>
|
|
</div>
|
|
{/* if isCapture is true, show button to upload to Azure */}
|
|
{isCapture[0] ? (
|
|
<div className="button-container">
|
|
<button onClick={uploadAzure}>Upload to Azure</button>
|
|
</div>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CustomWebcam |