一、开发环境要求
在开始之前,请确保你的开发环境满足以下要求,并建议你提前阅读 uni-app 原生语言插件使用教程,了解如何引入原生插件。
·iOS:系统版本要求 11.0 及以上。
·Android:API Level 要求 21 及以上。
二、Demo 及源码体验
为了帮助你快速了解并体验集成了腾讯云实时互动-教育版的 uni-app 应用,我们提供了完整的 Demo 及配套源码。
·获取源码:你可以访问 GitHub 仓库 获取完整源码。
·快速体验 Demo:如果你使用的是 Android 设备,可直接扫描下方二维码,下载并安装我们打包好的 uni-app 体验包。
体验说明:
进入应用后,你可以直接复制 线上 Demo 创建的课堂 链接进入课堂。
注意:说明:
注意:你也可以手动在链接末尾拼接 Token 参数(格式为 &token=$TOKEN,Token 可通过按 F12 打开控制台,在 Network 的课堂请求 Payload 中获取),将其贴入输入框,系统将自动解析参数。
三、步骤1:获取必要信息
请参考 接入准备 创建应用并获取必要信息。
注意:说明:
注意:移动端接入需要购买旗舰版或企业尊享版,请创建对应版本的应用。
四、步骤2:导入 SDK
1. 引入 TRTC 插件:前往插件市场购买(免费)腾讯云实时音视频 SDK(插件 1),并绑定至你的项目。
2. 引入 LCIC 插件:前往 GitHub 仓库 下载腾讯云实时互动-教育版 uni-app 插件包(插件 2)。将压缩包内的 lcic-sdk-pro 文件夹放入你本地项目的 nativeplugins 目录下(若无此目录请手动创建)。
3. 配置 manifest:在 HBuilderX 中打开项目,进入 manifest.json 的 App 原生插件配置,勾选上述两个插件。
注意:说明:
注意:更新建议:Native SDK 会不定期迭代,建议你持续关注 GitHub 仓库 的更新动态,及时下载最新包并替换本地 nativeplugins 中的旧版本。
五、步骤3:SDK 授权申请
App 开发需要获取以下两种 License:
六、1. Web 引擎 License(Android 平台需要)
·测试环境:请参考 申请 Web 引擎测试用 License,完成流程至第四部分获取 LicenseKey 即可。
·正式环境:购买旗舰版后,请通过 联系我们 加入微信群联系技术支持申请正式版 License。
七、2. 播放器授权(仅“直播大班课”需要)
如果是“直播大班课”班型,需申请播放器权限。请按以下模板填写信息并提交 腾讯云工单,相关疑问可通过 联系我们 加入微信群了解。
注意:一个旗舰版仅支持授权一个正式包名,请确认信息无误。
| 参考模板提供信息:问题:实时互动-教育版申请播放器授权公司名称:联系方式:App Name:Package Name (Android):Bundle ID (iOS): |
八、步骤4:初始化 Web 引擎
相比于 Android 系统自带的 WebView,Web 引擎在兼容性和加载速度上具有显著优势。
1. 合规性检查:请务必在用户同意隐私政策协议之后,再调用 Web 引擎初始化方法,以避免应用上架时因“未经同意收集个人信息”被拒。
2. 执行初始化:在进入课堂前,必须保证该方法执行完毕。若初始化成功,将使用 Web 引擎进入课堂;若初始化失败,SDK 会自动降级采用系统 WebView 兜底方案,不影响正常进入课堂。
const lcicModule = uni.requireNativePlugin('lcic-sdk-pro');lcicModule.initX5Core({ licenseKey: "你的 Web 引擎 LicenseKey" // 见步骤3获取的 LicenseKey}, (ret) => { if (ret && ret.code === 0) { console.log("Web 引擎初始化成功,后续将采用 Web 引擎方案"); } else { console.warn("Web 引擎初始化失败,后续将采用系统 WebView 兜底方案"); }});
注意:说明:
注意:若持续出现 Web 引擎初始化失败的情况,可通过 联系我们 加入微信群联系技术支持排查。
九、步骤5:获取进入课堂所需参数
调用进入课堂接口前,需准备相关参数。参数来源如下:
| 字段名 | 类型 | 必填 | 含义 | 获取方式 / 备注 |
| schoolId | int | 是 | 学校编号 | 即控制台中的 SDKAppId。 |
| classId | long | 是 | 课堂编号 | 通过服务端 API CreateRoom 创建课堂后返回的 RoomId。 |
| userId | string | 是 | 用户账号 | 通过服务端 API RegisterUser 注册获取。 |
| token | string | 是 | 鉴权 Token | 通过服务端 API LoginUser 登录获取。 |
| scene | string | 否 | 场景名称 | 用于区分不同的定制布局,有两种配置方式:方式1:使用 SetAppCustomContent 接口配置。方式2:控制台 场景配置。 |
| lng | string | 否 | 语言参数 | 界面语言设置。支持值:zh-CN:中文简体zh-TW:中文繁体en-US:英语ja:日语ko:韩语ar:阿拉伯语vi:越南语id:印尼语 |
| camera | int | 否 | 初始摄像头状态 | 1:开启(默认),0:关闭。 |
| mic | int | 否 | 初始麦克风状态 | 1:开启(默认),0:关闭。 |
| speaker | int | 否 | 初始扬声器状态 | 1:开启(默认),0:关闭。 |
十、步骤6:调起组件主页面
传入上述获取的参数,即可唤起 LCIC 课堂主页面。
const lcicModule = uni.requireNativePlugin('lcic-sdk-pro');lcicModule.joinClass({ schoolId: schoolId, // 等同于 SDKAppId classId: classId, userId: userId, token: token, // 可选参数 // camera: 1, // mic: 1}, (res) => { // 进入课堂的回调处理 console.log("进入课堂结果:", res);});
十一、步骤7:编译与运行
·调试阶段:建议你制作包含 TRTC 和 LCIC 两个插件的自定义调试基座进行真机运行调试。
·发布阶段:调试无误后,可使用 HBuilderX 的云打包功能,打包导出最终的 App 安装包。