WEB版本
一、准备阶段
微课本地录制必须使用 nw 或 electron 环境下,且当前的html必须是本地html,即location.protocal必须是 file:// 协议。
在app根目录下的 lib/lame/ 中存放 lame.exe 的可执行文件
如果是windows系统,还要在app根目录下的 lib/ 中存放 zip.exe 文件
** 二、接入和使用指南**
接入步骤
引入 plaso_style_upime.js ,js地址: https://wwwr.plaso.cn/static/sdk/js/plaso_style_upime-1.30.202.js
调用 PlasoStyleUpime.createLocalClient 创建微课录制的 sdkClient 对象
// 默认无需调用,当使用开发环境appId接入调试时,需要切换到 dev 环境
PlasoStyleUpime.setEnv("dev");
var sdkClient = PlasoStyleUpime.createLocalClient(dom, options, interfaces);
dom: dom类型,用来装载实时课堂页面的dom节点。
options: 对象类型
参数名 | 参数类型 | 是否必填 | 说明 |
---|---|---|---|
path | string | 是 | 制作微课、存放草稿的目录。MAC电脑上为保证有读写权限的,path不要位于userData目录外。 |
topic | string | 否 | 当传入非空字符串时表示默认微课名,不会在界面上显示,但在制作完成时会弹窗对其进行编辑。 |
enablePreview | boolean | 否 | 当enablePreview为true时,将开放制作微课过程中预览剪切的功能。 |
electron获取userData目录方法:
`var dataPath = app.getPath("userData");`
interfaces: 对象类型,用来传入回调函数。
回调接口名 | 说明 |
---|---|
onReady | 当sdkClient初始化完成后触发。 |
onCancel | 点击退出按钮时触发。sdk界面不会主动退出,需要调用sdkClient.destroy退出 |
onSaveDraft | 当sdk执行保存草稿动作后触发,返回lessonInfo对象,以下是函数定义和lessonInfo的定义 |
onFinished | 当sdk执行制作完成动作后触发,返回lessonInfo对象,以下是函数定义和lessonInfo的定义(注意和onSaveDraft的区别): |
getOpQuery | 微课本地插入word、excel文件时需要调用getOpQuery接口,如果未传入该接口则无法解析文档。接收一个对象,返回Promise, Promise的结果为签名后的query。这个query是一个字符串,包含signature字段,以下是函数定义 |
showResourceCenter | 非必要。用于通知客户端打开资料中心,详见附录-资料中心 |
getExtFileName | 非必要。用于根据info返回文件访问路径,详见 文档解析接入方式 |
onSaveDraft示例代码:
interface LessonInfo{
cover: string,//封面地址
duration:number,//时长
size:number,//微课文件的大小 单位 b
topic:string//标题
}
declare function onSaveDraft( lessonInfo: LessonInfo ):void
onFinished示例代码:
interface LessonInfo{
cover: string,//封面地址
duration:number,//时长
size:number,//所有文件的大小 单位 b
topic:string//标题
fileName:string,//压缩文件地址
refFiles:Array //一个储存额外信息的数组
recordId:string //微课视频的唯一id
}
declare function onFinished( lessonInfo: LessonInfo ):void
三、保存草稿
微课sdk保存草稿后会调用onSaveDraft回调,返回lessonInfo
客户端可根据lessonInfo中返回的信息在本地维护草稿列表
四、上传微课
微课sdk在制作完成时会调用onFinished回调,返回lessonInfo
此时页面不会退出,需要客户端手动调用sdkClient.destroy()
客户端可以调用PlasoStyleUpime.save方法将微课内容上传到自己的oss
五、sdkClient对象的方法
insertObject向sdk中插入外部文件,详见
文档解析接入方式 |
destroy()关闭微课页面,销毁sdkClient对象
save()上传制作的微课到oss,以下是函数定义和参数声明:
type Query = string//包含appId、validBegin、validTime、signature的签名字符串
interface OSSToken{
accessKeyId:string,
accessKeySecret:string,
stsToken:string,
uploadPath:string,//要上传到bucket下的目录路径
bucket:string,
region:string,
provider:string,//要上传到的云,目前仅支持阿里.例provider:"OSS"
expire:number //有效时间秒数(绝对时间),如 Math.floor((Date.now() / 1000))
}
interface saveResult{
code:number,//标识操作结果状态,0标识成功
path:string,//上传到的远程oss地址(包含协议域名等完整的地址)
cover:string//封面地址(包含协议域名等完整的地址)
}
interface UploadStatus{
onUploadProgress?:(uploadedLength:number , totalLength:number ) => void
onUploadFinished?:(status:saveResult)=> void
}
interface OptionParam{
token:OSSToken,
uploadStatus?:UploadStatus,
autoDelete?:boolean//完成后是否清空目录
}
declare function save(query:Query,path:string,option:OptionParam):Promise<saveResult>
参数 | 说明 |
---|---|
path | 是存放微课的目录 |
OSSToken | 参考阿里,不过我们定义的对象里面多了uploadPath字段,表示要上传的目录路径(bucket下) |
UploadStatus | 是一个对象,可以有两个回调函数onUploadProgress,通知回调进度,onUploadFinished 通知操作结果 |
autoDelete | 表示操作结束后是否把文件删除(默认不删除) |
六、参考代码Demo
Demo 下载地址