实时互动-教育版原生内核

开发环境要求
Xcode 14
前置准备
您已 注册腾讯云 账号，并完成 实名认证 。
步骤一：创建新的应用
1. 登录 实时互动-教育版 控制台，进入左侧导航栏的概览，选择新建应用。
2. 若尚未创建应用，则默认进入“创建应用”界面，输入应用名称，例如 TestLCIC。
﻿
若您已创建应用，可前往应用管理中，选择使用已有应用即可。
﻿
说明：
移动端需要购买旗舰版或企业尊享版后，方可接入移动端。若需创建商用应用，可根据业务需求在 购买页 创建对应版本的应用。
应用名称只允许下划线、数字或中英文字符。
步骤二：获取 SDKAppId 和密钥(SecretKey)
1. 进入 应用管理 > 应用配置，获取应用 ID（SDKAppId）。
2. 进入 访问管理(CAM)控制台 获取密钥，若无密钥，需要在 API 密钥管理中进行新建，具体可参考 访问密钥管理 。
﻿
﻿
﻿
步骤三：获取进入课堂所需参数
1. 通过调用云 API 接口 RegisterUser 注册用户，可以获取到对应的用户 ID(userId)信息。
2. 通过云 API 接口 LoginUser 登录，可以获取到用户鉴权 token 信息。
3. 通过云 API 接口 CreateRoom 创建课堂，可以获取到课堂号(classId)信息。
字段
类型
必填
含义
备注
userid
string
是
用户名。
通过 RegisterUser 接口获取。
classid
string
是
课堂 ID。
通过 CreateRoom 接口创建返回获取。
token
string
是
后台鉴权参数。
通过 LoginUser 接口获取。
role
string
否
进入课堂角色，默认空。
可选参数 supervisor(巡课/内容审查) ，只有已注册应用内巡课用户才有权限。
lng
string
否
语言参数，默认 zh-CN。
当前支持中文(简体)、中文(繁体) 、English、韩语、日语、阿拉伯语、越南语。可拼接相应参数，展示对应语种。参数：zh-CN、zh-TW、en-US、ka、ja、ar、vi。
location
boolean
否
是否上报经纬度位置信息。
默认 false 不上报。
layout
string
否
页面布局。
默认顶部布局(top)，当前仅视频文档模式有效，支持双排布局（double）、右侧布局(right）、左侧布局(left)、三分布局(three)。
boardColor
string
否
白板颜色。
白板颜色设置，默认为：#182E25 ，支持 Hex 格式，也支持 rgba(0, 0, 0, .3)设置。
noEndClass
boolean
否
禁用下课。
助教进房时带上这个参数，在助教点击退出时，将隐藏「下课」，仅展示「离开」按钮。
快速跑通
根据下面的步骤您可以快速跑通项目，具体代码也可以参见 Demo。
步骤一：安装依赖
在您的 Podfile 中导入依赖文件。
// framework 使用静态集成
   use_frameworks! :linkage => :static
  // 根据不同的版本号，修改链接，下方示例为使用1.0.1 版本
  pod 'tcic_ios', :podspec => 'https://ios.qcloudclass.com/1.0.4/tcic_ios.podspec'
如果没有Podfile，请使用 pod init生成Podfile 文件。
User Script Sandboxing 设置为 No。
﻿
说明：
请使用真机进行调试，音视频等插件在模拟器上无法看到效果。
步骤二：权限配置
在教学场景中，通常我们会用到音视频互动，屏幕共享等功能，因此需要应用配置对应的权限。
在 Info.plist 中添加以下权限描述：
<!-- 相册权限 -->
    <key>NSPhotoLibraryUsageDescription</key>
    <string>Video calls require photo library permission.</string>
﻿
        <!-- 相机权限 -->
    <key>NSCameraUsageDescription</key>
    <string>Video calls require camera permission.</string>
﻿
﻿
    <!-- 麦克风权限 -->
    <key>NSMicrophoneUsageDescription</key>
    <string>Voice calls require microphone permission.</string>
﻿
﻿
    <!-- 网络配置 -->
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>
﻿
﻿
    <!-- 后台模式 -->
    <key>UIBackgroundModes</key>
    <array>
        <string>fetch</string>
    </array>
﻿
﻿
    <!-- 屏幕录制扩展 -->
    <key>com.apple.security.application-groups</key>
    <array>
        <string>group.com.tencent.comm.tcic.sharescreen</string>
    </array>
步骤三：初始化 SDK
在您的页面首次进入的时候需要初始化 TCIC SDK，您可以根据您的实际业务来处理。
import SwiftUI
import tcic_ios
﻿
@main
struct tcic_ios_simple_demoApp: App {
    init() {
        // 初始化SDK
        TCICManager.shared.initialize();
    }  
﻿
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}
﻿
步骤四：设置回调事件
如果您需要监听课堂相关的事件，可添加相关回调，同初始化一样，您只需要添加一次即可。
@State private var callback: TCICCallback = TCICCallback() // 初始化回调事件
﻿
﻿
    self.callback.afterExitedClassBlock = {
        print("dismiss page");
    }
    self.callback.onJoinedClassFailedBlock = {
        print("joined class failed");
    }
    TCICManager.shared.setCallback(callback);
步骤五：设置进入课堂的必要参数
您可以根据您的场景进入课堂页面，参数如下。
let headerConfig = TCICHeaderComponentConfig();
    let messageConfig = TCICMessageComponentConfig();
    headerConfig.headerLeftBuilder = headerLeftBuilder;
    let config = TCICConfig(
        token: "", /// 通过云API获取的token
        classId: "", /// 课堂id
        userId: "", /// 用户userId
        role: 1, /// 用户角色，0: 学生,1: 老师, 3: 助教, 4: 巡课
        headerComponentConfig: headerConfig, /// Header 组件配置， 具体参数请参考TCICHeaderComponentConfig
        messageComponentConfig: messageConfig /// Message 组件配置，具体参数请参考TCICMessageComponentConfig
        ...config, /// 您还可以设置其他组件的自定义配置
    );
    TCICManager.shared.setConfig(config)
步骤六：进入课堂页面
您可以根据业务需要在合适的时机打开课堂页面，如下展示点击按钮后，打开课堂页面。
Button(action: {
    let headerLeftBuilder: TCICHeaderComponentConfig.HeaderBuilder = {
        return MyHeaderLeftView(messenger: TCICManager.shared.Tengine.binaryMessenger);
    }
﻿
﻿
    let headerConfig = TCICHeaderComponentConfig();
    let messageConfig = TCICMessageComponentConfig();
    headerConfig.headerLeftBuilder = headerLeftBuilder;
    headerConfig.headerLeftBuilderWidth = 200;
    headerConfig.headerLeftBuilderHeight = 40
    let config = TCICConfig(
        token: "", /// 通过云API获取的token
        classId: "", /// 课堂id
        userId: "", /// 用户userId
        role: 1, /// 用户角色，0: 学生,1: 老师, 3: 助教, 4: 巡课
        headerComponentConfig: headerConfig, /// Header 组件配置， 具体参数请参考TCICHeaderComponentConfig
        messageComponentConfig: messageConfig /// Message 组件配置，具体参数请参考TCICMessageComponentConfig
        ...config, /// 您还可以设置其他组件的自定义配置
    );
    TCICManager.shared.setConfig(config)
    isActive = true
}) {
    Text("打开TCIC页面")
        .frame(maxWidth: .infinity)
        .padding()
        .background(Color.blue)
        .foregroundColor(.white)
        .cornerRadius(8)
}
.padding(.horizontal)
.fullScreenCover(isPresented: $isActive, onDismiss: {
    TCICManager.shared.Tengine.viewController = nil
}) {
    TCICManager.TPage()
        .edgesIgnoringSafeArea(.all)
}
﻿
步骤七：自定义 View
创建 Native View
import Foundation
import UIKit
import tcic_ios
import Flutter
﻿
﻿
class MyHeaderLeftView: TCICViewFactory {
    override init(messenger: FlutterBinaryMessenger) {
        super.init(messenger: messenger)
    }
    override func createNativeView(frame: CGRect, viewId: Int64, args: Any?) -> UIView {
        let view = UIView(frame: frame)
        view.backgroundColor = .blue
﻿
        let label = UILabel(frame: CGRect(x: 0, y: 0, width: 180, height: 48))
        label.text = "My Header Left View From Ios"
        label.textColor = .white
        label.textAlignment = .center
        view.addSubview(label)
﻿
        return view
    }
}
将 Native View 注册到 SDK
在设置课堂参数部分，可以传入`headerComponentConfig`，您只需要将您的自定义`native view` 传入即可。
    let headerConfig = TCICHeaderComponentConfig();
﻿
    let headerLeftBuilder: TCICHeaderComponentConfig.HeaderBuilder = {
        return MyHeaderLeftView(messenger: TCICManager.shared.Tengine.binaryMessenger);
    }
﻿
    headerConfig.headerLeftBuilder = headerLeftBuilder; // builder
    headerConfig.headerLeftBuilderWidth = 200; // 宽
    headerConfig.headerLeftBuilderHeight = 40 // 高
﻿
  let config = TCICConfig(
        token: "", /// 通过云API获取的token
        classId: "", /// 课堂id
        userId: "", /// 用户userId
        role: 1, /// 用户角色，0: 学生,1: 老师, 3: 助教, 4: 巡课
        headerComponentConfig: headerConfig, /// Header 组件配置， 具体参数请参考TCICHeaderComponentConfig
        ...config, /// 您还可以设置其他组件的自定义配置
    );
    TCICManager.shared.setConfig(config)
TCICConfig 配置类
基础配置
public class TCICConfig {
    let token: String              // 用户认证令牌
    let classId: String            // 课程ID
    let userId: String             // 用户ID
    let role: Int                  // 用户角色
    let langConfig: String?        // 语言配置
    let isLatestBackend: Bool      // 是否使用最新后端
    let isTestBackend: Bool        // 是否使用测试后端
}
组件配置
public class TCICConfig {
    let headerComponentConfig: TCICHeaderComponentConfig?     // 头部组件配置
    let messageComponentConfig: TCICMessageComponentConfig?   // 消息组件配置
    let videoComponentConfig: TCICVideoComponentConfig?       // 视频组件配置
    let fontConfig: TCICFontConfig?                           // 字体配置
    let settingComponentConfig: TCICSettingComponentConfig?   // 设置组件配置
    let whiteBoardComponentConfig: TCICWhiteBoardComponentConfig? // 白板组件配置
    let membersComponentConfig: TCICMembersComponentConfig?   // 成员组件配置
}
callbacks
public class TCICCallback {
    /**
     * 加入课堂成功回调
     */
    public var onJoinedClassSuccessBlock: (() -> Void)?
    
    /**
     * 退出课堂回调
     */
    public var afterExitedClassBlock: (() -> Void)?
    
    /**
     * 加入课堂失败回调
     */
    public var onJoinedClassFailedBlock: (() -> Void)?
    
    /**
     * 被踢出课堂回调
     */
    public var onKickedOffClassBlock: (() -> Void)?
    
    /**
     * 成员加入课堂回调
     * @param userId 用户信息
     */
    public var onMemberJoinedClassBlock: (([String: Any]) -> Void)?
    
    /**
     * 成员离开课堂回调
     * @param userId 用户信息
     */
    public var onMemberLeaveClassBlock: (([String: Any]) -> Void)?
    
    /**
     * 收到消息回调
     * @param messageJson 消息内容
     */
    public var onReceivedMessageBlock: (([String: Any]) -> Void)?
    
    /**
     * 发生错误回调
     * @param code 错误代码
     * @param message 错误信息
     */
    public var onErrorBlock: ((String, String) -> Void)?
}
组件配置系统
头部组件配置 (TCICHeaderComponentConfig)
let headerConfig = TCICHeaderComponentConfig()
﻿
// 设置左侧视图
headerConfig.headerLeftBuilder = {
    return MyHeaderLeftView(messenger: TCICManager.shared.flutterEngine.binaryMessenger)
}
headerConfig.headerLeftBuilderWidth = 200
headerConfig.headerLeftBuilderHeight = 40
﻿
// 设置头部视图
headerConfig.headerBuilder = {
    return MyHeaderView(messenger: TCICManager.shared.flutterEngine.binaryMessenger)
}
headerConfig.headerBuilderWidth = 300
headerConfig.headerBuilderHeight = 50
﻿
// 设置头部操作视图
headerConfig.headerActionsBuilder = {
    return MyHeaderActionsView(messenger: TCICManager.shared.flutterEngine.binaryMessenger)
}
headerConfig.headerActionsBuilderWidth = 150
headerConfig.headerActionsBuilderHeight = 40
﻿
// 设置右侧视图
headerConfig.headerRightBuilder = {
    return MyHeaderRightView(messenger: TCICManager.shared.flutterEngine.binaryMessenger)
}
headerConfig.headerRightBuilderWidth = 200
headerConfig.headerRightBuilderHeight = 40
消息组件配置 (TCICMessageComponentConfig)
let messageConfig = TCICMessageComponentConfig()
﻿
// 设置消息头部视图
messageConfig.messageHeaderBuilder = {
    return MyMessageHeaderView(messenger: TCICManager.shared.flutterEngine.binaryMessenger)
}
messageConfig.messageHeaderBuilderWidth = 200
messageConfig.messageHeaderBuilderHeight = 30
﻿
// 设置消息气泡视图
messageConfig.messageBubbleBuilder = {
    return MyMessageBubbleView(messenger: TCICManager.shared.flutterEngine.binaryMessenger)
}
messageConfig.messageBubbleBuilderWidth = 250
messageConfig.messageBubbleBuilderHeight = 80
﻿
// 设置消息项视图
messageConfig.messageItemBuilder = {
    return MyMessageItemView(messenger: TCICManager.shared.flutterEngine.binaryMessenger)
}
messageConfig.messageItemBuilderWidth = 300
messageConfig.messageItemBuilderHeight = 60
﻿
// 设置消息行视图
messageConfig.messageRowBuilder = {
    return MyMessageRowView(messenger: TCICManager.shared.flutterEngine.binaryMessenger)
}
messageConfig.messageRowBuilderWidth = 350
messageConfig.messageRowBuilderHeight = 40
音视频组件配置 (TCICVideoComponentConfig)
let videoConfig = TCICVideoComponentConfig()
﻿
// 设置视频操作视图
videoConfig.videoActionBuilder = {
    return MyVideoActionView(messenger: TCICManager.shared.flutterEngine.binaryMessenger)
}
videoConfig.videoActionBuilderWidth = 200
videoConfig.videoActionBuilderHeight = 50
﻿
// 设置视频浮动视图
videoConfig.videoFloatBuilder = {
    return MyVideoFloatView(messenger: TCICManager.shared.flutterEngine.binaryMessenger)
}
videoConfig.videoFloatBuilderWidth = 120
videoConfig.videoFloatBuilderHeight = 80
技术支持
如果您在使用过程中遇到问题，可以通过以下方式获取技术支持：
﻿腾讯云实时互动-教育版官方文档﻿
﻿腾讯云开发者社区﻿
﻿GitHub Issues﻿

字段	类型	必填	含义	备注
userid	string	是	用户名。	通过 RegisterUser 接口获取。
classid	string	是	课堂 ID。	通过 CreateRoom 接口创建返回获取。
token	string	是	后台鉴权参数。	通过 LoginUser 接口获取。
role	string	否	进入课堂角色，默认空。	可选参数 supervisor(巡课/内容审查) ，只有已注册应用内巡课用户才有权限。
lng	string	否	语言参数，默认 zh-CN。	当前支持中文(简体)、中文(繁体) 、English、韩语、日语、阿拉伯语、越南语。可拼接相应参数，展示对应语种。参数：zh-CN、zh-TW、en-US、ka、ja、ar、vi。
location	boolean	否	是否上报经纬度位置信息。	默认 false 不上报。
layout	string	否	页面布局。	默认顶部布局(top)，当前仅视频文档模式有效，支持双排布局（double）、右侧布局(right）、左侧布局(left)、三分布局(three)。
boardColor	string	否	白板颜色。	白板颜色设置，默认为：#182E25 ，支持 Hex 格式，也支持 rgba(0, 0, 0, .3)设置。
noEndClass	boolean	否	禁用下课。	助教进房时带上这个参数，在助教点击退出时，将隐藏「下课」，仅展示「离开」按钮。

原生内核

本页目录：

开发环境要求

前置准备

步骤一：创建新的应用

步骤二：获取 SDKAppId 和密钥(SecretKey)

步骤三：获取进入课堂所需参数

快速跑通

步骤一：安装依赖

步骤二：权限配置

步骤三：初始化 SDK

步骤四：设置回调事件

步骤五：设置进入课堂的必要参数

步骤六：进入课堂页面

步骤七：自定义 View

创建 Native View

将 Native View 注册到 SDK

TCICConfig 配置类

基础配置

组件配置

callbacks

组件配置系统

头部组件配置 (TCICHeaderComponentConfig)

消息组件配置 (TCICMessageComponentConfig)

音视频组件配置 (TCICVideoComponentConfig)

技术支持