flutter_inappwebview无法加载应用内视频会议站点报错修复

在自研应用中使用flutter_inappwebview组件加载视频会议站点时，其余所有URL地址均可正常加载访问，仅加载视频会议链接时抛出如下日志：

I/BpBinder(22456): onLastStrongRef automatically unlinking death recipients: <uncached descriptor>
I/BufferQueueProducer(22456): [SurfaceTexture-0-22456-15](id:57b80000000f,api:1,p:718,c:22456) connect(): api=1 producerControlledByApp=false
D/EgretLoader(22456): EgretLoader(Context context)
D/EgretLoader(22456): The context is not activity
D/DecorView(22456): createDecorCaptionView windowingMode:1 mWindowMode 1 isFullscreen: true
D/ViewRootImpl[MainActivity](22456): hardware acceleration = true , fakeHwAccelerated = false, sRendererDisabled = false, forceHwAccelerated = false, sSystemRendererDisabled = false
I/InputTransport(22456): Create ARC handle: 0xb400007ef868c340
W/ContentCatcher(22456): Failed to notify a WebView
E/GPUAUX  (22456): [AUX]GuiExtAuxCheckAuxPath:630: Null anb

• 视频会议站点强依赖WebRTC、摄像头/麦克风权限、硬件视频解码能力，默认flutter_inappwebview配置未开放对应权限、未开启音视频适配参数，会导致页面加载中断
• 日志中E/GPUAUX [AUX]GuiExtAuxCheckAuxPath:630: Null anb为硬件加速渲染适配异常，是WebView渲染视频流时Surface绑定冲突导致
• W/ContentCatcher: Failed to notify a WebView是部分定制ROM对第三方WebView的内容捕获拦截，音视频场景下触发概率极高

1. Android端清单配置调整 #

打开android/app/src/main/AndroidManifest.xml文件，做如下修改：

• 在<application>标签添加硬件加速属性：

<application
  android:hardwareAccelerated="true"
  <!-- 其余原有属性保留 -->
>

• 在承载WebView的<activity>标签添加配置，避免页面旋转、输入法弹出时WebView重建：

<activity
  android:name=".MainActivity"
  android:configChanges="orientation|screenSize|keyboardHidden|keyboard|navigation"
  android:windowSoftInputMode="adjustResize"
  <!-- 其余原有属性保留 -->
>

• 在manifest根节点下补充音视频场景必需的权限：

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

2. WebView初始化参数配置 #

初始化InAppWebView时，必须开启以下配置，否则音视频流无法正常渲染：

InAppWebViewSettings webSettings = InAppWebViewSettings(
  // 关闭音视频自动播放的手势限制
  mediaPlaybackRequiresUserGesture: false,
  allowsInlineMediaPlayback: true,
  // 开启基础能力支持
  javaScriptEnabled: true,
  domStorageEnabled: true,
  databaseEnabled: true,
  // 开启混合渲染模式，解决GPU渲染异常
  hardwareAcceleration: true,
  useHybridComposition: true,
  // 放开跨域限制，适配会议站点的多资源加载
  allowUniversalAccessFromFileURLs: true,
  allowFileAccessFromFileURLs: true,
);

3. 媒体权限回调处理 #

实现WebView的权限请求回调，处理摄像头、麦克风的动态权限申请，未授权时会议站点会直接加载失败：

注意：需要提前在pubspec.yaml中引入permission_handler插件用于系统权限申请

onPermissionRequest: (controller, permissionRequest) async {
  // 向系统申请相机、麦克风权限
  Map<Permission, PermissionStatus> permissionResult = await [
    Permission.camera,
    Permission.microphone,
  ].request();

  if (permissionResult[Permission.camera]!.isGranted && permissionResult[Permission.microphone]!.isGranted) {
    return PermissionResponse(
      resources: permissionRequest.resources,
      action: PermissionResponseAction.GRANT,
    );
  }
  return PermissionResponse(
    resources: permissionRequest.resources,
    action: PermissionResponseAction.DENY,
  );
},

4. 定制ROM兼容处理 #

针对华为、小米等定制ROM出现的GPUAUX报错，可在MainActivity.kt的onCreate方法中添加如下代码，关闭厂商对WebView的拦截优化：

override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  try {
    WebView.setWebContentsDebuggingEnabled(false)
    val tempWebView = WebView(this)
    tempWebView.settings.javaScriptCanOpenWindowsAutomatically = true
    tempWebView.settings.mediaPlaybackRequiresUserGesture = false
    tempWebView.destroy()
  } catch (e: Exception) {
    e.printStackTrace()
  }
}

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