快速开始
更新时间:2025-05-07
环境准备
在实现Flutter 音视频通话前,需要有以下准备:
- VS Code 或其他你选择的IDE
- Android Studio/ Xcode(Android/iOS SDK)
- Flutter SDK (Flutter 官网下载),官方Demo使用Flutter 版本2.10.3;Pod版本1.11.3
- 开发语言:dart, java/kotlin(Android), oc/swift(iOS),
- 申请百度智能云官网 APP ID,详见https://cloud.baidu.com/product/rtc.html (Demo 中有可用于测试的默认APP ID,仅可用于测试使用)
- 百度RTC Flutter 下载,详见https://cloud.baidu.com/doc/RTC/s/Ilgunowoj
创建项目
可以使用官网下载的Demo进行参考,也可自行创建项目导入SDK。下面是快速实现音视频通话的几个步骤:
创建工程
Plain Text
1flutter create brtc_flutter_demo
找到 pubspec.yaml 文件。在该文件中,添加以下依赖项
Plain Text
1dependencies:
2 flutter:
3 sdk: flutter
4
5 // 依赖的百度rtc flutter sdk,后续更新可修改版本号
6 bdcloud_rtc: ^1.0.0
注意:在添加包的时候要注意缩进。
在项目文件夹中,运行以下命令来安装所有的依赖项:
Plain Text
1flutter pub get
添加Android 依赖项
当前flutter sdk 已自动引入Android 依赖项,同步项目即可通过maven引入
添加iOS 依赖项
通过下载iOS SDK,将framework文件保存到Flutter工程中,ios/Frameworks 目录下
使用Flutter SDK实现音视频通话
初始化获取 BaiduRtcCloud 实例
Plain Text
1 BRTCInitParams initParams = new BRTCInitParams();
2 initParams.appId = appId;
3 BaiduRtcCloud baiduRtcCloud = (await BaiduRtcCloud.getInstance(initParams))!;
配置参数
Plain Text
1 // 设置参数,默认,可修改
2 BRTCCommonParam commonParam = BRTCCommonParam();
3 commonParam.autoPublish = true;
4 commonParam.autoSubscribe = true;
5 commonParam.enableMultistream = true;
6 commonParam.encodeBitrateMode = 1;
7 commonParam.videoResolution = BdUtils.getResolutionConfig();
8 commonParam.videoMaxkbps = BdUtils.getBitrateConfig();
9 commonParam.videoMinkbps = BdUtils.getBitrateConfig();
10 commonParam.videoFps = BdUtils.getFpsConfig();
11 commonParam.connectionTimeoutMs = 5000;
12 commonParam.readTimeoutMs = 5000;
13 commonParam.inputAudioChannel = 1;
14 commonParam.outputAudioChannel = 1;
15 commonParam.audioFrequency = 48000;
16 commonParam.enableJitterRetransmission = true;
17 commonParam.enableFixedResolution = true;
18 commonParam.videoWidth = 480;
19 commonParam.videoHeight = 640;
20 commonParam.isMultiPlayerModel = true;
21
22 baiduRtcCloud.setParamSettings(commonParam);
设置Widget
针对1v1场景,在StatefulWidget 的 Widget build(BuildContext context)方法中,设置预览摄像头Widget 和播放远端画面Widget
Plain Text
1 @override
2 Widget build(BuildContext context) {
3 final double distance = 12;
4 List<String> remoteUidList = remoteUserIdMap.values.toList();
5 subscriberCount = remoteUidList.length;
6 return Stack(
7 alignment: Alignment.topLeft,
8 fit: StackFit.expand,
9 children: [
10 Positioned(
11 top: 0,
12 left: 0,
13 child: Container(
14 width: 1.sw,
15 height: (4 / 3).sw,
16 color: Colors.black,
17 child: BRTCCloudVideoView(
18 key: ValueKey("LocalView"),
19 viewType: BRTCCloudConfig.BRTC_Video_SurfaceView_Channel,
20 videoParam: BRTCVideoParams(
21 x: 0,
22 y: 0,
23 width: 1.sw.toInt(),
24 height: (4 / 3).sw.toInt(),
25 isLocal: true,
26 ),
27 onViewCreated: (viewId) async {
28 setState(() {
29 localViewId = viewId;
30 });
31 baiduRtcCloud.setLocalDisplay(viewId);
32 baiduRtcCloud.startPreview();
33 },
34 ),
35 ),
36 ),
37 Row(
38 mainAxisAlignment: MainAxisAlignment.end,
39 mainAxisSize: MainAxisSize.min,
40 children: [
41 Container(
42 alignment: Alignment.topRight,
43 color: Colors.transparent,
44 width: (1 / 3).sw,
45 child: GridView.builder(
46 itemCount: subscriberCount,
47 shrinkWrap: false,
48 gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
49 crossAxisCount: 1,
50 mainAxisSpacing: 2.0,
51 crossAxisSpacing: 5.0,
52 childAspectRatio: 0.75),
53 itemBuilder: (BuildContext context, int index) {
54 return Container(
55 child: BRTCCloudVideoView(
56 key: ValueKey('RemoteView_$index'),
57 viewType: BRTCCloudConfig.BRTC_Video_Remote_View_Channel,
58 videoParam: BRTCVideoParams(
59 x: 0,
60 y: 0,
61 width: (1 / 3).sw.toInt(),
62 height: (4 / 9).sw.toInt(),
63 isLocal: false,
64 ),
65 onViewCreated: (viewId) async {
66 String userId = index.toString();
67 if (remoteUidList.length > index) {
68 userId = remoteUidList[index];
69 }
70
71 if (remoteUserViewMap.containsKey(userId)) {
72 baiduRtcCloud.updateDisplay(
73 viewId, int.parse(userId));
74 } else {
75 baiduRtcCloud.setRemoteDisplayWithUserId(
76 viewId, int.parse(userId));
77 remoteUserViewMap[userId] = viewId;
78 }
79 },
80 ),
81 );
82 },
83 ),
84 ),
85 ],
86 ),
87 ],
88 );
89 }
登录房间
Plain Text
1 BRTCLoginParams loginParams = BRTCLoginParams();
2 loginParams.userId = "999";
3 loginParams.roomId = "roomName";
4 loginParams.displayName = "UserName";
5 baiduRtcCloud.loginBRtcRoom(loginParams);
常见问题
注意事项:
- flutter 中的 pubspec.yaml 插件版本要和gradle 版本匹配,flutter 版本匹配
- Preferences的dart配置信息 需要设置enable true
- Preferences 中 flutter sdk 的路径要设置正确
- 遇到flutter 缓存问题,需要重启
- gradle-wrapper.properties 版本问题要对应
- pod 版本拉取失败,或者不对应,删除pod.lock 文件,删除缓存,重新拉取