如何用jQuery、HTML或PHP访问Android相机？WebView加载WebcamJS无显示求助

嘿，我之前在Android WebView里用WebcamJS也碰到过一模一样的问题——普通浏览器里跑的好好的，到WebView里就直接罢工。核心原因是WebView默认的权限配置、媒体API支持逻辑和普通浏览器有差异，下面给你一步步讲清楚能解决的方案和替代实现方式：

一、先搞定WebView的核心配置（Android原生端） #

不管你网页端写得再好，WebView必须开这些设置，否则相机根本调不起来：

• 必须开启JavaScript支持：WebView默认禁用JS，这是基础中的基础
• 必须处理媒体权限请求：WebView不会自动弹出权限申请，得手动写回调允许相机权限
• 启用硬件加速：部分低版本设备或老机型需要这个才能正常渲染相机画面
• 设置WebChromeClient：专门处理媒体相关的事件和权限请求

给你核心的Android Java代码片段（Kotlin逻辑类似）：

WebView webView = findViewById(R.id.webview);
WebSettings webSettings = webView.getSettings();

// 开启JS支持
webSettings.setJavaScriptEnabled(true);
// 启用硬件加速
webSettings.setHardwareAccelerated(true);
// 允许访问文件和媒体设备
webSettings.setAllowFileAccess(true);
webSettings.setAllowContentAccess(true);

// 关键：处理相机权限请求
webView.setWebChromeClient(new WebChromeClient() {
    @Override
    public void onPermissionRequest(PermissionRequest request) {
        // 直接允许相机相关的权限请求
        request.grant(request.getResources());
    }
});

// 加载你的本地网页或远程地址
webView.loadUrl("file:///android_asset/camera_page.html");

另外，一定要在AndroidManifest.xml里加相机权限：

<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />

如果是Android 6.0+系统，还要在代码里动态申请相机权限，不然WebView里的权限请求会直接被拒绝。

二、网页端实现（HTML + jQuery，替代WebcamJS） #

既然WebcamJS在WebView里兼容性拉胯，我们直接用标准的MediaDevices API——这个是HTML5原生的，Android 5.0+的WebView都支持，稳定性好很多：

基础HTML结构 #

<!DOCTYPE html>
<html>
<head>
    <title>WebView Camera Demo</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        #camera-preview {
            width: 100%;
            height: auto;
            border: 1px solid #ddd;
        }
        #capture-btn {
            margin-top: 12px;
            padding: 10px 20px;
            background: #2196F3;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        #captured-img {
            margin-top: 12px;
            max-width: 100%;
        }
    </style>
</head>
<body>
    <video id="camera-preview" autoplay playsinline></video>
    <button id="capture-btn">拍照</button>
    <canvas id="hidden-canvas" style="display: none;"></canvas>
    <img id="captured-img" alt="拍摄的照片" />

    <script>
        $(document).ready(function() {
            const video = document.getElementById('camera-preview');
            const canvas = document.getElementById('hidden-canvas');
            const captureBtn = $('#capture-btn');
            const capturedImg = $('#captured-img');

            // 初始化相机
            function initCamera() {
                // 请求后置摄像头（换成'user'就是前置）
                navigator.mediaDevices.getUserMedia({ 
                    video: { facingMode: 'environment' },
                    audio: false 
                })
                .then(stream => {
                    // 把相机流绑定到video元素
                    video.srcObject = stream;
                })
                .catch(err => {
                    alert('相机访问失败：' + err.message);
                });
            }

            // 拍照逻辑
            captureBtn.click(function() {
                // 让canvas尺寸和视频帧一致
                canvas.width = video.videoWidth;
                canvas.height = video.videoHeight;
                // 把当前视频帧画到canvas上
                canvas.getContext('2d').drawImage(video, 0, 0);
                // 转成图片显示出来
                capturedImg.attr('src', canvas.toDataURL('image/png'));

                // 如果要上传到PHP后端，把base64数据发过去
                const imageBase64 = canvas.toDataURL('image/jpeg').split(',')[1];
                $.post('upload.php', { image: imageBase64 }, function(res) {
                    alert('图片上传成功：' + res);
                });
            });

            // 页面加载完成后启动相机
            initCamera();
        });
    </script>
</body>
</html>

三、PHP后端接收上传的图片（可选） #

如果需要把拍摄的照片传到服务器，给你一个简单的PHP示例：

<?php
if (isset($_POST['image'])) {
    $imageData = base64_decode($_POST['image']);
    $fileName = 'captured_' . time() . '.jpg';
    $uploadDir = 'uploads/';

    // 确保上传目录存在且可写
    if (!is_dir($uploadDir)) {
        mkdir($uploadDir, 0777, true);
    }

    if (file_put_contents($uploadDir . $fileName, $imageData)) {
        echo $fileName;
    } else {
        echo '上传失败，请检查目录权限';
    }
}
?>

四、常见问题排查 #

• 相机黑屏/无画面：检查WebView是否开启硬件加速，或者试试把facingMode改成user（前置摄像头），有些设备后置摄像头权限可能有特殊限制
• 权限请求没弹出：确认AndroidManifest加了权限，并且动态申请了权限（Android 6.0+），WebChromeClient的onPermissionRequest是否正确实现
• 视频卡顿：可以在getUserMedia的video参数里限制分辨率，比如video: { width: 640, height: 480 }，降低性能消耗

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