Flutter即时通讯RTC插件rongcloud_rtc_wrapper_plugin的使用

融云 RTC Wrapper Plugin

本文档主要讲解了如何使用融云 RTC Wrapper Plugin，基于融云 iOS/Android 平台的 RTCLib SDK。

前期准备

1 申请开发者账号

在融云官网申请开发者账号。通过管理后台的 “基本信息” -> “App Key” 获取 AppKey。

通过管理后台的 “IM 服务” -> “API 调用” -> “用户服务” -> “获取 Token”，通过用户 ID 获取 IMToken。

2 开通音视频服务

管理后台的 “音视频服务” -> “服务设置” 开通音视频 RTC 3.0，开通两个小时后生效。

依赖 RTC Wrapper Plugin

在项目的 pubspec.yaml 中写如下依赖：

dependencies:
  flutter:
    sdk: flutter
  rongcloud_rtc_wrapper_plugin: 5.12.0

iOS 配置

iOS 需要在 Info.plist 中需要加入对相机和麦克风的权限申请：

<key>NSCameraUsageDescription</key>
<string>使用相机</string>
<key>NSMicrophoneUsageDescription</key>
<string>使用麦克风</string>

还需要添加字段 io.flutter.embedded_views_preview 值为 YES。

Android 配置

Android 需要在 AndroidManifest.xml 文件中声明对相机和麦克风的权限：

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

前置接口说明

初始化 IM SDK

RongIMClient.init(RongAppKey);

连接 IM

RongIMClient.connect(IMToken, (code, userId) {
  // 连接成功的回调
});

创建 RTC 引擎

RCRTCEngine engine = await RCRTCEngine.create();

音视频模式接口说明

用户加入房间，渲染并发布资源

加入 RTC 房间

// 设置加入 RTC 房间事件监听
engine.onRoomJoined = (int code, String? message) {
  // 加入房间后的回调
};

// 加入 RTC 房间
RCRTCRoomSetup setup = RCRTCRoomSetup.create(
    type: RCRTCMediaType.audio_video,
    role: RCRTCRole.meeting_member,
);
engine.joinRoom(id, setup);

采集音频

引擎默认开启音频采集

engine.enableMicrophone(true);

采集视频

engine.enableCamera(true);

渲染视频

RCRTCView view = await RCRTCView.create();
engine.setLocalView(view);

发布资源

engine.publish(RCRTCMediaType.audio_video);

渲染远端用户

监听远端用户加入的回调

engine.onUserJoined = (roomId, userId) {
  // 远端用户加入的回调
};

监听远端用户发布资源的回调

engine.onRemotePublished = (roomId, userId, type) {
  // 远端用户发布资源的回调
};

远端用户发布资源后，订阅远端用户资源

engine.subscribe(userId, type);

渲染远端用户资源

RCRTCView view = await RCRTCView.create();
engine.setRemoteView(userId, view);

直播模式接口说明

主播加入房间，渲染并发布资源

加入 RTC 房间

// 设置加入 RTC 房间事件监听
engine.onRoomJoined = (int code, String? message) {
  // 加入房间后的回调
};

// 加入 RTC 房间
RCRTCRoomSetup setup = RCRTCRoomSetup.create(
    type: RCRTCMediaType.audio_video,
    role: RCRTCRole.live_broadcaster,
);
engine.joinRoom(id, setup);

采集音频

引擎默认开启音频采集

engine.enableMicrophone(true);

采集视频

engine.enableCamera(true);

渲染视频

RCRTCView view = await RCRTCView.create();
engine.setLocalView(view);

发布资源

engine.publish(RCRTCMediaType.audio_video);

渲染远端主播

监听远端主播加入的回调

engine.onUserJoined = (roomId, userId) {
  // 远端主播加入的回调
};

监听远端主播发布资源的回调

engine.onRemotePublished = (roomId, userId, type) {
  // 远端主播发布资源的回调
};

远端主播发布资源后，订阅远端主播资源

engine.subscribe(userId, type);

渲染远端主播资源

RCRTCView view = await RCRTCView.create();
engine.setRemoteView(userId, view);

观众加入房间，订阅并渲染MCU资源

加入 RTC 房间

// 设置加入 RTC 房间事件监听
engine.onRoomJoined = (int code, String? message) {
  // 加入房间后的回调
};

// 加入 RTC 房间
RCRTCRoomSetup setup = RCRTCRoomSetup.create(
    type: RCRTCMediaType.audio_video,
    role: RCRTCRole.live_audience,
);
engine.joinRoom(id, setup);

监听MCU资源发布回调

engine.onRemoteLiveMixPublished = (type) {
  // MCU资源发布回调
};

MCU资源发布后，订阅MCU资源

engine.subscribeLiveMix(type);

渲染MCU资源

RCRTCView view = await RCRTCView.create();
engine.setLiveMixView(view);

观众加入房间，订阅并渲染主播资源

加入 RTC 房间

// 设置加入 RTC 房间事件监听
engine.onRoomJoined = (int code, String? message) {
  // 加入房间后的回调
};

// 加入 RTC 房间
RCRTCRoomSetup setup = RCRTCRoomSetup.create(
    type: RCRTCMediaType.audio_video,
    role: RCRTCRole.live_audience,
);
engine.joinRoom(id, setup);

监听远端主播加入的回调

engine.onUserJoined = (roomId, userId) {
  // 远端主播加入的回调
};

监听远端主播发布资源的回调

engine.onRemotePublished = (roomId, userId, type) {
  // 远端主播发布资源的回调
};

远端主播发布资源后，订阅远端主播资源

engine.subscribe(userId, type);

渲染远端主播资源

RCRTCView view = await RCRTCView.create();
engine.setRemoteView(userId, view);

其他接口

离开房间

engine.leaveRoom();

销毁引擎

engine.destroy();

示例代码

example/lib/main.dart

import 'package:context_holder/context_holder.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:rongcloud_rtc_wrapper_plugin_example/data/data.dart';
import 'package:rongcloud_rtc_wrapper_plugin_example/frame/utils/local_storage.dart';
import 'package:wakelock/wakelock.dart';

import 'global_config.dart';
import 'router/router.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  LocalStorage.init().then((value) => runApp(RCRTCFlutter()));
}

class RCRTCFlutter extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]);

    SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.dark,
    );
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);

    Wakelock.enable();

    return MaterialApp(
      navigatorKey: ContextHolder.key,
      title: GlobalConfig.appTitle,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: RouterManager.CONNECT,
      routes: RouterManager.initRouters(),
    );
  }
}