如何在Next.js中实现点击按钮请求音视频权限？

你的代码里页面加载时自动触发权限请求的原因是空依赖的useEffect——它会在组件挂载时立即调用requestPermission。要实现点击按钮才请求权限，只需移除这个自动执行的useEffect即可。

修改后的完整代码 #

<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">İzin ver</span> 
   <FontAwesomeIcon icon={faVideoCamera} />
</button>

// Permissions
const requestPermission = useCallback(async () => {
  console.log("bu func. calisti");

  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true,
    });
    webcamRef.current.srcObject = stream;
    setPermissionGranted(true);
  } catch (error) {
    if (!hideQuestion) {
      console.error("Webcam ve mikrofon izni reddedildi:", error);
      toast.warn("Lütfen Webcam İzinlerini Veriniz...");
    }
    setPermissionGranted(false);
  }
}, [hideQuestion]);

// 移除这个自动调用的useEffect即可
// useEffect(() => {
//   requestPermission();
// }, []);

关键说明 #

• 移除空依赖的useEffect后，requestPermission只会在按钮被点击时触发，完全符合需求。
• 保留useCallback的依赖[hideQuestion]是正确的，因为函数内部用到了这个状态值，确保状态更新时函数能获取到最新值。

内容的提问来源于stack exchange，提问作者Enes Taha Sarı