AgoraClassroomSDK学生端问题：教师无法全屏显示仅呈缩略图

当前基于Agora Edu SDK开发在线教学视频课堂，学生端需求为：所有学生以缩略图展示，教师视频全屏显示。但实际运行中，教师自身的视频也会出现在顶部缩略图栏中，不符合需求。

给出的学生端启动代码如下：

func launchAgora(uuid: String , token: String)
{
    let appId = DATA_CONSTANT.appAgoraId  // Your app ID
    let rtmToken = token  // Your signaling token
    let userUuid = uuid  // Your user ID
    let class_type = Int(DATA_CONSTANT.dicAgoraMeetingClassData?.class_type ?? "4") ?? 4
    let mediaOptions = AgoraEduMediaOptions(encryptionConfig: nil, videoEncoderConfig: nil, latencyLevel: .ultraLow, videoState: .on, audioState: .on)

    let launchConfig = AgoraEduLaunchConfig(userName: "\(DATA_CONSTANT.dicuserData?.first_name ?? "") \(DATA_CONSTANT.dicuserData?.last_name ?? "")",  // The user name
                                                userUuid: userUuid,  // The user ID
                                                userRole: .student,  // The user role
                                            roomName: DATA_CONSTANT.dicAgoraMeetingClassData?.roomnaame ?? "",  // The room name
                                            roomUuid: DATA_CONSTANT.dicAgoraMeetingClassData?.roomid ?? "",  // The room ID
                                            roomType: AgoraEduRoomType(rawValue: class_type) ?? .small,  // The room type, 0: One-to-one interactive teaching, 2: Big class, 4: Online interactive small class
                                                appId: appId, token: rtmToken,
                                                startTime: nil,  // The starting time of the class
                                                duration: NSNumber(value: 7200),  // The class duration
                                                region: AgoraEduRegion(rawValue: 3) ?? .AP,  // The area
                                                mediaOptions: mediaOptions,  // Media stream related settings
                                                userProperties: nil)  // User properties defined by the developer
    AgoraClassroomSDK.setDelegate(self)
    AgoraClassroomSDK.launch(launchConfig, success: launchSuccessBlock, failure: failureBlock)
}

核心思路 #

通过AgoraClassroomSDK的代理回调，拦截视频视图的添加逻辑，根据用户角色（教师/学生）将视图分别渲染到全屏容器和缩略图容器，避免教师视图重复出现在缩略栏。

具体实现步骤 #

1. 确保已设置SDK代理
   你已经在代码中调用了AgoraClassroomSDK.setDelegate(self)，接下来需要实现AgoraClassroomDelegate协议中的视图添加/移除方法。

2. 实现代理方法控制视图渲染
   在你的ViewController中扩展实现代理逻辑，区分教师和学生的视图处理：

   extension YourViewController: AgoraClassroomDelegate {
       // 当有用户视频视图添加时触发
       func onVideoViewAdded(_ view: UIView, userUuid: String, role: AgoraEduUserRole) {
           // 判断当前视图所属用户为教师
           if role == .teacher {
               // 将教师视图添加到全屏容器（需提前在界面中创建好fullScreenContainer）
               fullScreenContainer.addSubview(view)
               view.frame = fullScreenContainer.bounds
               view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
               return // 跳过缩略图容器添加逻辑
           }
           
           // 学生视图添加到缩略图容器（提前创建thumbnailContainer）
           thumbnailContainer.addSubview(view)
           // 这里可根据需求设置缩略图的布局，比如用UICollectionView管理或自动布局排列
       }
       
       // 当有用户视频视图移除时触发
       func onVideoViewRemoved(_ userUuid: String, role: AgoraEduUserRole) {
           if role == .teacher {
               // 移除全屏容器中的教师视图
               fullScreenContainer.subviews.forEach { $0.removeFromSuperview() }
           } else {
               // 移除缩略图容器中对应学生的视图（可根据userUuid精准查找）
               thumbnailContainer.subviews.first(where: { /* 匹配userUuid的逻辑 */ })?.removeFromSuperview()
           }
       }
   }
   

3. 验证房间类型和角色配置
   确认launchConfig中的userRole设置为.student，roomType匹配你的课堂场景（当前设置为.small在线互动小班，符合需求）。

额外注意事项 #

• 如果使用SDK默认的UI组件，可能需要关闭默认的缩略栏自动添加逻辑，或者通过自定义UI完全接管视图渲染。
• 测试时确保教师端的角色设置为.teacher，避免角色混淆导致布局错误。

内容的提问来源于stack exchange，提问作者Mayur Prajapati - MeProgrammer