Flutter WebView后台保持麦克风/摄像头激活的实现方案咨询

核心限制说明 #

iOS和Android系统出于隐私与资源优化目的，默认会在应用进入后台后暂停麦克风、摄像头等敏感权限的访问。无法直接在纯后台状态下保持WebView的媒体权限激活，必须依赖能让应用维持「前台状态」的机制，比如画中画（PiP）模式。

画中画（PiP）模式实现（可行方案） #

PiP模式会让应用以小窗口形式保留在系统前台，从而维持WebView的媒体权限。以下是Flutter+webview_flutter的具体实现步骤：

Android端配置 #

修改android/app/src/main/AndroidManifest.xml，为MainActivity添加PiP支持：

<activity
    android:name=".MainActivity"
    android:supportsPictureInPicture="true"
    android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation">
    <!-- 保留原有配置 -->
</activity>

iOS端配置 #

修改ios/Runner/Info.plist，添加PiP后台模式支持：

<key>UIBackgroundModes</key>
<array>
    <string>picture-in-picture</string>
</array>

注意：iOS要求WebView内必须有活跃的<video>元素才能触发PiP，因此网页端需要将摄像头流渲染到video标签并保持播放状态。

Flutter代码实现 #

确保webview_flutter版本适配Flutter 3.22.2（建议使用>=4.0.0），以下是示例代码：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:flutter/services.dart';

class WebViewPiPScreen extends StatefulWidget {
  const WebViewPiPScreen({super.key});

  @override
  State<WebViewPiPScreen> createState() => _WebViewPiPScreenState();
}

class _WebViewPiPScreenState extends State<WebViewPiPScreen> {
  late final WebViewController controller;
  static const _pipChannel = MethodChannel('com.example.pip');

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse('你的目标网页URL'));
  }

  // 触发进入PiP模式
  Future<void> _enterPiP() async {
    try {
      await SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
      await _pipChannel.invokeMethod('enterPiP');
    } catch (e) {
      debugPrint('进入PiP失败: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('WebView 画中画'),
        actions: [
          IconButton(
            icon: const Icon(Icons.picture_in_picture),
            onPressed: _enterPiP,
          ),
        ],
      ),
      body: WebViewWidget(controller: controller),
    );
  }
}

Android原生通道补充

由于webview_flutter未直接暴露PiP调用方法，需要在Android原生代码中添加通道实现：

class MainActivity : FlutterActivity() {
    private val CHANNEL = "com.example.pip"

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler { call, result ->
            if (call.method == "enterPiP") {
                enterPictureInPictureMode()
                result.success(null)
            } else {
                result.notImplemented()
            }
        }
    }
}

其他Workaround方案 #

Android前台服务 #

通过Flutter前台服务插件（如flutter_foreground_task）让应用维持前台状态，从而保留WebView的媒体权限。需要：

1. 在AndroidManifest.xml添加权限：

<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />

2. 在Flutter中启动前台服务，服务会以通知形式显示在状态栏，用户可感知。

网页端优化 #

确保网页端媒体流请求添加持久化配置（部分浏览器支持）：

navigator.mediaDevices.getUserMedia({
    audio: true,
    video: true,
    persistent: true // 部分浏览器支持，辅助维持流连接
});

此方案仅为辅助，核心仍需依赖系统前台状态机制。

关键注意事项 #

• iOS对PiP的限制更严格，必须有活跃的video元素才能触发，需网页端配合。
• 所有方案都需提前向用户申请麦克风、摄像头、后台权限，否则会被系统拦截。

内容的提问来源于stack exchange，提问作者Ashish Tandon