When the button is clicked, I want to set permissions. This is how I'd like the scenario to play out: first, the method works initially and allows permission when the button is pressed.
Here is my code:
<button
onClick={requestPermission}
className=" ring-1 hover:bg-blue-500 transition-all duration-300 active:bg-blue-600 rounded-lg px-4 py-2 text-xl font-semibold text-white bg-blue-700 flex items-center " >
<span className="mr-4">Allow Permission</span>{" "}
<FontAwesomeIcon icon={faVideoCamera} />
</button>
// Permissions
const requestPermission = useCallback(async () => {
console.log("This function ran.");
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: true,
audio: true,
});
webcamRef.current.srcObject = stream;
setPermissionGranted(true);
} catch (error) {
if (!hideQuestion) {
console.error("Webcam and microphone permissions denied:", error);
toast.warn("Please Grant Webcam Permissions...");
}
setPermissionGranted(false);
}
}, [hideQuestion]);
useEffect(() => {
requestPermission();
}, []);