JS SDK使用更新时间：2020-02-11 18:42:53

名词解释:

  1. 实例：实例化SDK后的对象。
  2. 容器：通过实例创建的文档、白板对象
  3. 元件：具有绘制权限的人，在容器内操作产生的图形

注意：

  • 当与其它SDK同时使用时，必须先实例化此SDK成功后，再实例化其它SDK。

文档白板实例

创建实例

let opt = {
	appId: '456', // appId，必填
	accountId: 'zzzz', // 第三方用户id，必填
	role: VHDocSDK.RoleType.Host, // 角色，必填
	token:'mmmm', // token，必填
	isVod: false, // 是否是回放，必填
	channelId: '123', // 频道id，isVod为true时，必填
	roomId: 'yyyy', // 房间ID，isVod为true时，必填
	client: DocSDK.Client.PC_WEB, // 客户端类型
	mode: DocSDK.PlayMode.INTERACT // 当前播放流类型，选填，默认值为： DocSDK.PlayMode.FLV
}

let failed = obj => {
	console.error(obj.msg)
}

let success = () => {
}
let sdk = VHDocSDK.createInstance(opt, success, failed)

销毁实例

// 销毁实例、销毁所有容器、销毁所有
sdk.destroy()
sdk = null

事件监听

翻页事件

sdk.on(VHDocSDK.Event.PAGE_CHANGE, event => {
/* event内容
{
	id:"document-5cbbb8f", // 当前选中的容器id
	info:{
			docType: "h5" // 演示的文档类型
			hash: "e4d67e902b9ecddd157ed3ffbadb6bc4" // 文档hash
			pageHash: "e4d67e902b9ecddd157ed3ffbadb6bc4/0" // 文档对应的pageHash
			slideIndex: 0 // 当前页码
			slidesTotal: 4 // 总页码
			stepIndex: 0 // 当前步数
			stepsAll: [1, 1, 1, 1,] 每页的总步数
			totalSteps: 1 // 当前页的总步数
		｝
｝*/
	console.log(event);
})

创建容器事件

// 创建容器事件
sdk.on(VHDocSDK.Event.CREATE_CONTAINER, event => {
/* event内容
	{
		id: "容器id", 
		width: 发起端容器宽度, 
		height: 发起端容器高度, 
		type: "创建何种容器， document | board"
	}
*/
	console.log(event);
})

选择容器

sdk.on(VHDocSDK.Event.SELECT_CONTAINER, event => {
/* event内容
	{id: "容器id"}
*/
	console.log(event);
})

文档加载完成

sdk.on(VHDocSDK.Event.DOCUMENT_LOAD_COMPLETE, event => {
    // 数据格式同  翻页事件 VHDocSDK.Event.PAGE_CHANGE
})

开关变换

sdk.on(VHDocSDK.Event.SWITCH_CHANGE, e => {
    // e = ‘on’| 'off'
})

删除容器时候触发的事件

sdk.on(VHDocSDK.Event.DELETE_CONTAINER, event => {
    // {id: "容器id"}
})

报错信息

sdk.on(VHDocSDK.Event.ERROR, event => {
/*
{
	code: '',
	msg: '' // 错误信息
}
*/
})

视频回放中，timeupdate事件

sdk.on(VHDocSDK.Event.VOD_TIME_UPDATE, event => {
/*
{
	activeId:'', // 当前正在演示哪个容器
	container: [], // 当前在页面上的容器列表（未被选中 和 已选中的）
	watchOpen: true // 当前观看端显隐状态
}
*/
})

回放文件加载完成事件

sdk.on(VHDocSDK.Event.VOD_CUEPOINT_LOAD_COMPLETE, event => {
/*
	调用 sdk.getVodAllCids() 获取所有容器，构建UI
*/
})

接口调用

创建白板

let opts = {
    elId:'xxx', // div 容器 必须
    width: 200, // div 宽度，像素单位，数值型不带px 必须
    height: 200, // div 高度，像素单位，数值型不带px 必须
    backgroundColor: 'RGBA' // 背景颜色， 支持RGB 与 RGBA， 如果全透明，舞台背景色与网页背景色相同，如 ‘#FF0000’或 ‘#FF000000’ 必须
}
let id = sdk.createBoard(opts) // 创建成功后，返回模块id
  • 注意当创建多次白板容器时，请使用不同的容器ID（elId）

创建文档

let opts = {
    elId:'xxx', // div 容器 必须
    width: 200, // div 宽度，像素单位，数值型不带px 必须
    height: 200, // div 高度，像素单位，数值型不带px 必须，
	docId:'yyy' // 文档id
}
let id = sdk.createDocument(opts) // 创建成功后，返回文档模块id
  • 注意当创建多次文档容器时，请使用不同的容器ID（elId）

销毁（文档白板）容器

let opts = {
    id:'xxx', // 容器id 必填
}
sdk.destroyContainer(opts)

加载文档

let opts = {
	docId:'xxxx', //文档id
	id:'xxxx' // 容器id
} // 该文档配置信息

sdk.loadDoc(opts)

文档上一页

let opts = {
	id: 'xxx' // 容器id， 必填
}
sdk.prevPage(opts)

文档下一页

let opts = {
	id: 'xxx' // 容器id， 必填
}
sdk.nextPage(opts)

文档页跳转

let opts = {
	id: 'xxx', // 容器id， 必填
	page: 1 // 跳转到某页，数字，必填
}
sdk.gotoPage(opts)

文档上一步

let opts = {
	id: 'xxx', // 容器id， 必填
}
sdk.prevStep(opts)

文档下一步

let opts = {
	id:'xxx' // 容器id， 必填
}
sdk.nextStep(opts)

文档跳转某步

let opts = {
	id:'xxx', // 容器id， 必填
	pageId: 1, // 页码 数字 必填
	stepId: 1, // 步数 数字 必填
}
sdk.gotoStep(opts)

获取文档缩略图

let opts = {
	id:'xxx', // 容器id， 必填
}
sdk.getThumbnailList(opts)

/* 返回数据
[
	{id: "document-b4bb74e", list: [url1,url2.url3]}
	{id: "document-df00305", list: [url1,url2.url3]}
	{id: "document-0c072bf", list: [url1,url2.url3]}
] */

设置画笔

let opts = {
	id:'xxx', // 容器id， 必填
}
sdk.setPen(opts)

设置荧光笔

let opts = {
	id:'xxx', // 容器id， 必填
}
sdk.setHighlighters(opts)

设置四边形

let opts = {
    id:'xxx', // 容器id， 必填
}
sdk.setSquare(opts)

设置圆形

let opts = {
    id:'xxx', // 容器id， 必填
}
sdk.setCircle(opts)

设置文字功能

let opts = {
    id:'xxx', // 容器id， 必填
}
sdk.setText(opts)
// 选中工具后，点击屏幕，屏幕会出现文字，便可对其进行修改。
// 若要再次进行文字输入，需要再次setText

设置图片

let opts = {
    id:'xxx', // 容器id， 必填
}
sdk.setBitmap(opts)

设置等腰三角形

let opts = {
    id:'xxx', // 容器id， 必填
}
sdk.setIsoscelesTriangle(opts)

设置直角三角形

let opts = {
    id:'xxx', // 容器id， 必填
}
sdk.setRightTriangle(opts)

设置单箭头

let opts = {
    id:'xxx', // 容器id， 必填
}
sdk.setSingleArrow(opts)

设置双箭头

let opts = {
    id:'xxx', // 容器id， 必填
}
sdk.setDoubleArrow(opts)

取消画笔

let opts = {
    id:'xxx', // 容器id， 必填
}
sdk.cancelDrawable(opts)

设置画笔粗细

let opts = {
    id:'xxx', // 容器id， 必填
    width: 8 // 画笔粗细，数字，必填
}
sdk.setStrokeWidth(opts)

设置画笔颜色

let opts = {
    id:'xxx', // 容器id， 必填
    color: '#FF0000' // 画笔颜色，必填
}
sdk.setStroke(opts)

橡皮擦

let opts = {
    id:'xxx', // 容器id， 必填
}
sdk.setEraser(opts)

获取所有容器列表

// 直播
sdk.getLiveAllCids()

// 点播、回放
sdk.getVodAllCids()

获取所有开关列表

sdk.getVodAllWatchStatus()

放大

// 开启缩放模式，进入放大模式、此时取消正在使用的文档功能：如画笔、涂鸦等
let opts = {
    id:'xxx', // 容器id
}
sdk.zoomIn(opts)

缩小

// 开启缩放模式，进入缩小模式、此时取消正在使用的文档功能：如画笔、涂鸦等
let opts = {
    id:'xxx', // 容器id
}
sdk.zoomOut(opts)

移动

// 进入移动模式、此时取消正在使用的文档功能：如画笔、涂鸦等
let opts = {
    id:'xxx', // 容器id
}
sdk.move(opts)

还原

// 还原整体画布大小、此时取消正在使用的文档功能：如画笔、涂鸦等
let opts = {
    id:'xxx', // 容器id
}
sdk.zoomReset(opts)

取消缩放功能

// 取消缩放、移动模式。 恢复默认行为：画笔
let opts = {
    id:'xxx', // 容器id
}
sdk.cancelZoom(opts)

设置编辑权限

sdk.setEditable(val) // 布尔类型

设置大小

let opts = {
    id: 容器id
}
sdk.setSize(w, h, opts)

设置用户角色

// 设置用户角色， sdk会根据用户角色进行权限设置
let role= VHDocSDK.RoleType.Host
sdk.setRole(role)

设置播放模式

// 因播放源存在 互动流，flv流，hls流 会引发延迟大小不一，这里设置指定播放模式用来控制接收到消息后的消息同步问题
let mode = VHDocSDK.PlayMode.INTERACT // 设置互动模式
sdk.setPlayMode(mode)

激活某容器

let opts = {
    id:'xxx'
}
// 如果找到了对应id的容器，返回容器，否则返回null
let result = sdk.selectContainer(opts) // 该方法会清空当前正在操作的容器！若选中失败（传入不存在的ID），使用时需要注意一下

观看端显示所有容器

let opts = {}
sdk.switchOnContainer(opts)

观看端隐藏所有容器

let opts = {}
sdk.switchOffContainer(opts)

拉取所有容器列表

// 异步方法，返回Promise. 数据在then 的res里
/*
    res = {
                list: [], // 文档白板容器列表信息
                switch_status:0 // 观看端是否显示文档、白板容器
            }
*/
/*
    list 内容
    {
        active: 0 //是否被激活
        backgroundColor: "#FFFFFF" //如果是白板，就是白板的背景色
        ch: 600
        cid: "document-57a8cf2" // 容器id
        converted_page: 9 // 已转换页数
        converted_page_jpeg: 9 // 已转换静态页数
        cw: 800
        docId: "e7cb684d" // 文档的id
        doc_type: 1 // 文档类型
        ext: "ppt" // 文档扩展名
        hash: "79076e8dd74b39498a8a036db7483d77"
        height: 540
        is_board: 1 // 是否是白板
        page: 9 // 总页码
        pageData: [{hash: "79076e8dd74b39498a8a036db7483d77", uniqueID: 1565869286300, currentPage: 0, page: 9,…},…] // 页码内数据
        show_page: 0 // 当前页
        show_step: 0 // 当前步数
        status: "200" // 转换PPT状态
        status_jpeg: "200" // jpg转换状态
        switch_status: 0 // 开关状态
        width: 720
    }
*/
sdk.getContainerInfo().then(res => console.log('数据内容：',res))

重置容器列表

// 异步请求，清空所有的容器列表，此时再进入场景，服务端就不再返回任何容器内容，同时重置显示内容
sdk.resetContainer()

全局定义

客户端类型

可选值 事件 备注
VHDocSDK.Client.PC_WEB PC端Web网页浏览器
VHDocSDK.Client.H5_WEB 移动端Wap网页浏览器
VHDocSDK.Client.ANDROID 微信内置浏览器

角色类型

可选值 事件 备注
VHDocSDK.RoleType.Host 演讲人
VHDocSDK.RoleType.GUEST 嘉宾
VHDocSDK.RoleType.SPECTATOR 普通观众
VHDocSDK.RoleType.ASSISTANT 助理

播放模式

可选值 事件 备注
VHDocSDK.PlayMode.INTERACT 互动，0延迟
VHDocSDK.PlayMode.FLV flv，低延迟，默认5秒
VHDocSDK.PlayMode.HLS hls，较高延迟，默认15秒