android webview 调用手机摄像头拍照上传功能（Android4.4不兼容）

在 Android 中，使用 WebView 调用手机摄像头拍照并上传照片的功能可以通过 WebView 和 JavaScript 接口实现。然而，Android 4.4 (KitKat) 及之前版本对 WebView 的支持较旧，有一些兼容性问题。下面将详细介绍如何实现这一功能，并解决 Android 4.4 的兼容性问题。

1. 功能概述

1. WebView：一个用于显示网页的组件。
2. JavaScript 接口：在 WebView 中使用 JavaScript 与原生 Android 应用进行交互。
3. 摄像头权限：申请和处理摄像头和存储的权限。
4. 拍照和上传：调用摄像头拍照并将图片上传至服务器。

2. 实现步骤

2.1 设置 WebView

首先，在 Android 项目的布局文件中定义 WebView：

xml
复制代码
<!-- res/layout/activity_main.xml -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

2.2 配置 WebView

在 Activity 中配置 WebView 并启用 JavaScript：

java
复制代码
// src/main/java/com/example/myapp/MainActivity.java
import android.Manifest;
import android.content.Intent;
import android.content.pm.PackageManager;
import android.net.Uri;
import android.os.Bundle;
import android.provider.MediaStore;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebResourceRequest;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.webkit.WebChromeClient.FileChooserParams;
import android.widget.Toast;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.app.ActivityCompat;
import androidx.core.content.ContextCompat;

public class MainActivity extends AppCompatActivity {
    private WebView webView;
    private ValueCallback<Uri[]> filePathCallback;
    private static final int FILE_CHOOSER_REQUEST_CODE = 1;
    private static final int CAMERA_REQUEST_CODE = 2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.webview);

        webView.getSettings().setJavaScriptEnabled(true);
        webView.setWebViewClient(new WebViewClient());
        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
                MainActivity.this.filePathCallback = filePathCallback;
                Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
                if (takePictureIntent.resolveActivity(getPackageManager()) != null) {
                    startActivityForResult(takePictureIntent, CAMERA_REQUEST_CODE);
                }
                return true;
            }
        });

        // JavaScript Interface
        webView.addJavascriptInterface(new WebAppInterface(), "Android");
        webView.loadUrl("file:///android_asset/index.html");
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        if (requestCode == CAMERA_REQUEST_CODE && resultCode == RESULT_OK) {
            Uri imageUri = data.getData();
            if (filePathCallback != null) {
                filePathCallback.onReceiveValue(new Uri[]{imageUri});
                filePathCallback = null;
            }
        }
        super.onActivityResult(requestCode, resultCode, data);
    }

    // JavaScript Interface
    public class WebAppInterface {
        @JavascriptInterface
        public void openCamera() {
            if (ContextCompat.checkSelfPermission(MainActivity.this, Manifest.permission.CAMERA) != PackageManager.PERMISSION_GRANTED) {
                ActivityCompat.requestPermissions(MainActivity.this, new String[]{Manifest.permission.CAMERA}, CAMERA_REQUEST_CODE);
            } else {
                Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
                if (takePictureIntent.resolveActivity(getPackageManager()) != null) {
                    startActivityForResult(takePictureIntent, CAMERA_REQUEST_CODE);
                }
            }
        }
    }

    @Override
    public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
        if (requestCode == CAMERA_REQUEST_CODE) {
            if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
                Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
                if (takePictureIntent.resolveActivity(getPackageManager()) != null) {
                    startActivityForResult(takePictureIntent, CAMERA_REQUEST_CODE);
                }
            } else {
                Toast.makeText(this, "Camera permission denied", Toast.LENGTH_SHORT).show();
            }
        }
        super.onRequestPermissionsResult(requestCode, permissions, grantResults);
    }
}

2.3 前端 HTML

在 assets 文件夹中创建一个 HTML 文件，包含一个调用 JavaScript 接口的按钮：

html
复制代码
<!-- assets/index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Camera Upload</title>
    <script type="text/javascript">
        function openCamera() {
            Android.openCamera();
        }
    </script>
</head>
<body>
    <button onclick="openCamera()">Open Camera</button>
</body>
</html>

2.4 处理 Android 4.4 的兼容性

Android 4.4 的 WebView 对文件选择的支持不如现代版本好。为了确保兼容性，使用 WebChromeClient 的 onShowFileChooser 方法可以处理文件选择器。如果遇到兼容性问题，可以考虑以下替代方案：

1. 升级 WebView：更新设备上的 WebView 组件，以确保使用最新版本。
2. 使用 WebView 的 Native API：使用 WebView 的 Native API 处理兼容性问题，或考虑使用其他解决方案来处理文件选择。

3. 总结

要在 Android 中使用 WebView 调用摄像头拍照并上传功能，需要配置 WebView、设置 JavaScript 接口以及处理 Android 4.4 的兼容性问题。步骤包括初始化 WebView、实现摄像头调用和处理权限请求、以及创建 HTML 前端与 JavaScript 接口的交互。Android 4.4 的 WebView 对文件选择的支持有限，因此可能需要对代码进行适配或升级 WebView 组件。

关键字

Android, WebView, 摄像头, JavaScript 接口, 拍照上传, Android 4.4 兼容性, WebChromeClient, ValueCallback, Intent, MediaStore, 权限请求, onShowFileChooser, 前端 HTML