peworkshop/components/QRScanner.js

"use client";
import { useState, useEffect } from "react";
import { Scanner } from "@yudiel/react-qr-scanner";

export default function QRScanner({ onScan, width = 300, height = 300 }) {
  const [error, setError] = useState(null);
  const [isSecureContext, setIsSecureContext] = useState(true);
  const [initialized, setInitialized] = useState(false);

  // Check if we're in a secure context
  useEffect(() => {
    // Check if we're in a secure context (https or localhost)
    const secure = window.isSecureContext;
    setIsSecureContext(secure);

    // Check if camera can be accessed
    async function checkCameraAccess() {
      try {
        const devices = await navigator.mediaDevices.enumerateDevices();
        const videoDevices = devices.filter(
          (device) => device.kind === "videoinput"
        );

        if (videoDevices.length === 0) {
          setError(
            "No camera detected. Please make sure your device has a camera."
          );
        }

        setInitialized(true);
      } catch (err) {
        console.error("Error checking camera devices:", err);
        setError(`Camera initialization error: ${err.message}`);
        setInitialized(true);
      }
    }

    checkCameraAccess();
  }, []);

  const handleDecode = (result) => {
    if (onScan && result) {
      onScan(result);
    }
  };

  const handleError = (error) => {
    console.error("QR Scanner error:", error);

    // More descriptive error messages
    let errorMessage = "Camera access error. ";

    if (!isSecureContext) {
      errorMessage +=
        "Your browser requires HTTPS for camera access. When running locally, use http://localhost instead of your IP address.";
    } else if (
      error.name === "NotAllowedError" ||
      error.name === "PermissionDeniedError"
    ) {
      errorMessage +=
        "Camera permission denied. Please allow camera access in your browser settings.";
    } else if (
      error.name === "NotFoundError" ||
      error.name === "DevicesNotFoundError"
    ) {
      errorMessage +=
        "No camera found. Please ensure your device has a working camera.";
    } else if (
      error.name === "NotReadableError" ||
      error.name === "TrackStartError"
    ) {
      errorMessage +=
        "Camera is already in use by another application or encountered a hardware error.";
    } else {
      errorMessage += `${
        error.message ||
        "Please check your camera permissions and refresh the page."
      }`;
    }

    setError(errorMessage);
  };

  if (!isSecureContext) {
    return (
      <div className="qr-scanner">
        <div className="qr-error">
          <p>Camera access requires a secure context (HTTPS or localhost).</p>
          <p>
            When running locally, use http://localhost:3000 instead of your
            network IP.
          </p>
        </div>
      </div>
    );
  }

  if (!initialized) {
    return (
      <div className="qr-scanner">
        <div className="scanner-loading">Initializing camera...</div>
      </div>
    );
  }

  return (
    <div className="qr-scanner">
      {error && (
        <div className="qr-error">
          <p>{error}</p>
        </div>
      )}

      <div className="scanner-container" style={{ width, height }}>
        <Scanner
          onResult={handleDecode}
          onError={handleError}
          constraints={{
            facingMode: "environment",
            width: { min: 640, ideal: 1280, max: 1920 },
            height: { min: 480, ideal: 720, max: 1080 },
          }}
          containerStyle={{
            width: "100%",
            height: "100%",
            borderRadius: "8px",
            overflow: "hidden",
          }}
          videoStyle={{
            objectFit: "cover",
            width: "100%",
            height: "100%",
          }}
        />
      </div>

      <style jsx>{`
        .qr-scanner {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
        }

        .qr-error {
          color: red;
          margin-bottom: 10px;
          text-align: center;
          padding: 8px;
          background-color: #ffebee;
          border-radius: 4px;
          width: 100%;
        }

        .scanner-loading {
          text-align: center;
          padding: 12px;
          background-color: #e8f5e9;
          border-radius: 8px;
          width: 100%;
          margin-bottom: 15px;
        }

        .scanner-container {
          position: relative;
          width: 100%;
          max-width: ${width}px;
          height: ${height}px;
          border-radius: 8px;
          overflow: hidden;
          border: 2px solid #ddd;
          background-color: #f5f5f5;
        }
      `}</style>
    </div>
  );
}