网页大直播场景应用

什么是网页大直播？

注意： 因小程序存在一定限制，本文档提供的方案均不支持对接微信小程序。

ClassIn 网页大直播是指教师使用 ClassIn 教室进行授课，学生通过网页观看直播课程。

相比互动在线教室，网页大直播不限制观看端数量，且观看端无需下载 ClassIn 客户端。缺点是仅支持简单的文字聊天互动，不支持音视频及其他复杂的教学互动功能。

适用场景： 大班课、活动直播、录播课等参与人数多、互动需求较低的场景。

方案选择

对比项 方案一：iframe 嵌入 方案二：拉流
开发成本 低 高
可扩展性 低 高
播放器 使用 ClassIn 提供的页面 需自行开发
鉴权控制 依赖平台技术手段防止链接暴露 可完全自定义
适用场景 大直播引流、公益直播、大班课 录播课售卖、高安全性要求、高度定制化

方案一：iframe 嵌入 ClassIn 直播回放页面

将 ClassIn 提供的直播回放页面通过 iframe 内嵌到您的客户端（APP、网页等）中，无需自行开发播放器。

对接步骤：

  1. 完成用户与排课对接；
  2. 记录课节的直播回放地址（live_url），获取方式参考 1.1；
  3. 将直播回放页面用 iframe 内嵌到相应网页；
  4. 通过消息订阅接收用户观看记录数据并处理存储展示。

代码示例：

<iframe src="https://www.eeo.cn/live.php?lessonKey=0a9c56ba30c05733"></iframe>

效果展示：点击跳转查看

1.1 如何获取直播回放播放器地址？

调用以下任意接口均可在响应中获取课节直播回放地址，字段名为 live_url：

说明： live_url 在直播进行时为直播地址，课节结束后自动转换为回放地址。

示例：https://www.eeo.cn/live.php?lessonKey=0a9c56ba30c05733

直播播放器页面内置了聊天室功能。若课节开启了"登录后才能观看/聊天"，用户需填写手机号登录后方可使用。为简化用户操作，可参考 1.2 实现免二次登录。

1.2 直播播放器免二次登录

若直播回放页面要求用户登录才能观看，可通过以下方式实现免密登录，用户无需再次输入账号密码。账号信息将体现在直播聊天室及观看数据中。

1.2.1 课节直播回放地址免二次登录

获取课节直播回放地址（例：https://www.eeo.cn/live.php?lessonKey=xxx）后，将参数拼接到以下免登录地址：

https://live.eeo.cn/live_partner.html

注意： 免二次登录地址与直播播放器地址不是同一个地址。

参数说明：

参数 必填 说明
lessonKey 是 从直播器地址中获取
account 是 学生账号，长度小于 32 个字符
nickname 是 学生昵称，长度小于 24 个字符
checkCode 是 签名值，规则：md5(secret + lessonKey + account + nickname)
secret — 即 SECRET，在 eeo.cn API 对接密钥处获取，仅用于签名计算，不参与 URL 拼接

拼接示例：

https://live.eeo.cn/live_partner.html?lessonKey=00d1c98a91c52568&account=13700000000&nickname=classin&checkCode=d8c57caf088529b4ddd15b0f694d847b

1.2.2 课程直播回放地址免二次登录

注意： 此地址可跳转至该课程下任意课节的直播回放。如不希望用户访问课程下所有课节，请改用 1.2.1 中的单课节地址。

通过获取课程直播/回放播放器地址接口获取播放器链接（例：https://www.eeo.cn/webcast.php?courseKey=xxx&lessonid=xxx）后，将参数拼接到以下免登录地址：

https://live.eeo.cn/webcast_partner.html

参数说明：

参数 必填 说明
courseKey 是 从直播器地址中获取
lessonid 否 从直播器地址中获取，不传则默认跳转最新课节
account 是 学生账号，长度小于 32 个字符
nickname 是 学生昵称，长度小于 24 个字符
checkCode 是 签名值，规则：md5(secret + courseKey + account + nickname)
secret — 即 SECRET，在 eeo.cn API 对接密钥处获取，仅用于签名计算，不参与 URL 拼接

拼接示例：

https://live.eeo.cn/webcast_partner.html?courseKey=7be856f28907f1a2&lessonid=123456&account=18600123456&nickname=eeo&checkCode=febe50cd50ba4d3af506bfa118a3845b

1.3 如何获取用户观看数据？

可通过消息订阅接收：

  • 课节进行中： 实时推送直播观看数据；
  • 课节结束后： 推送回放相关数据。

将所需消息类型发送给技术支持即可开通订阅。

方案二：拉流方案（需自行开发播放器）

注意： 该方案需要您的平台自行开发播放器页面，ClassIn 仅提供直播画面流。

若您的平台已有支持直播流或 mp4 回放的播放器，或希望完全自定义直播页面的样式与交互，可采用此方案。

对接步骤：

  1. 完成用户与排课对接；
  2. 记录课节拉流地址，获取方式参考 2.1；
  3. 直播中：使用播放器播放拉流地址；
  4. 课后：通过消息订阅接收录课文件地址，使用播放器播放回放文件。

2.1 如何获取拉流地址？

调用以下任意接口均可获取拉流地址：

目前支持三种拉流协议，对比如下（仅供参考）：

对比项 RTMP HLS FLV（HTTP-FLV）
连接方式 TCP 长连接 HTTP 短连接 HTTP 长连接
原理 实时转发 生成 ts 切片并更新 m3u8 索引 同 RTMP，走 HTTP 协议（80 端口）
延时 1–3s 5–20s（依切片情况） 1–3s
H5 支持 需插件 原生支持 需插件
其他说明 跨平台支持较差，依赖 Flash 多次请求，对网络质量要求高 不支持多音视频流，进度拖拽体验较差

常见问题

Q：什么是 iframe，如何使用？

iframe 用于在当前页面中嵌入另一个页面，在 HTML 中添加 <iframe> 标签并指定 src 即可。

<iframe src="url"></iframe>

详细用法参考：iframe 使用教程

Q：拉流是什么，如何使用？

拉流是指从服务器已有的直播流中，通过指定地址按特定协议（RTMP、HLS、FLV 等）读取视频内容的过程。

参考资料：推流与拉流简介 · 开源流媒体解决方案推荐（仅供参考）

results matching ""

    No results matching ""