腾讯云实时互动教育版Web 和 H5_音视频解决方案_同尘科技

本文主要介绍如何快速将腾讯云实时互动-教育版 LCIC Web/H5 应用快速集成到您的项目中。

前提条件

1. 您已经 注册腾讯云 账号，并完成 实名认证。2. 您使用的桌面或手机浏览器能够支持音视频服务。详细要求可参考 Web 端常见问题。

步骤一：创建新的应用

1. 登录 实时互动-教育版控制台，在左侧导航栏选择快速跑通。2. 默认进入创建应用页面，应用类型可选择“新建应用”，输入应用名称，例如 TestLCIC。若您已创建应用，应用类型项可以单击“关联已有应用”。说明：每个账号可免费领用一个试用版应用，若需创建商用版应用，可根据业务需求在 购买页 选择并购买对应版本。3. 添加或编辑标签（可选） ，单击下一步。
说明：应用名称只允许使用下划线、数字或中英文字符。标签用于标识和组织您在腾讯云的各种资源。例如：企业可能有多个业务部门，每个部门有1个或多个 LCIC 应用，这时，企业可以通过给 LCIC 应用添加标签来标记部门信息。标签并非必选项，您可根据实际业务需求添加或编辑。

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

1. 进入 应用管理 > 应用配置，获取 SDKAppId。2. 进入 访问管理(CAM)控制台 获取密钥，若无密钥，需要在 API 密钥管理中进行新建，具体可参见 访问密钥管理。

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

1. 通过调用云 API 接口 RegisterUser 注册用户，可以获取到对应的用户 ID(userid)信息。2. 通过云 API 接口 LoginUser 登录，可以获取到用户鉴权token信息。3. 通过云 API 接口 CreateRoom 创建课堂，可以获取到课堂号(classid)信息。4. 明确需要集成的课堂版本：latest。5. 其中scene、debugjs、debugcss为非必填参数，在需要自定义 UI 时才需设置，具体可参见 自定义 UI 集成。其中debugjs和debugcss只用于自定义布局、组件时的调试，且只支持通过localhost或127.0.0.1的地址进行访问，在发布阶段请勿使用此参数。6. lng、location、layout也是非必填参数，业务侧可自行判断是否需要传入，不传则使用默认值，其中layout参数只有在教室布局为视频+文档布局(videodoc)时才生效。

步骤四：进入课堂

标准功能

将刚才获取到的参数，按以下规范拼接出用户进入课堂的 URL，通过跳转此 URL 链接即可实现 Web 端的集成。https://class.qcloudclass.com/latest/class.html?userid=${userid}&token=${token}&classid=${classid}具体链接如下所示：

https://class.qcloudclass.com/latest/class.html?userid=12345&token=yJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2ODAwNzQwMjEsImlhdCI6MTY3OTQ2OTIyMSwiaXNzIjoibFpNQ2tvTjNkSGlnVmhhcXJkdFc0cU9JYWpleVh2RWwiLCJzY2hvb2xfaWQiOjM5MjMxOTMsInVzZXJfaWQiOiIyTG9XREU2aHhzOUNCNVhCczZHT1BnVXpweUgifQ.2wzh6eUC4llbbGhchGDOYbDrsdSdymfP3zjLLPjnOII&classid=368507569

说明：在拼接的 URL 中userid与 创建课堂 指定的老师 ID（teacherid）是一致的，则当前用户为老师。若与当前课堂的助教 ID (assistantid)一致，则为助教，否则为学生。

高级功能

自定义 UI 集成

实时互动-教育版 LCIC Web/H5 目前还提供了自定义 UI 的集成方案。用户可自定义业务侧课中的布局及样式，通过 自定义 UI 部分 可以获取到业务侧的 JS 及 CSS 链接，将debugjs及debugcss参数拼接到上方的链接上即可（此参数只用于调试），如下所示：

https://class.qcloudclass.com/latest/class.html?userid=12345&token=yJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2ODAwNzQwMjEsImlhdCI6MTY3OTQ2OTIyMSwiaXNzIjoibFpNQ2tvTjNkSGlnVmhhcXJkdFc0cU9JYWpleVh2RWwiLCJzY2hvb2xfaWQiOjM5MjMxOTMsInVzZXJfaWQiOiIyTG9XREU2aHhzOUNCNVhCczZHT1BnVXpweUgifQ.2wzh6eUC4llbbGhchGDOYbDrsdSdymfP3zjLLPjnOII&classid=368507569&debugjs=http://localhost:443/demo/dist/myLib.umd.min.js&debugcss=http://localhost:443/demo/dist/myLib.css

当自定义 JS 与 CSS 调试完成后，可通过云 API 接口 SetAppCustomContent 或控制台 > 应用配置 > 场景配置将场景与自定义的 JS、CSS 链接进行绑定，在进入课堂时将scene参数拼接到 URL 上，即可加载对应场景的布局及组件。在涉及多种班型、多种布局时，业务侧可根据此参数实现场景的切换。如下所示：

http://class.qcloudclass.com/latest/class.html?userid=12345&token=yJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2ODAwNzQwMjEsImlhdCI6MTY3OTQ2OTIyMSwiaXNzIjoibFpNQ2tvTjNkSGlnVmhhcXJkdFc0cU9JYWpleVh2RWwiLCJzY2hvb2xfaWQiOjM5MjMxOTMsInVzZXJfaWQiOiIyTG9XREU2aHhzOUNCNVhCczZHT1BnVXpweUgifQ.2wzh6eUC4llbbGhchGDOYbDrsdSdymfP3zjLLPjnOII&classid=368507569&scene=default

自定义业务域名

在课中页面时，若业务侧想隐藏课堂域名，只显示业务域名，可通过 内容分发网络(CDN)控制台 新建业务域名，并回源到课堂域名即可，详细流程请参考 自定义业务域名。

其他相关文档

LCIC API自定义 UI 集成Web 常见问题

对音视频的解决方案有疑惑？想了解解决方案收费？ 联系解决方案专家

腾讯云限时活动1折起，即将结束： 马上收藏

同尘科技为腾讯云授权服务中心，购买腾讯云享受折上折，更有现金返利:同意关联，立享优惠

阿里云解决方案也看看？： 点击对比阿里云的解决方案