接入文档
FaceID基础版
H5接入
H5界面与兼容性说明
App调用H5兼容性配置指引
App调用H5兼容性配置指引

1.需要使用https;
2.安卓,IOS 通过web-view使用需要进行一定的适配。
方案如下:

# 安卓解决方案:

Android5.0 之后的版本原生webview,app层面需要摄像机权限和麦克风权限。

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

# 网页中会实时弹出获取摄像头权限,需要在webview授权处理中允许

// 以下成员和方法放在 Activity 类中
private static final int WEB_MEDIA_PERMISSION_REQUEST = 200;
private PermissionRequest pendingMediaRequest;
private boolean mediaPermissionInFlight;

// 初始化 WebView 时调用,需在 loadUrl() 之前执行。
// 如果已有 WebChromeClient,请将这两个回调合并到现有实现中。
private void setupWebMediaPermission(WebView webView) {
    webView.setWebChromeClient(new WebChromeClient() {
        @Override
        public void onPermissionRequest(PermissionRequest request) {
            runOnUiThread(() -> requestWebMediaPermission(request));
        }

        @Override
        public void onPermissionRequestCanceled(PermissionRequest request) {
            runOnUiThread(() -> {
                if (pendingMediaRequest == request) {
                    pendingMediaRequest = null;
                }
            });
        }
    });
}

// 将网页资源映射到 Android 系统权限
private String androidPermissionFor(String resource) {
    if (PermissionRequest.RESOURCE_VIDEO_CAPTURE.equals(resource)) {
        return Manifest.permission.CAMERA;
    }
    if (PermissionRequest.RESOURCE_AUDIO_CAPTURE.equals(resource)) {
        return Manifest.permission.RECORD_AUDIO;
    }
    return null;
}

// H5 请求权限时,检查并申请缺少的系统权限
private void requestWebMediaPermission(PermissionRequest request) {
    if (isFinishing() || isDestroyed() || mediaPermissionInFlight) {
        request.deny();
        return;
    }

    List<String> missingPermissions = new ArrayList<>();
    for (String resource : request.getResources()) {
        String permission = androidPermissionFor(resource);
        if (permission != null
                && Build.VERSION.SDK_INT >= Build.VERSION_CODES.M
                && checkSelfPermission(permission)
                    != PackageManager.PERMISSION_GRANTED
                && !missingPermissions.contains(permission)) {
            missingPermissions.add(permission);
        }
    }

    pendingMediaRequest = request;
    if (missingPermissions.isEmpty()) {
        completeWebMediaPermission();
    } else {
        mediaPermissionInFlight = true;
        requestPermissions(
                missingPermissions.toArray(new String[0]),
                WEB_MEDIA_PERMISSION_REQUEST
        );
    }
}

// 接收系统授权结果
@Override
public void onRequestPermissionsResult(
        int requestCode, String[] permissions, int[] grantResults) {
    super.onRequestPermissionsResult(requestCode, permissions, grantResults);
    if (requestCode == WEB_MEDIA_PERMISSION_REQUEST) {
        mediaPermissionInFlight = false;
        completeWebMediaPermission();
    }
}

// 只向 H5 放行网页请求且系统已授权的相机、麦克风资源
private void completeWebMediaPermission() {
    PermissionRequest request = pendingMediaRequest;
    pendingMediaRequest = null;
    if (request == null) {
        return; // 网页可能已取消请求
    }

    List<String> grantedResources = new ArrayList<>();
    for (String resource : request.getResources()) {
        String permission = androidPermissionFor(resource);
        if (permission != null
                && (Build.VERSION.SDK_INT < Build.VERSION_CODES.M
                || checkSelfPermission(permission)
                    == PackageManager.PERMISSION_GRANTED)) {
            grantedResources.add(resource);
        }
    }

    if (grantedResources.isEmpty() || isFinishing() || isDestroyed()) {
        request.deny();
    } else {
        request.grant(grantedResources.toArray(new String[0]));
    }
}

// 合并到 Activity 已有的 onDestroy() 中,在销毁 WebView 前执行
@Override
protected void onDestroy() {
    if (pendingMediaRequest != null) {
        pendingMediaRequest.deny();
        pendingMediaRequest = null;
    }
    super.onDestroy();
}

# 上传类活体(视频读数、静默录制)适配说明

下载demo并根据指引配置。
demo.zip

使用其它浏览器内核需要根据相关浏览器要求进行配置。

# IOS解决方案

WebRTC在iOS上,仅支持WKWebView。

需在配置里加上摄像头和麦克风的使用权限。App 的 info.plist 中加入:

.NSMicrophoneUsageDescription   
.NSCameraUsageDescription

OC语法:

WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];  // 初始化配置对象
configuration.allowsInlineMediaPlayback = YES; // 默认是NO,这个值决定了用内嵌HTML5播放视频还是用本地的全屏控制,其中NO为使用原生全屏控制器,YES为视频内嵌播放。

// 设置为自动播放, 不需要用户采取任何手势开启播放
if (@available(iOS 10.0, *)) {
    configuration.mediaTypesRequiringUserActionForPlayback = WKAudiovisualMediaTypeNone;  //WKAudiovisualMediaTypeNone 音视频的播放不需要用户手势触发,即为自动播放,iOS 10.0+支持
} else {
    configuration.requiresUserActionForMediaPlayback = NO;
}
WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectZero configuration:configuration];

Swift语法

let configuration = WKWebViewConfiguration()  // 初始化配置对象
configuration.allowsInlineMediaPlayback = true   // 默认是false,这个值决定了用内嵌HTML5播放视频还是用本地的全屏控制

// 设置为自动播放,不需要用户采取任何手势开启播放 
if #available(iOS 10.0, *) {
    configuration.mediaTypesRequiringUserActionForPlayback = []  // WKAudiovisualMediaTypeNone 音视频的播放不需要用户手势触发,即为自动播放,iOS 10.0+支持
} else {
    configuration.requiresUserActionForMediaPlayback = false
}
let webView = WKWebView(frame: CGRect.zero, configuration: configuration)

# 鸿蒙解决方案:

1、在module.json5 中声明H5所需权限:

"requestPermissions": [
      {
        "name": "ohos.permission.INTERNET",
        "reason": "$string:EntryAbility_permission_internet",
        "usedScene": {
          "abilities": [
            "EntryAbility"
          ],
          "when": "always"
        }
      },
      // camera permisson
      {
        "name": "ohos.permission.CAMERA",
        "reason": "$string:EntryAbility_permission_camera",
        "usedScene": {
          "abilities": [
            "EntryAbility"
          ],
          "when": "always"
        }
      },
      // audio permission
      {
        "name": "ohos.permission.MICROPHONE",
        "reason": "$string:EntryAbility_permission_microphone",
        "usedScene": {
          "abilities": [
            "EntryAbility"
          ],
          "when": "always"
        }
      }
    ]

2、通过biztoken接口获取Web需要加载的url
3、在页面Component中使用Web组件

a. 加载url

b. 注册js接口回调

c. 通过onShowFileSelector使用相册/相机选择照片或拍摄视频

/**
** 通过Camera拍摄视频并获取视频uri回调
**
*/
invokeCamera(callback: (uri: string) => void) {
    const context = getContext(this) as common.UIAbilityContext;
    const pickerProfile: cameraPicker.PickerProfile = {
      cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK
    };
    cameraPicker.pick(context,
      [cameraPicker.PickerMediaType.VIDEO, cameraPicker.PickerMediaType.VIDEO], pickerProfile)
      .then((pickerResult: cameraPicker.PickerResult) => {
        if (callback && pickerResult.resultUri) {
          callback(pickerResult.resultUri);
        }
      })
      .catch((error: BusinessError) => {
        console.error(`invokeCamera failed, code: ${error.code}, message: ${error.message}`);
      });
  }


build() {
  Column() {
    Web({ src: this.url, controller: this.controller })
      .width('100%')
      .height('100%')
      .javaScriptAccess(true)
      .onShowFileSelector((event) => {
          this.invokeCamera((uri: string) => {
            event?.result.handleFileList([uri]);
          })
          return true
        })
      .onPermissionRequest((event) => {
        console.log('onPermissionRequest')
        if (event) {
          event.request.grant(event.request.getAccessibleResource())
        }
      })
  }
  .width('100%')
  .height('90%')
  .backgroundColor(Color.White)
}

# Uniapp X接入

下载demo并根据指引配置插件。

demo.zip

该文档未解决您的疑问?查看常见问题