Flutter WebRTC通信插件flutter_webrtc_vconnex的使用

简介

LiveKit - Open source WebRTC基础设施

flutter_webrtc_vconnex 是一个用于 Flutter 的 WebRTC 插件，支持在移动设备、桌面和 Web 平台上进行音频、视频和数据通道通信。它旨在为开发者提供一个简单而强大的方式来构建实时通信应用。

功能支持

以下表格展示了 flutter_webrtc_vconnex 在不同平台上的功能支持情况：

使用方法

1. 添加依赖

在你的 pubspec.yaml 文件中添加 flutter_webrtc_vconnex 作为依赖：

dependencies:
  flutter_webrtc_vconnex: ^版本号

然后运行以下命令安装依赖：

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 芯片设备，需要在 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|
      # Workaround for https://github.com/flutter/flutter/issues/64502
      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。

4. 示例代码

以下是一个完整的示例代码，展示如何使用 flutter_webrtc_vconnex 实现点对点通信。

文件结构

example/
├── lib/
│   ├── main.dart
│   ├── src/
│   │   ├── get_user_media_sample.dart
│   │   ├── get_display_media_sample.dart
│   │   ├── loopback_sample.dart
│   │   ├── loopback_sample_unified_tracks.dart
│   │   └── route_item.dart

main.dart

import 'dart:core';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_webrtc_vconnex/flutter_webrtc_vconnex.dart';

import 'src/get_user_media_sample.dart';
import 'src/get_display_media_sample.dart';
import 'src/loopback_sample.dart';
import 'src/loopback_sample_unified_tracks.dart';
import 'src/route_item.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> {
  late List<RouteItem> items;

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

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

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

  void _initItems() {
    items = [
      RouteItem(
        title: '获取用户媒体 (GetUserMedia)',
        push: (BuildContext context) {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (_) => GetUserMediaSample()),
          );
        },
      ),
      RouteItem(
        title: '屏幕共享 (GetDisplayMedia)',
        push: (BuildContext context) {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (_) => GetDisplayMediaSample()),
          );
        },
      ),
      RouteItem(
        title: '回环测试 (LoopBack Sample)',
        push: (BuildContext context) {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (_) => LoopBackSample()),
          );
        },
      ),
      RouteItem(
        title: '统一轨道回环测试 (LoopBack Sample Unified Tracks)',
        push: (BuildContext context) {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (_) => LoopBackSampleUnifiedTracks()),
          );
        },
      ),
    ];
  }
}

route_item.dart

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

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

get_user_media_sample.dart

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

class GetUserMediaSample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('获取用户媒体 (GetUserMedia)'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            var stream = await navigator.mediaDevices.getUserMedia({
              "video": true,
              "audio": true,
            });
            print("已获取媒体流: $stream");
          },
          child: Text('开始获取媒体流'),
        ),
      ),
    );
  }
}