React Native Android端WebView无法调用摄像头问题咨询

我之前踩过一模一样的坑，给你整理几个关键步骤，亲测能解决Android上React Native WebView调用摄像头的问题：

首先得在android/app/src/main/AndroidManifest.xml里添加必要的权限，还要开启明文流量（如果你的网页是HTTP的话）：

<!-- 摄像头和麦克风权限 -->
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-feature android:name="android.hardware.camera" android:required="false" />
<uses-feature android:name="android.hardware.camera.autofocus" android:required="false" />

<!-- 如果网页是HTTP，需要加这个允许明文流量 -->
<application
  ...
  android:usesCleartextTraffic="true">
  ...
</application>

在你的React Native组件里，给WebView加上必要的androidWebSettings和webChromeClient配置，重点是处理权限请求：

import React, { useEffect, useRef } from 'react';
import { WebView } from 'react-native-webview';
import { PermissionsAndroid, Platform } from 'react-native';

const CameraWebView = () => {
  const webViewRef = useRef(null);

  // 动态申请Android权限
  useEffect(() => {
    if (Platform.OS === 'android') {
      requestPermissions();
    }
  }, []);

  const requestPermissions = async () => {
    try {
      const granted = await PermissionsAndroid.requestMultiple([
        PermissionsAndroid.PERMISSIONS.CAMERA,
        PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
      ]);
      if (granted[PermissionsAndroid.PERMISSIONS.CAMERA] !== PermissionsAndroid.RESULTS.GRANTED ||
          granted[PermissionsAndroid.PERMISSIONS.RECORD_AUDIO] !== PermissionsAndroid.RESULTS.GRANTED) {
        alert('需要摄像头和麦克风权限才能正常使用');
      }
    } catch (err) {
      console.warn(err);
    }
  };

  return (
    <WebView
      ref={webViewRef}
      source={{ uri: '你的网页地址' }}
      javaScriptEnabled={true}
      domStorageEnabled={true}
      mediaPlaybackRequiresUserGesture={false} // 允许自动播放媒体（包括摄像头预览）
      allowFileAccess={true}
      allowContentAccess={true}
      androidWebSettings={{
        allowFileAccess: true,
        allowContentAccess: true,
        mediaPlaybackRequiresUserGesture: false,
        domStorageEnabled: true,
        javaScriptEnabled: true,
      }}
      webChromeClient={{
        // 处理WebView的权限请求
        onPermissionRequest: (request) => {
          const resources = request.getResources();
          if (resources.includes('android.webkit.resource.CAMERA') || resources.includes('android.webkit.resource.MICROPHONE')) {
            request.grant(resources); // 授权摄像头和麦克风权限
          } else {
            request.deny();
          }
        },
      }}
    />
  );
};

export default CameraWebView;

确保你的网页本身能正常调用摄像头，比如使用getUserMedia的代码要正确，另外：

• 如果是线上网页，必须用HTTPS（Chrome从版本47开始要求getUserMedia只能在安全环境下运行，localhost除外）
• 网页里的摄像头请求要明确指定video: true，比如：

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    const videoElement = document.getElementById('video');
    videoElement.srcObject = stream;
  })
  .catch(err => console.error('摄像头调用失败:', err));

• 检查你的React Native WebView版本，建议使用最新稳定版，旧版本可能有权限处理的bug
• 如果是Android 10及以上，还要确保没有权限被系统禁用，可以在应用设置里手动检查
• 如果你用的是自定义WebView封装，可能需要检查是否有拦截权限请求的逻辑

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