接入预解析能力 (Web端)

技术原理

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

sdk 调用前端传入的 showResourceCenter 回调

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

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

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

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

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

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

接入预解析能力

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

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

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

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

回调函数 showResourceCenter

老师点击课堂中的“资料中心”按钮时，会触发该回调，见上文时序图第2步。

前端需要在该函数中写下展示资料中心的逻辑，如demo。

该回调函数需要在创建课堂时传入

实例函数 insertObject

老师选择资料中心中的资源后，前端要向课堂中插入该资源，通过 sdk 的实例函数 insertObject实现

insertObject 函数可以用来插入普通资源，也可以用来插入预解析资源。各自的插入方法详见云盘接入文档、插入预解析资源demo、插入普通资源demo

回调函数 getPreParseFileName

预解析资源中包含多个文件，sdk 需要得到几个关键文件的 URL 全地址并加载好后，才能将预解析资源展示出来。这个文件 URL 全地址就是通过回调函数 getPreParseFileName 获取的，见时序图第6步。

函数定义详见demo、云盘接入文档、直播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 供参考。

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

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

录制服务打开该页面时，会传入 recordId 参数，告知前端页面要录制的是哪个课堂

前端页面需要读取该参数，加载对应的历史课堂

播放器应撑满页面

window.upimePlayReady。准备好播放后调用该方法

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

window.upimePlayEnd。播放结束后调用该方法，通知服务端结束录制

window.plasoUpimePlayerController.play。函数定义为 () => void，请实现并暴露该方法，在方法中执行播放，服务端会调用该方法（详细流程见上文时序图）。

技术原理#

接入预解析能力#

回调函数 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)