接入预解析能力 (Web端)

技术原理

老师点击工具栏中的资料中心功能

sdk 调用前端传入的 showResourceCenter 回调

在 showResourceCenter 函数中，前端应展示资料中心页面/弹窗

老师选择资料中心中准备好的预解析资源

前端调用 sdk 实例的 insertObject 函数，向课堂中插入预解析资源

sdk 调用 getPreParseFileName 函数，获取预解析资源的 URL 全地址，以加载预解析资源。由于一个预解析资源中包含多个文件，所以插入一个资源时，这个函数会被调用多次。

前端向后端拿到全地址后，把全地址作为 getPreParseFileName 的返回值，返回给 sdk

预解析资源所涉及文件 sdk 都拿到后，展示预解析资源

接入预解析能力

接入预解析需要搞明白三个函数

直播 sdk 接入预解析：涉及 showResourceCenter、insertObject、getPreParseFileName 三个函数，对应上文时序图 1~8 点

播放器 sdk 接入预解析：涉及 getPreParseFileName 一个函数，对应上文时序图 6~8 点

下面详细讲解三个函数的作用

回调函数 showResourceCenter

该回调函数需要在创建课堂时传入，详见云盘接入文档、Web SDK 文档、Electron SDK 文档

实例函数 insertObject

详见云盘接入文档、Web SDK 文档、Electron SDK 文档

回调函数 getPreParseFileName

该回调函数需要在创建课堂/播放器时传入，详见云盘接入文档、Web SDK 文档、Electron SDK 文档、播放器 SDK 文档

使用 JS-SDK

预解析能力只支持 JS-SDK 方式接入 SDK

对照下表来检查代码中是否存在url接入方式，如果有，需要调整接入方式

⚠️ JS-SDK 是较为底层的接入方式，以 JS-SDK 方式接入的播放器没有进度条等播放控件，需要用户自己实现。实现方式可以参考 demo。

sdk	平台	接入方式	支持预解析	如何接入
直播sdk	web sdk	url	×	文档
	web sdk	js-sdk	√	文档
	electron sdk	js-sdk	√	文档
播放器sdk	web sdk	url	×	文档
播放器sdk	web sdk	js-sdk	√	文档

JS-SDK demo

为方便迁移到 JS-SDK 接入方式，此处提供了一些各场景下的 demo 供参考。

历史课堂录制页面是给录制器调用来实现录制的，为了配合录制器，对页面实现有特殊要求：

需要提供一个单独的录制页面供录制使用

该页面打开后应加载好要录制的历史课堂，播放器应撑满页面

window.upimePlayReady。准备好播放后调用该方法（接收到播放器 SDK 的 canplay 事件，即表示播放器准备好播放）

window.upimePlayStart。开始播放时调用该方法，通知录制器开始录制

window.upimePlayEnd。播放结束后调用该方法，通知录制器结束录制（接收到播放器 SDK 的 ended 事件，即表示播放结束）

window.plasoUpimePlayerController.play。录制器会调用该方法，通知录制页面开始播放。函数定义为 () => void，请实现并暴露该方法，在方法中调用播放器 SDK 的播放命令。

技术原理#

接入预解析能力#

回调函数 showResourceCenter#

实例函数 insertObject#

回调函数 getPreParseFileName#

使用 JS-SDK#

JS-SDK demo#

上课 (with 直播 sdk)#

监课 (with 直播 sdk)#

历史课堂播放 (with 播放器 sdk)#

历史课堂录制 (导出mp4) (with 播放器 sdk)#

技术原理

接入预解析能力

回调函数 showResourceCenter

实例函数 insertObject

回调函数 getPreParseFileName

使用 JS-SDK

JS-SDK demo

上课 (with 直播 sdk)

监课 (with 直播 sdk)

历史课堂播放 (with 播放器 sdk)

历史课堂录制 (导出mp4) (with 播放器 sdk)