const video = document.getElementById("video"); const canvas = document.getElementById("canvas"); const output = document.getElementById("output"); let currentFacingMode = "environment"; // Default to back-facing camera let stream = null; async function startCamera() { try { // Stop any existing stream if (stream) { stream.getTracks().forEach((track) => track.stop()); } const constraints = { video: { facingMode: currentFacingMode, width: { ideal: 1280 }, height: { ideal: 720 }, }, }; stream = await navigator.mediaDevices.getUserMedia(constraints); video.srcObject = stream; video.play(); console.log("Camera started successfully."); } catch (err) { console.error("Error accessing the camera:", err); if (err.name === "NotAllowedError") { alert("Camera access denied. Please allow camera permissions."); } else if (err.name === "NotFoundError") { alert("No camera found. Please connect a camera."); } else { alert("An unexpected error occurred while accessing the camera."); } } } document.getElementById("flipCamera").addEventListener("click", () => { currentFacingMode = currentFacingMode === "user" ? "environment" : "user"; startCamera(); }); document.getElementById("capture").addEventListener("click", () => { if (!video.srcObject) { alert("Camera is not active. Please check your permissions or reload the page."); console.error("Camera feed not available."); return; } const context = canvas.getContext("2d"); canvas.width = video.videoWidth; canvas.height = video.videoHeight; context.drawImage(video, 0, 0, canvas.width, canvas.height); canvas.toBlob((blob) => { output.textContent = "Image captured. Ready for further processing."; console.log("Image captured successfully."); }, "image/png"); }); startCamera();