Expo Web应用在iOS和Android浏览器中未请求相机权限的问题求助

核心原因 #

移动浏览器对媒体权限有严格的安全限制：

• 必须在HTTPS安全上下文（localhost开发环境除外）下才能请求相机权限，HTTP环境会直接拒绝请求。
• 权限请求必须由用户主动交互触发（比如点击按钮），页面加载时自动发起的请求会被浏览器拦截，不会弹出权限弹窗。

具体解决方案 #

1. 确保Web环境为HTTPS

• 开发阶段：使用expo start --web默认的localhost地址（http://localhost:19006）是允许权限请求的，无需额外配置。
• 生产部署：必须将项目部署到HTTPS协议的服务器上，否则移动浏览器会直接拒绝相机权限请求。

2. 改为用户交互触发权限请求

将权限请求从页面加载时的useEffect移到用户点击事件中，比如添加一个“打开相机”按钮：

import { Camera, CameraType } from 'expo-camera'
import { useState } from 'react'
import { Button, View, Text } from 'react-native'

export default function CameraScreen() {
  const [hasPermission, setHasPermission] = useState(null)
  const [cameraVisible, setCameraVisible] = useState(false)
  const [type, setType] = useState(CameraType.back)
  const [camera, set_camera] = useState(null)

  const requestCameraPermission = async () => {
    const { status } = await Camera.requestCameraPermissionsAsync()
    setHasPermission(status === 'granted')
    if (status === 'granted') {
      setCameraVisible(true)
    }
  }

  return (
    <View style={{ flex: 1 }}>
      {hasPermission === null ? (
        <Button title="打开相机" onPress={requestCameraPermission} />
      ) : hasPermission === false ? (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>相机权限已被拒绝，请前往设置开启权限</Text>
          <Button title="重新请求权限" onPress={requestCameraPermission} />
        </View>
      ) : cameraVisible ? (
        <Camera 
          ref={set_camera} 
          type={type} 
          style={{ flex: 1 }}
        />
      ) : (
        <Button title="打开相机" onPress={requestCameraPermission} />
      )}
    </View>
  )
}

3. 原生API兼容兜底（可选）

如果expo-camera的Web适配仍有问题，可以直接调用浏览器原生API先验证权限流程：

const requestCameraPermission = async () => {
  try {
    // 先通过浏览器API请求权限
    const stream = await navigator.mediaDevices.getUserMedia({ video: true })
    // 权限获取成功后关闭临时流，避免占用相机
    stream.getTracks().forEach(track => track.stop())
    // 同步expo-camera的权限状态
    const { status } = await Camera.requestCameraPermissionsAsync()
    setHasPermission(status === 'granted')
    if (status === 'granted') {
      setCameraVisible(true)
    }
  } catch (err) {
    console.error('权限请求失败:', err)
    setHasPermission(false)
  }
}

4. 处理用户手动拒绝的情况

如果用户之前手动拒绝过相机权限，浏览器会记住该选择，后续请求会直接被拒绝。需要提示用户前往浏览器设置，重置相机权限后再尝试。

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