人脸核身 App 调用 H5 兼容性配置

注意：接入前务必注意：请参见 移动 H5 意愿核身接入步骤 进行接入，如是 App 调用，务必按照 App 调用 H5 兼容性配置 进行兼容性适配，否则将影响正常使用。

一、兼容性说明

·采用达到版本要求的具有一定市场占有率的主流手机型号，测试机型共计829款。

·Android 手机测试品牌名单（按拼音排序）：HTC、OPPO、OPPO_REALME、VIVO、VIVO_IQOO、锤子-坚果、黑鲨、华硕、华为、荣耀、金立、联想、魅族、魅族-魅蓝、努比亚、努比亚-红魔、三星-GALAXY、小米、小米-红米、一加、中兴。

请按照下文兼容性配置指引进行 iOS 及 Android 手机的兼容性适配。

二、iOS 接入

iPhone 的兼容性适配，需在配置里加上摄像头和麦克风的使用权限。App 的 info.plist 中加入：

.NSMicrophoneUsageDescription .NSCameraUsageDescription

使用 WKWebView 时，需要通过 WKWebViewConfiguration 配置允许使用相机：

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

三、Android 接入

由于 Android 机器碎片化严重，用系统 WebView 调起系统摄像头完成视频录制可能存在很多兼容性问题，如部分机器出现调不起摄像头、调起摄像头无法录制视频等。因此整理了接入指引。H5 刷脸包括 trtc 和录制模式，合作方需要对这两种模式都做兼容性配置。
请合作方务必按照如下步骤顺序，实现兼容性处理：

1. 引入工具类
将 WBH5FaceVerifySDK.java 文件拷贝到项目中。该文件下载地址：人脸核身控制台（请到控制台自助接入列表页获取密码）。

2. 申请权限
在 Manifest.xml 文件中增加申请以下权限：

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

动态申请权限：

·如果第三方编译的 targetSdkVersion >= 23，则需要动态申请权限。

·如果第三方编译的 targetSdkVersion < 23，则不需要动态申请权限。

·权限代码申请处理逻辑，demo 仅供参考，合作方可根据自身业务需求自行处理。

·一定要在动态权限申请成功后，才能去调用 WBH5FaceVerifySDK的enterOldModeFaceVerify() 录制模式或 enterTrtcFaceVerify() trtc 模式体验 h5 刷脸功能。

3. 设置 WebSettings
调用 WebView.loadUrl(String url) 前一行添加如下代码设置 WebSettings。

/*** 对 WebSettings 进行设置：添加 ua 字段和适配 h5 页面布局等* @param mWebView 第三方的 WebView 对象* @param context 第三方上下文*/WBH5FaceVerifySDK.getInstance().setWebViewSettings(mWebView,getApplicationContext());

4. 重写 WebChromeClient
调用 WebView.loadUrl(String url) 前，WebView 必须调用 setWebChromeClient(WebChromeClient webChromeClient)，并重写 WebChromeClient 的如下2个函数：

/** H5意愿刷脸模式配置，这里负责处理来自H5页面发出的相机权限申请 * @param request 来自H5页面的权限请求 */ @Override public void onPermissionRequest(PermissionRequest request) { if (request!=null&&request.getOrigin()!=null&&WBH5FaceVerifySDK.getInstance().isTencentH5FaceVerify(request.getOrigin().toString())){ //通过url判断是腾讯意愿性h5刷脸的域名 this.request=request; if (activity!=null){ activity.requestCameraAndRecordPermissions(false,true);//申请相机和录音权限，申请权限的代码demo仅供参考，合作方可根据自身业务定制 } } } /** * 相机权限申请成功后，拉起H5意愿刷脸模式进行实时刷脸验证 */ public void enterWillFaceVerify(){ if (Build.VERSION.SDK_INT>Build.VERSION_CODES.LOLLIPOP){ // android sdk 21以上 if (request!=null&&request.getOrigin()!=null){ //根据腾讯域名授权，如果合作方对授权域名无限制的话，这个if条件判断可以去掉，直接进行授权即可。 Log.d(TAG,"enterTrtcFaceVerify getOrigin()!=null"); if (WBH5FaceVerifySDK.getInstance().isTencentH5FaceVerify(request.getOrigin().toString())){ //授权 request.grant(request.getResources()); request.getOrigin(); } }else { if (request==null){ Log.d(TAG,"enterTrtcFaceVerify request==null"); if (webView!=null&&webView.canGoBack()){ webView.goBack(); } } } } } // For Android >= 4.1 降级为录制模式，收到h5页面发送的录制请求 public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) { Log.d(TAG,"openFileChooser——-"); if (WBH5FaceVerifySDK.getInstance().isTencentH5FaceVerify(null,null,acceptType)){ //true 说明是腾讯的h5刷脸页面 this.uploadMsg=uploadMsg; this.acceptType=acceptType; if (activity!=null){ //申请系统的相机、录制、sd卡等权限 activity.requestCameraAndSomePermissions(true); } } } // For Lollipop 5.0+ Devices 降级为录制模式，收到h5页面发送的录制请求 @TargetApi(21) @Override public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) { Log.d(TAG,"onShowFileChooser——-"); if (WBH5FaceVerifySDK.getInstance().isTencentH5FaceVerify(webView,fileChooserParams,null)){ //true说 明是腾讯的h5刷脸页面 this.webView=webView; this.filePathCallback=filePathCallback; this.fileChooserParams=fileChooserParams; if (activity!=null){ //申请系统的相机、录制、sd卡等权限 activity.requestCameraAndSomePermissions(false); } } return true; } //降级为录制模式，拉起系统相机进行录制视频 public boolean enterOldModeFaceVerify(boolean belowApi21){ Log.d(TAG,"enterOldFaceVerify"); if (belowApi21){ // For Android < 5.0 if (WBH5FaceVerifySDK.getInstance().recordVideoForApiBelow21(uploadMsg, acceptType, activity)) { //腾讯的h5刷脸 return true; }else { // todo 合作方如果其他的h5页面处理，则再次补充其他页面逻辑 } }else { // For Android >= 5.0 if (WBH5FaceVerifySDK.getInstance().recordVideoForApi21(webView, filePathCallback, activity,fileChooserParams)) { //腾讯的h5刷脸 return true; }else { // todo 合作方如果其他的h5页面处理，则再次补充其他页面逻辑 } } return false; }

5. 重写 Activity

WebView 所属的 Activity 必须重写如下函数：

Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { Log.d(TAG, "onActivityResult ——–"+requestCode); super.onActivityResult(requestCode, resultCode, data); if (requestCode == 0x11) { //传统录制模式，收到录制模式调用系统相机录制完成视频的结果 Log.d(TAG, "onActivityResult recordVideo"); if (WBH5FaceVerifySDK.getInstance().receiveH5FaceVerifyResult(requestCode, resultCode, data)) { return; } } else if (requestCode == PERMISSION_QUEST_WILL_CAMERA_RECORD_VERIFY) { //意愿性刷脸模式，从设置界面返回。 Log.d(TAG, "onActivityResult willface cameraAndRecord"); requestCameraAndRecordPermission(); }else if (requestCode == PERMISSION_QUEST_CAMERA_RECORD_VERIFY) { //传统录制模式，从设置界面返回。 Log.d(TAG, "onActivityResult cameraAndSome"); requestCameraAndSomePermissions(false); }}

6. 权限拒绝的处理
在录制模式中，当用户点击了开始录制后，如果没有授权相机权限，会弹框让用户授权。如果用户拒绝授权的话，一定要调用下面的方法：

WBH5FaceVerifySDK.getInstance().resetReceive() //原理参考https://www.teachcourse.cn/2224.html

调用可参见 demo，文件下载地址：人脸核身控制台（请到控制台自助接入列表页获取密码）。

四、Harmony Next 接入

1. 申请权限

a.在 model.json5 文件中增加申请以下权限

"requestPermissions": [ { "name": "ohos.permission.INTERNET", }, { "name" : "ohos.permission.CAMERA", "reason": "$string:app_name", "usedScene": { "abilities": [ "EntryAbility" ], "when":"inuse" } }, { "name" : "ohos.permission.MICROPHONE", "reason": "$string:app_name", "usedScene": { "abilities": [ "EntryAbility" ], "when":"inuse" } }]

2. 创建 WebviewController

@State controller: webview.WebviewController = new webview.WebviewController();

3. 创建 Web 组件

Web({ src: 'https://kyc.qcloud.com/s/web/h5/#/entry?will=true&appId=IDALfjoD', //设置加载的意愿刷脸h5页面的url地址 controller: this.controller //给web设置controller}) .onControllerAttached(() => { this.controller.setCustomUserAgent(this.controller.getCustomUserAgent() + ';kyc/h5face;hoskyc/2.0') //设置ua }) .fileAccess(true)//web的配置，不能少 .javaScriptAccess(true)//web的配置，不能少 .domStorageAccess(true)//意愿性h5刷脸一定要添加这个配置，否则刷脸页面无法进行意愿性朗读

4. web 组件配置意愿模式

.onPermissionRequest((event) => { // 终端页面收到h5刷脸意愿模式的请求 if (event) { this.checkPermission().then(() => { //1. 终端申请相机权限成功 event.request.grant(event.request.getAccessibleResource()) // 2. 授权h5页面 }).catch((error: BusinessError) => { // 终端申请相机权限失败 console.error(TAG, "申请权限异常" + error.message) event.request.deny() //2.告诉h5页面没有权限 }) } })

注意：checkPermission() 是申请相机和麦克风权限的方法，接入方可以根据自身业务需求发挥，demo 的这个方法仅供参考。

5. web 组件配置传统录制模式

.onShowFileSelector((event) => { //终端页面收到h5刷脸传统录制模式的请求 if (event) { let result = picCamera().then(result => { //1.打开系统相机 let str: string[] = [result.resultUri] event.result.handleFileList(str) // 2. 把录制的视频传给h5页面 }).catch((error:BusinessError)=>{//打开系统相机异常 console.error(TAG,"打开相机异常"+error.message) }); } return true;})