快速开始
更新时间:2024-04-11
环境准备
在实现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。下面是快速实现音视频通话的几个步骤:
创建工程
flutter create brtc_flutter_demo
找到 pubspec.yaml 文件。在该文件中,添加以下依赖项
dependencies:
flutter:
sdk: flutter
// 依赖的百度rtc flutter sdk,后续更新可修改版本号
bdcloud_rtc: ^1.0.0
注意:在添加包的时候要注意缩进。
在项目文件夹中,运行以下命令来安装所有的依赖项:
flutter pub get
添加Android 依赖项
当前flutter sdk 已自动引入Android 依赖项,同步项目即可通过maven引入
添加iOS 依赖项
通过下载iOS SDK,将framework文件保存到Flutter工程中,ios/Frameworks 目录下
使用Flutter SDK实现音视频通话
初始化获取 BaiduRtcCloud 实例
BRTCInitParams initParams = new BRTCInitParams();
initParams.appId = appId;
BaiduRtcCloud baiduRtcCloud = (await BaiduRtcCloud.getInstance(initParams))!;
配置参数
// 设置参数,默认,可修改
BRTCCommonParam commonParam = BRTCCommonParam();
commonParam.autoPublish = true;
commonParam.autoSubscribe = true;
commonParam.enableMultistream = true;
commonParam.encodeBitrateMode = 1;
commonParam.videoResolution = BdUtils.getResolutionConfig();
commonParam.videoMaxkbps = BdUtils.getBitrateConfig();
commonParam.videoMinkbps = BdUtils.getBitrateConfig();
commonParam.videoFps = BdUtils.getFpsConfig();
commonParam.connectionTimeoutMs = 5000;
commonParam.readTimeoutMs = 5000;
commonParam.inputAudioChannel = 1;
commonParam.outputAudioChannel = 1;
commonParam.audioFrequency = 48000;
commonParam.enableJitterRetransmission = true;
commonParam.enableFixedResolution = true;
commonParam.videoWidth = 480;
commonParam.videoHeight = 640;
commonParam.isMultiPlayerModel = true;
baiduRtcCloud.setParamSettings(commonParam);
设置Widget
针对1v1场景,在StatefulWidget 的 Widget build(BuildContext context)方法中,设置预览摄像头Widget 和播放远端画面Widget
@override
Widget build(BuildContext context) {
final double distance = 12;
List<String> remoteUidList = remoteUserIdMap.values.toList();
subscriberCount = remoteUidList.length;
return Stack(
alignment: Alignment.topLeft,
fit: StackFit.expand,
children: [
Positioned(
top: 0,
left: 0,
child: Container(
width: 1.sw,
height: (4 / 3).sw,
color: Colors.black,
child: BRTCCloudVideoView(
key: ValueKey("LocalView"),
viewType: BRTCCloudConfig.BRTC_Video_SurfaceView_Channel,
videoParam: BRTCVideoParams(
x: 0,
y: 0,
width: 1.sw.toInt(),
height: (4 / 3).sw.toInt(),
isLocal: true,
),
onViewCreated: (viewId) async {
setState(() {
localViewId = viewId;
});
baiduRtcCloud.setLocalDisplay(viewId);
baiduRtcCloud.startPreview();
},
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: [
Container(
alignment: Alignment.topRight,
color: Colors.transparent,
width: (1 / 3).sw,
child: GridView.builder(
itemCount: subscriberCount,
shrinkWrap: false,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1,
mainAxisSpacing: 2.0,
crossAxisSpacing: 5.0,
childAspectRatio: 0.75),
itemBuilder: (BuildContext context, int index) {
return Container(
child: BRTCCloudVideoView(
key: ValueKey('RemoteView_$index'),
viewType: BRTCCloudConfig.BRTC_Video_Remote_View_Channel,
videoParam: BRTCVideoParams(
x: 0,
y: 0,
width: (1 / 3).sw.toInt(),
height: (4 / 9).sw.toInt(),
isLocal: false,
),
onViewCreated: (viewId) async {
String userId = index.toString();
if (remoteUidList.length > index) {
userId = remoteUidList[index];
}
if (remoteUserViewMap.containsKey(userId)) {
baiduRtcCloud.updateDisplay(
viewId, int.parse(userId));
} else {
baiduRtcCloud.setRemoteDisplayWithUserId(
viewId, int.parse(userId));
remoteUserViewMap[userId] = viewId;
}
},
),
);
},
),
),
],
),
],
);
}
登录房间
BRTCLoginParams loginParams = BRTCLoginParams();
loginParams.userId = "999";
loginParams.roomId = "roomName";
loginParams.displayName = "UserName";
baiduRtcCloud.loginBRtcRoom(loginParams);
常见问题
注意事项:
- flutter 中的 pubspec.yaml 插件版本要和gradle 版本匹配,flutter 版本匹配
- Preferences的dart配置信息 需要设置enable true
- Preferences 中 flutter sdk 的路径要设置正确
- 遇到flutter 缓存问题,需要重启
- gradle-wrapper.properties 版本问题要对应
- pod 版本拉取失败,或者不对应,删除pod.lock 文件,删除缓存,重新拉取