App 内集成 H5 移动端 SDK 兼容性配置

在移动应用（App）中集成金融级实人认证 H5 移动端 SDK 时，可能会因为内嵌浏览器（WebView）版本、内置权限等原因而无法兼容。本文旨在介绍如何在 App 配置 WebView 使用相机设备、允许网页视频播放等权限，以减少与 H5 移动端 SDK 兼容性问题。

Android 配置

由于 Android 生态碎片化严重，App 内使用 Android 原生 Webview 调起系统摄像头可能存在一些兼容性问题，例如摄像头被拒绝，重新授权无法唤起刷脸页面等。以下是关于如何解决这些兼容性问题的步骤。

1. 在 AndroidManifest.xml 文件声明以下权限。

<!--应用访问相机权限。-->
<uses-permission android:name="android.permission.CAMERA" />
<!--应用访问网络权限。-->
<uses-permission android:name="android.permission.INTERNET" />

2. 设置 Webview。

   1. 重写onPermissionRequest()方法，允许网页申请权限弹窗回调。

      对于基于 WebView 的网页应用，由于权限管理是由浏览器负责，用户访问 H5 网页调用摄像头时，如果用户拒绝了该权限请求，用户再次打开网页调用摄像头时，默认提示拒绝访问。因此您可以通过重写onPermissionRequest()方法，自定义处理网页权限请求。示例如下：

      webView.setWebChromeClient(new WebChromeClient(){
          @Override
          public void onPermissionRequest(PremissionRequest request) {
              if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                  // 检查当前设备系统版本是否在Android 5.0及以上
                  // 如果是，则直接授予网页请求的所有权限。示例仅供参考，请根据实际情况重写。
                  request.grant(request.getResources());
              }
          }
      })

   2. 设置 WebView 允许网页视频自动播放。

      // 允许自动播放
      webView.getSettings().setMediaPlaybackRequiresUserGesture(false);

iOS 配置

1. 在 Info.plist 中声明访问设备的摄像头权限。

   .NSCameraUsageDescription

2. 设置 Webview。

   1. 通过WKWebViewConfiguration类配置允许使用相机。

      WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
      config.allowsInlineMediaPlayback = YES;

   2. 设置允许网页视频自动播放以及网页内播放。

      swift

   // 允许视频自动播放
   let myAudiovisualMediaType: WKAudiovisualMediaTypes = []
   config.mediaTypesRequiringUserActionForPlayback = myAudiovisualMediaType;
   
   // 允许视频在网页内播放（非全屏播放）
   config.allowsInlineMediaPlayback = true;

   Object C

   // 允许视频自动播放
   config.mediaTypesRequiringUserActionForPlayback = WKAudiovisualMediaTypeNone;
   
   // 允许视频在网页内播放（非全屏播放）
   config.allowsInlineMediaPlayback = YES;

鸿蒙 App 配置

1. 在 module.json5 中声明访问设备的摄像头权限。

{
  "module": {
    "name": "entry",
    "type": "entry",
    "mainElement": "CameraWebViewPage",
    "deviceTypes": ["phone"],
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ets",
        "exported": true,
        "skills": [
          {
            "entities": ["entity.system.home"],
            "actions": ["action.system.home"]
          }
        ]
      }
    ],
    "requestPermissions": [
      {
        "name": "ohos.permission.CAMERA",
        "reason": "用于网页调用摄像头"
      },
      {
        "name": "ohos.permission.INTERNET",
        "reason": "用于加载网页"
      }
    ]
  }
}

2. 设置允许网页视频自动播放以及网页内播放。

import { webview } from '@kit.ArkWeb';
import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct CameraWebViewPage {
  controller: webview.WebviewController = new webview.WebviewController();

  // 处理WebView权限请求
  handlePermissionRequest(event: webview.PermissionRequest) {
    console.info('权限请求资源:', event.request.getAccessibleResource());

    // 检查是否是摄像头权限
    const resources = event.request.getAccessibleResource();
    const isCameraRequest = resources.includes('camera') ||
                           resources.includes('Camera') ||
                           resources.some(res => res.toLowerCase().includes('camera'));

    // 弹出询问对话框
    promptAction.showDialog({
      title: '权限请求',
      message: isCameraRequest ?
        '网页请求使用摄像头进行活体检测，是否允许？' :
        '网页请求使用' + resources.join(',') + '，是否允许？',
      buttons: [
        {
          text: '拒绝',
          color: '#FF0000'
        },
        {
          text: '允许',
          color: '#007DFF'
        }
      ]
    }).then((result) => {
      console.info('用户选择:', result.index, result.text);

      if (result.index === 1) {
        // 用户点击"允许"
        event.request.grant(resources);
        promptAction.showToast({
          message: '已授权',
          duration: 2000
        });
      } else {
        // 用户点击"拒绝"或关闭弹窗
        event.request.deny();
        if (result.index === 0) {
          promptAction.showToast({
            message: '已拒绝',
            duration: 2000
          });
        }
      }
    }).catch((error) => {
      console.error('弹窗显示失败:', error);
      // 默认拒绝
      event.request.deny();
    });
  }

  build() {
    Column() {
      // 加载网页
      Web({
        src: '你的https网页地址',
        controller: this.controller
      })
      // 关键：监听权限请求并弹窗询问
      .onPermissionRequest((event) => {
        if (event) {
          console.info('收到权限请求事件');
          this.handlePermissionRequest(event);
        }
      })
      // 调试：打印H5控制台日志
      .onConsole((event) => {
        console.info('H5日志:', event.message);
      })
      // 必须启用JavaScript
      .javaScriptAccess(true)
      // 监听页面加载状态
      .onPageBegin(() => {
        console.info('页面开始加载');
      })
      .onPageEnd(() => {
        console.info('页面加载完成');
      })
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
  }
}

2.问题反馈

反馈问题时请附加页面截图/视频、请求入参回参等关键信息。