Telegram小程序摄像头权限无法保存问题求助

核心原因 #

Telegram移动端的WebView环境和桌面端浏览器机制不同，默认不会持久化保存媒体权限的选择记录，每次打开小程序都会重置权限状态，导致getUserMedia每次调用都会触发权限弹窗。

解决方案 #

1. 先查询权限状态，避免无意义请求 #

使用navigator.permissions.query接口提前获取摄像头、麦克风的权限状态，仅当权限未授权时发起请求，已授权则直接调用媒体流。

2. 用本地存储记录授权状态兜底 #

部分移动端WebView对navigator.permissions支持有限，可借助localStorage记录用户已授权的状态，下次启动时优先读取该状态，减少重复请求。

修改后的代码示例 #

const myVideoRef = useRef<HTMLVideoElement>(null);

useEffect(() => {
  const initCamera = async () => {
    try {
      // 优先查询系统权限状态
      let videoGranted = false;
      let audioGranted = false;
      try {
        const videoPerm = await navigator.permissions.query({ name: 'camera' as PermissionName });
        const audioPerm = await navigator.permissions.query({ name: 'microphone' as PermissionName });
        videoGranted = videoPerm.state === 'granted';
        audioGranted = audioPerm.state === 'granted';
      } catch (permErr) {
        // 权限查询不支持时跳过
      }

      if (videoGranted && audioGranted) {
        // 已有权限，直接获取流
        const currentStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
        myVideoRef.current?.srcObject = currentStream;
        return;
      }

      // 检查本地存储的授权记录
      const savedGranted = localStorage.getItem('media_perm_granted');
      if (savedGranted === 'true') {
        // 尝试直接获取流，失败则重新请求
        try {
          const currentStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
          myVideoRef.current?.srcObject = currentStream;
        } catch (streamErr) {
          const currentStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
          myVideoRef.current?.srcObject = currentStream;
          localStorage.setItem('media_perm_granted', 'true');
        }
      } else {
        // 首次请求权限，成功后记录状态
        const currentStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
        myVideoRef.current?.srcObject = currentStream;
        localStorage.setItem('media_perm_granted', 'true');
      }
    } catch (err) {
      console.error("Camera access error:", err);
    }
  };
  initCamera();
}, []);

...

<video ref={myVideoRef} autoPlay muted playsInline />

额外注意事项 #

• 若用户在系统设置中手动取消权限，本地存储的记录会失效，此时仍会触发权限请求，这是符合安全逻辑的正常行为。
• 确保小程序运行在HTTPS环境下，Telegram要求小程序必须使用HTTPS，否则媒体权限API可能无法正常工作。

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