快速开始
所有文档
menu

实时音视频 RTC

快速开始

产品详情立即开通

环境准备

在实现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);

常见问题

注意事项:

  1. flutter 中的 pubspec.yaml 插件版本要和gradle 版本匹配,flutter 版本匹配
  2. Preferences的dart配置信息 需要设置enable true
  3. Preferences 中 flutter sdk 的路径要设置正确
  4. 遇到flutter 缓存问题,需要重启
  5. gradle-wrapper.properties 版本问题要对应
  6. pod 版本拉取失败,或者不对应,删除pod.lock 文件,删除缓存,重新拉取
上一篇
API
下一篇
RTC 服务端API