Android WebView集成PeerJS视频通话需触摸才更新画面问题求助

针对Android WebView中PeerJS视频通话画面冻结、需手动点击才更新的问题，可从以下几个关键配置和代码调整入手解决：

1. 开启WebView硬件加速并补充核心配置 #

WebRTC视频流依赖硬件加速才能流畅渲染，默认可能未完全开启。在setupWebView中补充以下配置：

private fun setupWebView() {
    // 开启硬件加速（必须，否则视频渲染会卡）
    binding.webView.setLayerType(View.LAYER_TYPE_HARDWARE, null)
    
    binding.webView.webChromeClient = object: WebChromeClient() {
        override fun onPermissionRequest(request: PermissionRequest?) {
            request?.grant(request.resources)
        }
        
        // 处理视频全屏播放的回调，避免画面异常
        override fun onShowCustomView(view: View?, callback: CustomViewCallback?) {
            super.onShowCustomView(view, callback)
            // 如需全屏可在此处处理布局切换
        }

        override fun onHideCustomView() {
            super.onHideCustomView()
        }
    }
    
    val settings = binding.webView.settings
    settings.javaScriptEnabled = true
    settings.mediaPlaybackRequiresUserGesture = false
    // 开启DOM存储，WebRTC需要存储会话数据
    settings.domStorageEnabled = true
    // 开启数据库存储（部分WebRTC实现依赖）
    settings.databaseEnabled = true
    // 允许混合内容（若WebApp涉及HTTP/HTTPS混合资源）
    settings.mixedContentMode = WebSettings.MIXED_CONTENT_ALWAYS_ALLOW
    
    binding.webView.addJavascriptInterface(JSInterface(this), "Android")

    binding.webView.webViewClient = object: WebViewClient() {
        override fun onPageFinished(view: WebView?, url: String?) {
            // 延迟初始化PeerJS，确保DOM和JS环境完全就绪
            view?.postDelayed({
                initializePeer()
            }, 1000)
        }
    }

    loadWebApp()
}

2. 确保AndroidManifest.xml配置必要权限 #

WebRTC需要相机、麦克风和网络权限，在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.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

<!-- 声明硬件特性支持 -->
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
<uses-feature android:name="android.hardware.microphone" />

3. 调整前端视频元素配置 #

在call.html中，确保video元素添加以下属性，规避自动播放限制：

<video id="remoteVideo" autoplay playsinline muted></video>
<video id="localVideo" autoplay playsinline muted></video>

• playsinline：允许视频在页面内播放而非强制全屏，适配WebView环境
• muted：部分系统即使关闭了mediaPlaybackRequiresUserGesture，仍要求静音才能自动播放
• autoplay：确保视频流就绪后自动启动播放

4. 检查PeerJS初始化逻辑 #

确保initializePeer()中，视频流获取成功后立即绑定到video元素，并兜底调用play()方法：

// 示例JS逻辑（根据实际代码调整）
function initializePeer() {
    const peer = new Peer(...);
    peer.on('call', (call) => {
        navigator.mediaDevices.getUserMedia({ video: true, audio: true })
            .then(stream => {
                const localVideo = document.getElementById('localVideo');
                localVideo.srcObject = stream;
                localVideo.play().catch(err => console.log(err)); // 兜底处理播放失败
                
                call.answer(stream);
                call.on('stream', remoteStream => {
                    const remoteVideo = document.getElementById('remoteVideo');
                    remoteVideo.srcObject = remoteStream;
                    remoteVideo.play().catch(err => console.log(err));
                });
            });
    });
}

5. 避免WebView进程被后台限制 #

Android 10及以上版本对后台进程限制严格，可在Activity中添加生命周期回调保持WebView活跃：

override fun onResume() {
    super.onResume()
    binding.webView.onResume()
}

override fun onPause() {
    super.onPause()
    binding.webView.onPause()
}

内容的提问来源于stack exchange，提问作者imran khan