如何在Flutter项目中使用flutter_webrtc包实现WebRTC屏幕共享功能

1. 原生端前置配置 #

Android 端配置 #

• 在AndroidManifest.xml中新增权限声明：

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

• 同文件的application节点下注册屏幕采集服务：

  <service 
    android:name="com.cloudwebrtc.webrtc.ScreenCaptureService" 
    android:foregroundServiceType="mediaProjection" 
  />
  

• 确保项目minSdkVersion >= 21。

iOS 端配置 #

• 主项目开启Background Modes能力，勾选Voice over IP选项
• 新增Broadcasting Upload Extension扩展，主项目与扩展同时开启App Groups能力，配置相同的Group ID
• 主项目Info.plist新增以下字段：

  <key>RTCAppGroupIdentifier</key>
  <string>你的App Group ID</string>
  <key>RTCScreenSharingExtension</key>
  <string>你的扩展Bundle ID</string>
  <key>NSLocalNetworkUsageDescription</key>
  <string>需要使用本地网络进行屏幕共享传输</string>
  

2. Dart 侧屏幕流采集 #

直接调用flutter_webrtc封装的系统采集能力，无需额外原生开发：

import 'package:flutter_webrtc/flutter_webrtc.dart';

Future<MediaStream> createScreenStream() async {
  final constraints = {
    'video': {
      'frameRate': 30,
      'width': 1280,
      'height': 720,
    },
    'audio': false // 需采集系统音频时改为true
  };
  // 调用后会自动弹出系统屏幕录制授权弹窗
  final stream = await navigator.mediaDevices.getDisplayMedia(constraints);
  return stream;
}

3. 流传输逻辑复用 #

你已实现摄像头流传输逻辑，直接复用原有通道即可：

• 停止原有摄像头流的传输：调用原有本地摄像头流的dispose()方法释放资源
• 将采集到的屏幕流添加到已创建的RTCPeerConnection实例中，调用方式与添加摄像头流完全一致：peerConnection.addStream(screenStream)
• 接收端无需修改任何逻辑，原有渲染摄像头流的RTCVideoRenderer可直接渲染屏幕流

4. 停止共享逻辑 #

调用屏幕流的dispose()方法即可停止系统采集，同时会自动触发对端的onRemoveStream回调，同步停止渲染。

内容的提问来源于stack exchange，提问作者Dima Nizanov