Flutter WebRTC修复插件flutter_webrtc_fix的使用

WebRTC 插件用于 Flutter 移动端、桌面端和网页端。通过此插件，开发者可以在不同平台上实现音频、视频通信及数据通道等功能。

功能性

以下是 flutter_webrtc_fix 插件在各平台上的功能支持情况：

备注：

• • 表示部分支持。
• [WIP] 表示仍在开发中。

安装与配置

1. 添加依赖

在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_webrtc_fix: ^版本号

然后运行 flutter pub get。

2. iOS 配置

在 ios/Runner/Info.plist 文件中添加以下权限描述：

<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) Camera Usage!</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) Microphone Usage!</string>

注意事项

对于 iOS M1/M2 芯片设备，由于 WebRTC.xframework 不再支持 arm 架构，需要在 ios/Podfile 中添加以下配置：

post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
    target.build_configurations.each do |config|
      config.build_settings['ONLY_ACTIVE_ARCH'] = 'YES'
    end
  end
end

3. Android 配置

确保在 android/app/src/main/AndroidManifest.xml 中包含以下权限：

<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
<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.CHANGE_NETWORK_STATE" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

<!-- 如果需要蓝牙支持 -->
<uses-permission android:name="android.permission.BLUETOOTH" android:maxSdkVersion="30" />
<uses-permission android:name="android.permission.BLUETOOTH_ADMIN" android:maxSdkVersion="30" />

同时，在 android/app/build.gradle 中设置 Java 编译版本为 1.8：

android {
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

如果需要更高的兼容性，可以将 minSdkVersion 设置为 23。

使用示例

以下是一个完整的示例，展示如何在 Flutter 中使用 flutter_webrtc_fix 实现 WebRTC 的基本功能。

示例代码

main.dart

import 'dart:core';

import 'package:flutter/foundation.dart' show debugDefaultTargetPlatformOverride;
import 'package:flutter/material.dart';
import 'package:flutter_webrtc_fix/flutter_webrtc_fix.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  // 检测是否为桌面环境
  if (WebRTC.platformIsDesktop) {
    debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
  }

  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<RouteItem> items = [];

  [@override](/user/override)
  void initState() {
    super.initState();
    _initItems();
  }

  void _initItems() {
    items = [
      RouteItem(
        title: 'GetUserMedia',
        push: (BuildContext context) {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (_) => GetUserMediaSample()),
          );
        },
      ),
      RouteItem(
        title: 'Device Enumeration',
        push: (BuildContext context) {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (_) => DeviceEnumerationSample()),
          );
        },
      ),
      RouteItem(
        title: 'GetDisplayMedia',
        push: (BuildContext context) {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (_) => GetDisplayMediaSample()),
          );
        },
      ),
    ];
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter-WebRTC 示例')),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index].title),
              onTap: () => items[index].push(context),
              trailing: Icon(Icons.arrow_right),
            );
          },
        ),
      ),
    );
  }
}

class RouteItem {
  final String title;
  final Function(BuildContext) push;

  RouteItem({required this.title, required this.push});
}