Flutter实时音视频通信插件aliyun_rtc_plugin的使用

Flutter实时音视频通信插件aliyun_rtc_plugin的使用

获取插件

首先，在pubspec.yaml文件中添加aliyun_rtc_plugin插件：

dependencies:
  aliyun_rtc_plugin: 0.0.6

然后运行flutter pub get以安装该插件。

初始化插件

在项目中使用插件之前，需要初始化插件。以下是一个简单的示例：

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

late RtcPVPlayerController _controller;

void main() {
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();

    _controller = RtcPVPlayerController.instance();

    final dataSource = DataSource(
      appId: "xxxx",
      nonce: "xxxx",
      timestamp: 1675837679,
      token: "xxxxx",
      channelId: "xxxx",
      userId: "xxxx",
      userName: "xxxx",
      userHeaderImg: 'xxxx',
    );
    _controller.initialize(dataSource);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('RTC Example App'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton.icon(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) {
                      return RtcCallExamplePage(isVideoCall: false);
                    }),
                  );
                },
                icon: Icon(Icons.call),
                label: Text('音频通话'),
              ),
              ElevatedButton.icon(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) {
                      return RtcCallExamplePage(isVideoCall: true);
                    }),
                  );
                },
                icon: Icon(Icons.video_call),
                label: Text('视频通话'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

实现通话功能

创建一个页面来处理实际的通话逻辑。这里是一个简单的示例页面RtcCallExamplePage：

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

class RtcCallExamplePage extends StatefulWidget {
  final bool isVideoCall;

  RtcCallExamplePage({required this.isVideoCall});

  @override
  _RtcCallExamplePageState createState() => _RtcCallExamplePageState();
}

class _RtcCallExamplePageState extends State<RtcCallExamplePage> {
  late RtcPVPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = RtcPVPlayerController.instance();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.isVideoCall ? '视频通话' : '音频通话'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            VideoPlayerPlatformView(
              controller: _controller,
              videoCall: widget.isVideoCall,
              stateChanged: (state) {
                if (state == VideoEventType.unknown ||
                    state == VideoEventType.disconnected) {
                  Navigator.of(context).pop();
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}

Android集成

确保在AndroidManifest.xml文件中添加必要的权限：

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

iOS集成

在Info.plist文件中添加相应的权限描述：

<key>NSCameraUsageDescription</key>
<string>使用相机</string>
<key>NSMicrophoneUsageDescription</key>
<string>使用麦克风</string>
<key>UIRequiresPersistentWiFi</key>
<true/>
<key>io.flutter.embedded_views_preview</key>
<true/>