您可以 下载 安装我们的 App 体验多人视频会议的效果,包括屏幕分享、美颜、低延时会议等 TRTC 在多人视频会议场景下的相关能力。
进入会议 | 屏幕分享 |
---|---|
|
|
如需快速接入多人视频会议功能,您可以直接基于我们提供的 App 进行修改适配,也可以使用我们提供的 TRTCMeeting 组件并实现自定义 UI 界面。
- 登录实时音视频控制台,选择【开发辅助】>【快速跑通Demo】。
- 输入应用名称,例如
TestMeetingRoom
,单击【创建】。 - 单击【已下载,下一步】,跳过此步骤。
! 本功能同时使用了腾讯云 实时音视频 TRTC 和 即时通信 IM 两个基础 PaaS 服务,开通实时音视频后会同步开通即时通信 IM 服务。即时通信 IM 属于增值服务,详细计费规则请参见 即时通信 IM 价格说明。
单击进入 TRTCFlutterScenesDemo,Clone 或者下载源码。
- 进入修改配置页,根据您下载的源码包,选择相应的开发环境。
- 找到并打开
/lib/debug/GenerateTestUserSig.dart
文件。 - 设置
GenerateTestUserSig.dart
文件中的相关参数:
- SDKAPPID:默认为PLACEHOLDER,请设置为实际的 SDKAppID。
- SECRETKEY:默认为PLACEHOLDER,请设置为实际的密钥信息。
- 粘贴完成后,单击【已复制粘贴,下一步】即创建成功。
- 编译完成后,单击【回到控制台概览】即可。
!
- 本文提到的生成 UserSig 的方案是在客户端代码中配置 SECRETKEY,该方法中 SECRETKEY 很容易被反编译逆向破解,一旦您的密钥泄露,攻击者就可以盗用您的腾讯云流量,因此该方法仅适合本地跑通 Demo 和功能调试。
- 正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端,并提供面向 App 的接口,在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。
! 安卓需要在真机下运行,不支持模拟器调试
- 执行
flutter pub get
。 - 编译运行调试:
源码中的 TRTCMeetingDemo 文件夹包含两个子文件夹 ui 和 model,ui 文件夹中均为界面代码,如下表格列出了各个文件或文件夹及其所对应的 UI 界面,以便于您进行二次调整:
文件或文件夹 | 功能描述 |
---|---|
TRTCMeetingIndex.dart | 创建或进入会议界面 |
TRTCMeetingRoom.dart | 视频会议的主界面 |
TRTCMeetingMemberList.dart | 参会人员列表界面 |
TRTCMeetingSetting.dart | 视频会议相关参数设置界面 |
源码 中的 TRTCMeetingDemo 文件夹包含两个子文件夹 ui 和 model,model 文件夹中包含可重用的开源组件 TRTCMeeting,您可以在 TRTCMeeting.dart
文件中看到该组件提供的接口函数,并使用对应接口实现自定义 UI 界面。
互动直播组件 TRTCMeeting 依赖 TRTC SDK 和 IM SDK,您可以通过配置 pubspec.yaml
自动下载更新。
在项目的 pubspec.yaml
中写如下依赖:
dependencies:
tencent_trtc_cloud: 最新版本号
tencent_im_sdk_plugin: 最新版本号
拷贝以下目录中的所有文件到您的项目中:
lib/TRTCMeetingDemo/model/
- 调用
sharedInstance
接口可以创建一个 TRTCMeeting 组件的实例对象。 - 调用
registerListener
函数注册组件的事件通知。 - 调用
login
函数完成组件的登录,请参考下表填写关键参数:
参数名 | 作用 |
---|---|
sdkAppId | 您可以在 实时音视频控制台 中查看 SDKAppID。 |
userId | 当前用户的 ID,字符串类型,只允许包含英文字母(a-z、A-Z)、数字(0-9)、连词符(-)和下划线(_)。 |
userSig | 腾讯云设计的一种安全保护签名,获取方式请参考 如何计算 UserSig。 |
- 主持人执行 步骤4 登录后,可以调用 setSelfProfile 设置自己的昵称和头像。
- 主持人调用 createMeeting 创建新的会议房间。
- 主持人可以调用 startCameraPreview 进行视频画面的采集,也可以调用 startMicrophone 进行声音的采集。
- 如果主持人有美颜的需求,界面上可以配置美颜调节按钮调用,通过 getBeautyManager 进行美颜设置。
::: dart dart // 1. 主持人设置昵称和头像 trtcMeeting.setSelfProfile('my_name', 'my_avatar');? 非企业版 SDK 不支持变脸和贴图挂件功能。
// 2. 主持人创建会议 ActionCallback res = await trtcMeeting.createMeeting(roomId); if (res.code == 0) { // 创建会议成功 // 3. 打开摄像头和音频采集 trtcMeeting.startCameraPreview(true, TRTCCloudVideoViewId); trtcMeeting.startMicrophone(); // 4. 设置美颜 trtcMeeting.getBeautyManager().setBeautyStyle(TRTCCloudDef.TRTC_BEAUTY_STYLE_PITU); trtcMeeting.getBeautyManager().setBeautyLevel(6); } :::
- 参会成员执行 步骤4 登录后,可以调用 setSelfProfile 设置自己的昵称和头像。
- 参会成员调用 enterMeeting 并传入会议房间号即可进入会议房间。
- 参会成员可以调用 startCameraPreview 进行视频画面的采集,也可以调用 startMicrophone 进行声音的采集。
- 如果有其他的参会成员打开了摄像头,会收到 onUserVideoAvailable 的事件,此时可以调用 startRemoteView 并传入 userId 开始播放。
// 2. 参会成员调用 enterMeeting 进入会议房间 ActionCallback res = await trtcMeeting.enterMeeting(roomId); if (res.code == 0) { // 进入会议成功 // 3. 打开摄像头和音频采集 trtcMeeting.startCameraPreview(true, TRTCCloudVideoViewId); trtcMeeting.startMicrophone(); // 4. 设置美颜 trtcMeeting.getBeautyManager().setBeautyStyle(TRTCCloudDef.TRTC_BEAUTY_STYLE_PITU); trtcMeeting.getBeautyManager().setBeautyLevel(6); }
// 5. 参会成员收到其他成员摄像头打开的通知,开始播放 trtcMeeting.registerListener(onListener); onListener(TRTCMeetingDelegate type, param) { switch (type) { case TRTCMeetingDelegate.onUserVideoAvailable: if (param['available']) { trtcMeeting.startCameraPreview( param['userId'], TRTCCloudDef.TRTC_VIDEO_STREAM_TYPE_BIG, TRTCCloudVideoViewId ); } else { trtcMeeting.stopRemoteView( param['userId'], TRTCCloudDef.TRTC_VIDEO_STREAM_TYPE_BIG ); } break; } } :::
- 屏幕分享功能需向系统申请悬浮窗权限,需要您在 UI 中实现具体的逻辑。
- 调用 startScreenCapture,传入编码参数和录屏过程中的悬浮窗即可实现屏幕分享功能,具体信息请参见 TRTC SDK。
- 会议中其他成员会收到 onUserVideoAvailable 的事件通知。
::: dart dart await trtcMeeting.stopCameraPreview(); trtcMeeting.startScreenCapture( videoFps: 10, videoBitrate: 1600, videoResolution: TRTCCloudDef.TRTC_VIDEO_RESOLUTION_1280_720, videoResolutionMode: TRTCCloudDef.TRTC_VIDEO_RESOLUTION_MODE_PORTRAIT, appGroup: iosAppGroup, ); :::! 屏幕分享和摄像头采集是两个互斥的操作,如果需要打开屏幕分享功能,请先调用 stopCameraPreview 关闭摄像头采集。详情请参见 TRTC SDK。
- 通过 sendRoomTextMsg 可以发送普通的文本消息,所有在该会议内的参会人员均可以收到 onRecvRoomTextMsg 回调。即时通信 IM 后台有默认的敏感词过滤规则,被判定为敏感词的文本消息不会被云端转发。
- 通过 sendRoomCustomMsg 可以发送自定义(信令)的消息,所有在该会议内的参会人员均可以收到 onRecvRoomCustomMsg 回调。自定义消息常用于传输自定义信令,例如用于禁言之类的会场控制等。