Flutter WebRTC通信插件 medea_flutter_webrtc 的使用

简介

medea_flutter_webrtc 是一个用于 Flutter 的 WebRTC 插件，设计并应用于 Medea Jason WebRTC 客户端，构建于预编译的 libwebrtc 二进制文件之上。

支持的平台

• macOS 10.11+
• Linux (需要 PulseAudio 和 X11 进行屏幕共享)
• Windows 7+
• Android 24+
• iOS 13+
• Web（部分支持）

使用步骤

添加依赖

在 pubspec.yaml 文件中添加 medea_flutter_webrtc 作为依赖：

dependencies:
  medea_flutter_webrtc: ^最新版本号

请确保将 ^最新版本号 替换为实际的最新版本号。可以从 pub.dev 获取最新的版本信息。

Android 配置

在 <project_root>/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.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />

如果需要使用蓝牙设备（如耳机），还需添加以下权限：

<uses-permission android:name="android.permission.BLUETOOTH" android:maxSdkVersion="30" />
<uses-permission android:name="android.permission.BLUETOOTH_ADMIN" android:maxSdkVersion="30" />
<uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />

同时，在 build.gradle 中设置 Java 8 兼容性：

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

iOS 配置

在 <project_root>/ios/Runner/Info.plist 文件中添加以下条目：

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

这些条目允许应用访问相机和麦克风。

示例代码

下面是一个简单的示例应用，展示了如何使用 medea_flutter_webrtc 插件的基本功能。

import 'package:flutter/material.dart';
import 'package:medea_flutter_webrtc/medea_flutter_webrtc.dart';

void main() async {
  await initFfiBridge();
  runApp(const MyApp());
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late List<RouteItem> items;

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

  ListBody _buildRow(context, item) {
    return ListBody(
      children: <Widget>[
        ListTile(
          title: Text(item.title),
          onTap: () => item.push(context),
          trailing: const Icon(Icons.arrow_right),
        ),
        const Divider()
      ],
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter-WebRTC example')),
        body: ListView.builder(
          shrinkWrap: true,
          padding: const EdgeInsets.all(0.0),
          itemCount: items.length,
          itemBuilder: (context, i) {
            return _buildRow(context, items[i]);
          },
        ),
      ),
      debugShowCheckedModeBanner: false,
    );
  }

  void _initItems() {
    items = <RouteItem>[
      RouteItem(
        title: 'GetUserMedia',
        push: (BuildContext context) {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (BuildContext context) => const GetUserMediaSample(),
            ),
          );
        },
      ),
      RouteItem(
        title: 'GetDisplayMedia',
        push: (BuildContext context) {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (BuildContext context) => const GetDisplayMediaSample(),
            ),
          );
        },
      ),
      RouteItem(
        title: 'LoopBack Sample',
        push: (BuildContext context) {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (BuildContext context) => const Loopback(),
            ),
          );
        },
      ),
      RouteItem(
        title: 'getSources',
        push: (BuildContext context) {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (BuildContext context) => const GetSourcesSample(),
            ),
          );
        },
      ),
      RouteItem(
        title: 'Basic RtcPeerConnection',
        push: (BuildContext context) {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (BuildContext context) => const PeerConnectionSample(),
            ),
          );
        },
      ),
      RouteItem(
        title: 'onDeviceChange notifier',
        push: (BuildContext context) {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (BuildContext context) =>
                  const OnDeviceChangeNotifierSample(),
            ),
          );
        },
      ),
      RouteItem(
        title: 'Video Codec Info',
        push: (BuildContext context) {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (BuildContext context) => const VideoCodecInfoSample(),
            ),
          );
        },
      ),
    ];
  }
}

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

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