如何在Android WebView中运行含MediaDevices.getUserMedia的网页？前置摄像头不显示

作为经常处理WebView与Web API交互的开发者，我帮你梳理完整的配置流程，以及排查前置摄像头不显示的核心问题：

一、WebView运行getUserMedia的核心配置步骤 #

要让WebView支持摄像头访问，这几个关键配置一个都不能少：

1. 声明权限（AndroidManifest.xml） #

先在Manifest里添加必要权限，同时声明摄像头特性：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />

<!-- 如果需要录制音频，添加这行 -->
<uses-permission android:name="android.permission.RECORD_AUDIO" />

<uses-feature android:name="android.hardware.camera" android:required="true" />
<uses-feature android:name="android.hardware.camera.front" android:required="false" />

2. 动态申请权限（Android 6.0+） #

从Android 6.0开始，相机属于危险权限，必须在运行时主动请求：

private static final int REQUEST_CAMERA_PERMISSION = 1001;

// 初始化WebView前先检查权限
private void checkCameraPermission() {
    if (ContextCompat.checkSelfPermission(this, Manifest.permission.CAMERA)
            != PackageManager.PERMISSION_GRANTED) {
        ActivityCompat.requestPermissions(this,
                new String[]{Manifest.permission.CAMERA},
                REQUEST_CAMERA_PERMISSION);
    } else {
        initWebView();
    }
}

// 处理权限申请结果
@Override
public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
    super.onRequestPermissionsResult(requestCode, permissions, grantResults);
    if (requestCode == REQUEST_CAMERA_PERMISSION) {
        if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
            initWebView();
        } else {
            Toast.makeText(this, "需要相机权限才能使用该功能", Toast.LENGTH_SHORT).show();
        }
    }
}

3. 配置WebView核心参数 #

初始化WebView时，必须启用JavaScript、设置权限回调，并开启硬件加速：

private void initWebView() {
    WebView webView = findViewById(R.id.webview);
    WebSettings webSettings = webView.getSettings();

    // 启用JavaScript，必须项
    webSettings.setJavaScriptEnabled(true);

    // 开启硬件加速，摄像头预览依赖这个
    webView.setLayerType(View.LAYER_TYPE_HARDWARE, null);

    // Android 9+允许加载HTTP网页（如果你的网页不是HTTPS）
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
    }

    // 处理摄像头权限请求
    webView.setWebChromeClient(new WebChromeClient() {
        @Override
        public void onPermissionRequest(PermissionRequest request) {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                request.grant(request.getResources());
            }
        }
    });

    // 加载你的网页（本地资产或远程URL）
    webView.loadUrl("file:///android_asset/camera_page.html");
}

二、前置摄像头无法显示的排查与解决 #

如果配置完还是看不到前置摄像头，重点检查这几个点：

1. 前端JS是否明确指定前置摄像头 #

确保你的JavaScript代码里指定了facingMode: 'user'，否则可能默认调用后置摄像头：

async function startFrontCamera() {
    try {
        const constraints = {
            video: {
                facingMode: 'user' // 明确指定前置摄像头
            }
        };
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        const videoElement = document.getElementById('camera-preview');
        videoElement.srcObject = stream;
    } catch (error) {
        console.error("摄像头访问失败:", error);
        alert("无法访问前置摄像头，请检查权限");
    }
}

// 最好通过用户点击按钮触发，避免页面加载时自动请求
document.getElementById('start-btn').addEventListener('click', startFrontCamera);

2. 不要在页面加载时自动请求权限 #

WebView对页面加载时自动发起的权限请求可能会拦截，建议通过用户主动操作（比如点击按钮）调用getUserMedia，这样权限请求更容易通过。

3. 确认WebView版本兼容性 #

Android 7.0以下的WebView对MediaDevices.getUserMedia支持不完善，建议测试设备的WebView版本，或者引导用户更新系统WebView。

4. 检查硬件加速是否开启 #

如果关闭了硬件加速，摄像头预览会直接失效，务必确保WebView的硬件加速处于开启状态（前面配置中的setLayerType步骤）。

三、额外注意事项 #

• 如果网页是HTTPS协议，Android 9+不需要配置混合内容；如果是HTTP，必须开启MIXED_CONTENT_ALWAYS_ALLOW。
• 部分国产ROM可能对WebView的权限有额外限制，需要在系统设置中确认WebView应用的相机权限已开启。
• 测试尽量用物理设备，模拟器的摄像头模拟容易出问题。

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