WebSDK
用于点播/直播课程学时监管,并上报用户学时、播放进度、学习状态等数据。
# HOST
# 运行环境
-
主流PC浏览器(Edge,Firefox,Chrome,Safari,Opera)不支持在IE浏览器中使用。
-
不支持移动端浏览器使用,可能会出现交互异常。
-
支持搭配主流框架使用,React,Vue,Angular,或服务端渲染。
-
对于点播视频课程,需要使用 原生播放器,或基于 原生播放器的视频插件。
# 版本
-
最新版: v0.0.0
- 更新说明
# 验证规则
滑块拖动验证。
输入数字验证。
第三方活体验证。
小程序扫码-人脸验证。
输入后四位身份证号码验证。
# EsModule-环境使用
-
$ npm i jjb-web-supervision-sdk
-
$ yarn add jjb-web-supervision-sdk
# 基础示例
# 点播/直播代码示例
# API
字段/属性 | 描述 | 类型 | 参数 | 返回值 |
---|---|---|---|---|
init(option: object, getContext: () => void) | 初始化SDK,拉取学时监管平台数据。 | Function | - | void |
check() | 检查SDK运行状态,true正常 | false异常。3.3.4新增 | Function | - | boolean |
destroy(callback: () => void) | 销毁SDK,关闭正在进行的任何验证,或提示。 | Function | callback 销毁完成时回调 | void |
在实际情况中调用 销毁SDK,建议在离开当前页面调用。
已销毁的SDK需要,请在的中重新调用你的初始化流程。
# 初始化: option
字段/属性 | 说明 | 类型 | 示例 |
---|---|---|---|
log | 是否在控制台打印日志 | boolean | true | false |
host | 接口网关地址(参考上面HOST) | string | https://xxx.xx.com |
player | 播放器对象(直播模式忽略),仅支持HTML媒体元素(、)或基于媒体元素开发的第三方插件 | HTMLVideoElement | document.querySelector('video') |
studyInfos | 初始化数据(studyInfos) | object | { [propName: string]: string } |
listener | 事件监听(listener) | object | -- |
controls | 控制选项(listener) | object | -- |
# 初始化: controls
字段/属性 | 说明 | 类型 | 示例 |
---|---|---|---|
disabledDisconnectTip | 可选 | 禁用SDK与服务器断开连接的重启提示弹出框,默认 | boolean | true | false |
注意:SDK与服务器断开连接后在多次自动重连无效的情况下,会激活事件,若不需要此功能,可将设为
设为时,SDK与服务器断开连接后在多次自动重连无效的情况下,会
# 初始化: listener
字段/属性 | 说明 | 类型 | 回调 |
---|---|---|---|
onFirstValidateEnd(e) | 可选 | 监听初始化-首次验证结束 | Function | TS:(e: Event & { value: any }) => void |
onFirstValidateStart(e) | 可选 | 监听初始化-首次验证开始 | Function | TS:(e: Event & { value: any }) => void |
onDestroyedHandler(e) | 可选 | 监听初始化-SDK已销毁 | Function | TS:(e: Event & { value: any }) => void |
onConnectHandler(e) | 可选 | 监听初始化-SDK连接服务器成功。3.3.5新增 | Function | TS:(e: Event & { value: any }) => void |
onConnectErrorHandler(e) | 可选 | 监听初始化-SDK连接服务器错误。3.3.4新增 | Function | TS:(e: Event & { value: any }) => void |
onDisconnectHandler(e) | 可选 | 监听SDK-onDisconnectHandler。3.3.4新增 | Function | TS:(e: Event & { value: any }) => void |
onResponseIntercept(e) | 可选 | 监听SDK所有http请求响应,包括socket。3.0.1新增 | Function | TS:(e: {}) => void |
onRestart(option?: { lastSeconds?: number }) | 可选 | 监听SDK与服务器断开连接的重启回调。3.3.5新增 | Function | - |
注意:在为有效。激活时会返回一个当前视频播放进度秒数。
# Context
字段/属性 | 说明 | 类型 | 示例 |
---|---|---|---|
popupStatus | 是否弹出验证框(点播/直播通用) | boolean | sdk.popupStatus |
onMessage | 监听SDK消息 | Function | sdk.onMessage((e: { type: string, lastSecounds?: number }) => void) |
IS_READY | 已完成上下文初始化(首次验证完成之后)(点播/直播通用) | string | sdk.onMessage((e: { type: string }) => type === sdk.IS_READY) |
VERIFY_LIFE_CYCLE_RULE_ACTIVE | 验证生命周期:验证规则激活(点播/直播通用) | string | sdk.onMessage((e: { type: string }) => type === sdk.VERIFY_LIFE_CYCLE_RULE_ACTIVE) |
VERIFY_LIFE_CYCLE_RULE_ENTER | 验证生命周期:验证规则进入(点播/直播通用)3.3.4新增 | string | sdk.onMessage((e: { type: string }) => type === sdk.VERIFY_LIFE_CYCLE_RULE_ENTER) |
VERIFY_LIFE_CYCLE_RULE_END | 验证生命周期:验证规则结束(点播/直播通用) | string | sdk.onMessage((e: { type: string }) => type === sdk.VERIFY_LIFE_CYCLE_RULE_END) |
VERIFY_LIFE_CYCLE_RULE_EXIT | 验证生命周期:验证规则退出(点播/直播通用)3.3.4新增 | string | sdk.onMessage((e: { type: string }) => type === sdk.VERIFY_LIFE_CYCLE_RULE_EXIT) |
注意:激活时会返回一个属性,此属性为当前视频上次结束时的进度秒数,你可以在SDK用于时定位你的播放器进度。
# studyInfos
字段名 | 描述 | 直播必传 | 点播必传 | 备注 |
---|---|---|---|---|
plan_code | 计划编号 | 是 | 是 | - |
plan_name | 计划名称 | 是 | 是 | - |
id_card | 学员身份证 | 是 | 是 | - |
course_code | 课程编号 | 否 | 是 | 直播根据接入方具体情况传入 |
course_name | 课程名称 | 否 | 是 | 直播根据接入方具体情况传入 |
chapter_code | 课程章节编号 | 否 | 是 | 直播根据接入方具体情况传入 |
chapter_name | 课程章节名称 | 否 | 是 | 直播根据接入方具体情况传入 |
section_code | 课程小节编号 | 否 | 是 | 直播根据接入方具体情况传入 |
section_name | 小节名称 | 否 | 是 | 直播根据接入方具体情况传入 |
course_type_enum | 课程类型 | 是 | 是 | |
app_key | APPKEY | 是 | 是 | - |
train_post_code | 岗位编号 | 是 | 是 | - |
train_post_name | 岗位名称 | 是 | 是 | - |
video_url | 点播课程视频地址 | 否 | 是 | - |
school_code | 平台学校编号 | 是 | 是 | - |
duration_all | 计划课程总时长 | 否 | 否 | - |
duration | 视频时长 | 否 | 是 | - |
descrip | 视频描述 | 否 | 否 | - |
start_time | 视频开始时间 | 否 | 否 | - |
train_type_enum | 培训类型 | 是 | 是 | SEND_JXJY:继续教育 SEND_GQPX:岗前培训 |
end_time | 视频结束时间 | 否 | 否 | - |
args_json | 扩展字段 | 否 | 否 | - |
credit_status_enum | 是否记录学时 | 否 | 否 | TRUE:是;FALSE:否 |
mobile | 学员电话 | 是 | 是 | - |
student_name | 学员姓名 | 是 | 是 | - |
plans_json | 多计划参数 | 否 | 否 | // 如果传入该字段则按以下规则传入 [ { // 必填 "plan_code": "计划编号1", // 必填 "plan_name": "计划名称1", "train_post": [ { // 必填 "train_post_code": "岗位编号1", // 必填 "train_post_name": "岗位名称1" } ] }, { // 必填 "plan_code": "计划编号2", // 必填 "plan_name": "计划名称2", "train_post": [ { // 必填 "train_post_code": "岗位编号1", // 必填 "train_post_name": "岗位名称2" } ] } ] |
# 常见问题
-
缺少必要的HOST参数,或不是一个正确的http(s)地址。
初始化init函数中要传入接口网关地址。
-
缺少必要的player参数,或不是一个正确HTMLMediaElement 元素。
如果初始化课程类型为请检查是否传入,或player是否类型正确!
-
PC端是否需要“device_name”和“device_code”?
由于PC端场景复杂,暂时不需要以上两个字段。
-
为什么有了onMessage,还需要一个listener?
onMessage是SDK初始化完成后才能使用,listener是SDK无论是否初始化都能使用,某些场景需要在初始化完成之前做一下特殊功能处理。
-
SDK初始化过程中,如何给我的点播/直播页面加loading效果?
判断sdk上下文是否生成,如果生成并发出IS_READY事件,则表示sdk已完成初始化。
// ...执行你的启用loading函数 // if (sdk) { sdk.onMessage(r => { if (r.type === sdk.IS_READY) { // 初始化完成,此处执行你的关闭loading函数 } }) } // 如果遇到SDK初始化失败,你可以在listener中监听异常事件,并关闭你的loading。 -
我的点播课程视频地址是Object URL怎么办?
如果你的点播课程视频地址类似,SDK是支持的。
-
sdk.onMessage是一个 的回调函数,SDK向外发起执行命令-接收。
-
注意: 必须与视频资源时长一致,否则会出现学时异常!
-
注意: 必须与视频资源地址一致,否则会出现学时异常!
-
注意: 必须与视频资源名称一致,否则会出现学时异常!
-
注意: onMessage() type为时, 请自行调用函数,否则会出现SDK验证弹框浮层被原生video覆盖问题。
document.exitFullscreen(); -
注意:使用 , 等 框架开发时,返回上一页,请调用 。
import { destroy } from 'jjb-web-supervision-sdk'; // 销毁 destroy(); -
注意:为SDK初始化必须放在播放器实例回调函数中。
-
注意:生产环境请关闭日志打印。