Next.js中相机权限请求异常（仅Android设备受影响）

针对你基于Next.js开发的QR扫码应用在Android设备上无法触发相机权限请求的问题，以下是具体排查方向和修复方案：

核心问题分析 #

1. HTTPS强制要求：Android绝大多数浏览器（Chrome、Edge等）仅允许在HTTPS环境下调用getUserMedia，非HTTPS环境会直接阻止权限请求（localhost开发环境除外）。
2. 摄像头约束兼容性：部分Android浏览器对facingMode: "environment"的支持不完善，直接指定可能导致权限请求无响应。
3. react-webcam与手动权限请求冲突：react-webcam组件内部会自动尝试请求相机权限，和你手动调用getUserMedia的逻辑冲突，导致Android端权限流程异常。
4. 权限状态缓存：若用户曾拒绝过权限，Android浏览器会缓存该状态，后续请求不会再弹出授权窗口。

修复方案 #

1. 确保HTTPS环境 #

生产环境必须部署在HTTPS域名下，这是Android浏览器调用相机API的硬性要求。

2. 优化摄像头约束写法 #

将facingMode的写法调整为兼容模式，避免直接字符串值导致的兼容性问题：

video: {
  facingMode: { ideal: "environment" }
}

3. 移除手动权限请求逻辑，依赖react-webcam的内置机制 #

react-webcam本身提供了权限状态的回调，无需手动调用getUserMedia，避免冲突：

• 使用组件的onUserMedia和onUserMediaError回调来处理权限状态
• 移除自定义的requestCameraPermission函数，直接通过组件加载触发权限请求

4. 引导用户处理权限缓存 #

当权限请求失败时，明确提示用户前往浏览器设置手动开启相机权限，因为缓存的拒绝状态不会触发授权弹窗。

修改后的完整代码 #

import { useState, useRef, useCallback } from "react";
import Webcam from "react-webcam";
import jsQR from "jsqr";
import axios from "axios";

export default function Home() {
  const [qrData, setQrData] = useState("");
  const [cameraPermission, setCameraPermission] = useState(null);
  const [responseMessage, setResponseMessage] = useState("");
  const [loading, setLoading] = useState(false);
  const webcamRef = useRef(null);
  const apiUrl = "https://example.com/api";

  // 处理权限成功回调
  const handleUserMedia = () => {
    setCameraPermission(true);
  };

  // 处理权限失败回调
  const handleUserMediaError = (error) => {
    console.error("Camera access denied:", error);
    setCameraPermission(false);
    alert("请在浏览器设置中手动开启相机权限后重试。");
  };

  // 捕获并扫描QR码
  const captureAndScanQRCode = useCallback(async () => {
    const video = webcamRef.current.video;
    if (!video) return;

    const canvas = document.createElement("canvas");
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    const ctx = canvas.getContext("2d");
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const code = jsQR(imageData.data, imageData.width, imageData.height);

    if (code) {
      setQrData(code.data);
      console.log("Code scanned:", code.data);

      try {
        setLoading(true);
        const response = await axios.post(`${apiUrl}/check-qr`, {
          qrData: code.data,
        });
        setResponseMessage(response.data.message);
      } catch (error) {
        console.error("Error sending data:", error);
        setResponseMessage("验证QR码失败。");
      } finally {
        setLoading(false);
      }
    } else {
      alert("未检测到QR码，请确保二维码清晰后重试。");
    }
  }, [webcamRef]);

  return (
    <div className="flex flex-col items-center justify-center gap-4 w-full h-dvh relative px-4">
      <h1 className="text-3xl font-bold">扫描QR门票</h1>

      {cameraPermission === null ? (
        <button
          onClick={() => webcamRef.current?.start()}
          className="bg-neutral-200 text-black rounded-lg px-4 py-1 max-w-lg w-full"
        >
          开启相机权限
        </button>
      ) : cameraPermission ? (
        <>
          <Webcam
            audio={false}
            ref={webcamRef}
            screenshotFormat="image/jpeg"
            width={384}
            className="rounded-2xl aspect-square object-cover sm:w-96 w-full"
            videoConstraints={{
              facingMode: { ideal: "environment" }
            }}
            onUserMedia={handleUserMedia}
            onUserMediaError={handleUserMediaError}
          />
          <button
            onClick={captureAndScanQRCode}
            className="bg-black text-white rounded-xl px-2 py-2 mt-4 aspect-square object-cover flex items-center justify-center"
          >
            <svg
              width="800px"
              height="800px"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              className="w-10 h-10 inline-block"
            >
              <path
                d="M12 16C13.6569 16 15 14.6569 15 13C15 11.3431 13.6569 10 12 10C10.3431 10 9 11.3431 9 13C9 14.6569 10.3431 16 12 16Z"
                stroke="#ffffff"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
              <path
                d="M3 16.8V9.2C3 8.0799 3 7.51984 3.21799 7.09202C3.40973 6.71569 3.71569 6.40973 4.09202 6.21799C4.51984 6 5.0799 6 6.2 6H7.25464C7.37758 6 7.43905 6 7.49576 5.9935C7.79166 5.95961 8.05705 5.79559 8.21969 5.54609C8.25086 5.49827 8.27836 5.44328 8.33333 5.33333C8.44329 5.11342 8.49827 5.00346 8.56062 4.90782C8.8859 4.40882 9.41668 4.08078 10.0085 4.01299C10.1219 4 10.2448 4 10.4907 4H13.5093C13.7552 4 13.8781 4 13.9915 4.01299C14.5833 4.08078 15.1141 4.40882 15.4394 4.90782C15.5017 5.00345 15.5567 5.11345 15.6667 5.33333C15.7216 5.44329 15.7491 5.49827 15.7803 5.54609C15.943 5.79559 16.2083 5.95961 16.5042 5.9935C16.561 6 16.6224 6 16.7454 6H17.8C18.9201 6 19.4802 6 19.908 6.21799C20.2843 6.40973 20.5903 6.71569 20.782 7.09202C21 7.51984 21 8.0799 21 9.2V16.8C21 17.9201 21 18.4802 20.782 18.908C20.5903 19.2843 20.2843 19.5903 19.908 19.782C19.4802 20 18.9201 20 17.8 20H6.2C5.0799 20 4.51984 20 4.09202 19.782C3.71569 19.5903 3.40973 19.2843 3.21799 18.908C3 18.4802 3 17.9201 3 16.8Z"
                stroke="#ffffff"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </button>
          {loading ? (
            <div className="loader"></div>
          ) : responseMessage === "Used-successfully" ? (
            <div className="absolute top-0 left-0 w-full h-dvh flex flex-col items-center justify-center bg-[#00000030] backdrop-blur-md">
              <button
                onClick={() => {
                  setResponseMessage(null);
                  setQrData(null);
                }}
                className="absolute top-4 right-4 bg-black text-white text-sm px-4 py-1 rounded-lg"
              >
                关闭
              </button>
              <div className="min-w-96 bg-[#eceeec] rounded-3xl p-4 flex items-center justify-center flex-col">
                <p>✅ 用户可进入活动</p>
              </div>
            </div>
          ) : responseMessage === "Used-previously" ? (
            <div className="absolute top-0 left-0 w-full h-dvh flex flex-col items-center justify-center bg-[#00000030] backdrop-blur-md">
              <button
                onClick={() => {
                  setResponseMessage(null);
                  setQrData(null);
                }}
                className="absolute top-4 right-4 bg-black text-white text-sm px-4 py-1 rounded-lg"
              >
                关闭
              </button>
              <div className="min-w-96 bg-[#eceeec] rounded-3xl p-4 flex items-center justify-center flex-col">
                <p>❌ 用户无法进入活动</p>
              </div>
            </div>
          ) : (
            <p>{responseMessage}</p>
          )}
        </>
      ) : (
        <p>请开启相机权限以使用此功能。</p>
      )}
    </div>
  );
}

额外验证步骤 #

• 在Android设备上测试时，确保使用最新版本的Chrome或Edge浏览器
• 若仍无响应，进入浏览器设置 -> 网站权限 -> 相机，手动授权你的网站
• 开发环境下使用localhost测试，生产环境必须部署HTTPS

内容的提问来源于stack exchange，提问作者Saeed Khaled