RtcWhiteboard

Properties

bgScaleMode

• bgScaleMode: WBImageScalingMode = RtcWhiteboard.WBImageScalingMode.Fit

画布缩放适应背景图的模式(直接设置这个属性不会改变缩放模式，请使用 setBackgroundImageScalingMode 方法)

sample code

rtcWbInstance.setBackgroundImageScalingMode(RtcWhiteboard.WBImageScalingMode.AutoFill)

bold

• bold: boolean = false

文字是否加粗，对新绘制的文本生效，如果需要更新已选择的图形，可以调用setSelectedShapeFontStyle

sample code

if (rtcWbInstance.selectedShape) {
  // 仅更改已选择图形的样式
  rtcWbInstance.setSelectedShapeFontStyle({
    bold: true
  })
} else {
  // 全局设置，对新绘制的图形生效
  rtcWbInstance.bold = true;
}

cursorSyncType

• cursorSyncType: 'write' | 'all' = 'write'

同步光标类型。

  • 'write' (默认值)仅在鼠标按下做绘制动作时同步，抬起即结束；
  • 'all' 则只要鼠标移动就会同步，鼠标静止5s清除鼠标位置；

dashed

• dashed: boolean = false

新绘制图形是否是虚线图形，对新绘制的图形生效

fillStyle

• fillStyle: string

填充颜色，仅支持 rgba 格式（如rgba(255, 0, 0, 1)），对新绘制的 shape 生效，如果需要更新已选择的图形，可以调用setSelectedShapeStyle

sample code

if (rtcWbInstance.selectedShape) {
  // 仅更改已选择图形的样式
  rtcWbInstance.setSelectedShapeStyle({
    fillStyle: 'rgba(255, 0, 0, 1)'
  })
} else {
  // 全局设置，对新绘制的图形生效
  rtcWbInstance.fillStyle = 'rgba(255, 0, 0, 1)';
}

fillType

• fillType: "none" | "color" = "none"

新绘制的 shape 的填充类型，填充颜色或者不填充，如果需要更新已选择的图形，可以调用setSelectedShapeStyle

sample code

if (rtcWbInstance.selectedShape) {
  // 仅更改已选择图形的样式
  rtcWbInstance.setSelectedShapeStyle({
    fillType: 'none'
  })
} else {
  // 全局设置，对新绘制的图形生效
  rtcWbInstance.fillType = 'none';
}

fontSize

• fontSize: number = 14

字体大小，对新绘制的文本生效，如果需要更新已选择的图形，可以调用setSelectedShapeFontStyle

sample code

if (rtcWbInstance.selectedShape) {
  // 仅更改已选择图形的样式
  rtcWbInstance.setSelectedShapeFontStyle({
    fontSize: 14
  })
} else {
  // 全局设置，对新绘制的图形生效
  rtcWbInstance.fontSize = 14;
}

italic

• italic: boolean = false

文字是否斜体，对新绘制的文本生效，如果需要更新已选择的图形，可以调用setSelectedShapeFontStyle

sample code

if (rtcWbInstance.selectedShape) {
  // 仅更改已选择图形的样式
  rtcWbInstance.setSelectedShapeFontStyle({
    italic: true
  })
} else {
  // 全局设置，对新绘制的图形生效
  rtcWbInstance.italic = true;
}

lineWidth

• lineWidth: number = 5

画笔宽度，对新绘制 shape 生效，如果需要更新已选择的图形，可以调用setSelectedShapeStyle

sample code

if (rtcWbInstance.selectedShape) {
  // 仅更改已选择图形的样式
  rtcWbInstance.setSelectedShapeStyle({
    lineWidth: 5
  })
} else {
  // 全局设置，对新绘制的图形生效
  rtcWbInstance.lineWidth = 5;
}

sessionProperty

• sessionProperty: object= {}

session 自定义属性，通过 setProperty 方法设置

selectedDrawnShapeTypes

• selectedDrawnShapeTypes: ShapeType[]

控制哪些图形在新创建或新绘制完成后立即被选中。

默认绘制结束后即选中的图形有：

  • ShapeType.Arrow 箭头
  • ShapeType.Audio 音频
  • ShapeType.Circle 正圆
  • ShapeType.Ellipse 椭圆
  • ShapeType.Line 直线
  • ShapeType.Rect 矩形
  • ShapeType.Square 正方形
  • ShapeType.Text 文本
  • ShapeType.Video 视频

strokeStyle

• strokeStyle: string = "rgba(33, 212, 183, 1)"

画笔和边框的颜色，仅支持 rgba 格式（如rgba(255, 0, 0, 1)），对新绘制的 shape 生效，如果需要更新已选择的图形，可以调用setSelectedShapeStyle

sample code

if (rtcWbInstance.selectedShape) {
  // 仅更改已选择图形的样式
  rtcWbInstance.setSelectedShapeStyle({
    strokeStyle: 'rgba(33, 212, 183, 1)'
  })
} else {
  // 全局设置，对新绘制的图形生效
  rtcWbInstance.strokeStyle = 'rgba(33, 212, 183, 1)';
}

thumbnails

• get thumbnails(): string[]

返回当前白板页的缩略图url，目前仅支持转码课件（动态、静态转码），默认文档会返回空数组。

Returns: string[]

tabletMatchMode

• tabletMatchMode: "fitWidth" | "fitHeight" = "fitWidth"

手写板产生的点位和画布的匹配模式，手写板的轨迹点位是手写板的宽/高与画布对应的宽/高的比例作为缩放标准对应到画布上，默认以宽度为准

tabletScale

• tabletScale: number = 1

手写板缩放倍率，默认手写板1：1缩放到屏幕

tabletTranslate

• tabletTranslate: [number, number] = [0, 0]

手写板相对画布的位移。

位移计算不受缩放影响。

tabletWriteMode

• tabletWriteMode: "static" | "sticky" = "static"

移动画布时，手写板书写出现在画板的位置是否受影响。

static: 手写笔在画布上绘制的轨迹受画布拖拽影响，手写板的左上角（坐标原点）和画布的坐标原点保持一致，手写笔和画布是绑定的;

sticky: 手写笔在画布上绘制的轨迹不受画布拖拽影响，手写板的左上角和画布当前可视区域的左上角保持一致;

toolsWrapper

• toolsWrapper: HTMLDivElement

自定义 tools 的挂载 dom 节点

Accessors

activeDoc

• get activeDoc(): DocInfo 获取当前激活的文档信息

Returns: DocInfo

interface DocInfo {
  docId: string; // 文档id
  name: string; // 文档名称
  creator: string  // 创建者 id
  fileKey?: string // 文档或课件对应的fileKey
  pages: {
      scale: number; // 缩放比例
      translate: [number, number]; // 画板偏移量
      backgroundImage?: ImageShape; // 背景图对象，包含背景图 url 信息
      pageId: string;
      backgroundColor: string;
  }[];
  currentPageIndex: number;
  courseware?: {  //  课件信息, 可能为空
    indexUrl: string
    creator: string  // 创建者 id
    slide: number
    step: number
    thumbUrls: string[]  // 课件缩略图，有多少页就有多少图片 url
    width?: number
    height?: number
    totalSlides?: number
    media?: {
      id: string
      play: boolean
      position: number
    }
  }
}

activeDocId

• get activeDocId(): string

获取当前激活的 DocId

Returns: string

backgroundColor

• get backgroundColor(): string

获取当前白板视图的背景颜色

Returns: string

• set backgroundColor(color: string): void

设置当前白板视图的背景颜色(仅支持 rgba 颜色，如: rgba(0, 0, 0, 0))

Parameters:

NameTypeDescription
colorstring仅支持 rgba颜色，如: rgba(0, 0, 0, 0)

Returns: void

isAdmin

• get isAdmin(): boolean

当前用户是否是 admin 用户

Returns: boolean

role

• get role(): WBRoleType

获取当前用户的角色

Returns: WBRoleType

scale

• get scale(): number

获取当前白板视图的缩放比例

Returns: number

selectedShape

• get selectedShape(): undefined | BaseShape‹›

当前被选中的 shape

Returns: undefined | BaseShape‹›

Methods

addAudioShape

▸ addAudioShape(url: string): Promise‹QResult›

添加音频到当前白板页中（支持 .mp3, .ogg 格式）

Parameters:

NameTypeDescription
urlstring音频 url

Returns: Promise‹QResult›

addExternalHtml

▸ addExternalHtml(url: string, name: string, thumbUrls?: string[]): string

向白板中添加外部html页面，外部 html 需要接入 panoExternalHtml sdk 才能被 pano 白板识别

Parameters:

NameTypeDescription
urlstring外部url地址
namestring文档名字
thumbUrls?string[]文档缩略图，可选参数

Returns: string

addImageShape

▸ addImageShape(url: string): Promise‹QResult›

添加图片图形到白板中，图片图形支持拖拽

Parameters:

NameTypeDescription
urlstring背景图片 url

Returns: Promise‹QResult›

addPage

▸ addPage(autoSwitch: boolean): QResult

添加一个新页面到当前文档最后。

添加页面操作是异步的，页面添加成功后会触发 RtcWhiteboard.Events.whiteboardContentUpdate，事件触发后可以通过getTotalNumberOfPages获取当前文档所有页面的总数，通过getCurrentPageNumber获取当前所处的页码

Parameters:

NameTypeDefaultDescription
autoSwitchbooleantrue是否自动切换到新页面

Returns: QResult

sample code

rtcWbInstance.on(RtcWhiteboard.Events.whiteboardContentUpdate, () => {
  console.log('total pages: ', rtcWbInstance.getTotalNumberOfPages());
  console.log('currnet page number: ', rtcWbInstance.getCurrentPageNumber());
})
rtcWbInstance.addPage();

addPdfDoc

▸ addPdfDoc(url, name): string

通过 URL 添加 PDF 文档，返回文档的 docId

Parameters

NameType
urlstring
namestring

Returns

string

addStamp

▸ addStamp(stampId, url, resizable): Promise<void>

设置图章资源。

Parameters

NameTypeDescription
stampIdstring图章id
urlstring图章图片地址
resizableboolean是否是固定大小图章

Returns

Promise<void>

addBackgroundImages

▸ addBackgroundImages(urls: string[], addToCurrentDoc: boolean, docName?: undefined | string, switchToLast?: undefined | false | true): QResult

导入指定数量的背景图，可以插入到当前文档中，或者新建一组文档。

新创建一组文档支持指定文档名称。

Parameters:

NameTypeDefaultDescription
urlsstring[]-图片 url 列表
addToCurrentDocbooleanfalse是否添加到当前文档中
docName?undefined | string-文档名称
switchToLast?undefined | false | true-是否切换到添加的最后一页

Returns: QResult

addVideoShape

▸ addVideoShape(url: string): Promise‹QResult›

添加视频到当前白板页中（支持 .mp4, .ogg, .webm 格式）

Parameters:

NameTypeDescription
urlstring视频 url

Returns: Promise‹QResult›

broadcastMessage

▸ broadcastMessage(message: any): QResult

Parameters:

NameTypeDescription
messageany自定义消息内容

Returns: QResult

clearContents

▸ clearContents(curPage: boolean, type: WBClearType): QResult

清除所有用户在画布上的内容

Parameters:

NameTypeDescription
curPageboolean是否只清除当前页面
typeWBClearType清除内容类型

Returns: QResult

clearDocContents

▸ clearDocContents(docId, clearType): QResult

清除某个文档的内容，该接口需要 admin 角色权限

Parameters:

NameType
docIdstring
clearTypeWBClearType

Returns:

QResult

clearUserContents

▸ clearUserContents(userId: string, curPage: boolean, clearType: WBClearType): QResult

清除画布上的内容，可以指定清除内容类型。

清除别人绘制的内容需要 admin 权限，获取 admin 权限请参考 setRoleType

Parameters:

NameTypeDescription
userIdstring用户id
curPageboolean是否只清除当前页面
clearTypeWBClearType清除的类型

Returns: QResult

center

▸ center(): void

将当前文档或动态课件一键居中，或者将默认白板恢复初始大小。

Returns: void

close

▸ close(): void

关闭白板

Returns: void

closeChannel

▸ closeChannel(): StatusCode

关闭白板频道

注意 频道关闭后所有客户端都会被清出频道，其他标注白板，RtcMessage等也会关闭

Returns: StatusCode

createDoc

▸ createDoc(totalPages, docName, width, height): QResult

创建一个虚拟文档，一般用于对外部文档进行标注，白板作为透明蒙层覆盖在外部文档上，用该接口创建一个和外部文档有一致页数的虚拟文档。

视角宽高用于协调各个客户端的视角大小，与文档大小无特别关联，该值主要会影响到默认视角下白板的缩放（scale），可以设置成如 1600 * 900，保证各个平台的用户都可以以比较合适的比例查看标注内容。

Parameters

NameTypeDescription
totalPagesnumber文档页数
docNamestring文档名称
widthnumber视角宽度(px)
heightnumber视角高度(px)

Returns

QResult

stop

▸ stop(): StatusCode

关闭白板session

注意 session所有客户端都会被清出当前session对应的白板

Returns: StatusCode

coursewareNext

▸ coursewareNext(): void

跳转到课件的下一步

Returns: void

coursewarePrev

▸ coursewarePrev(): void

跳转到课件的上一步

Returns: void

deleteDoc

▸ deleteDoc(docId: string, switchDocId?: string): QResult

删除文档，可以指定删除文档后切换到某个文档

Parameters:

NameTypeDescription
docIdstring删除文档的 id
switchDocId?undefined | string删除后跳转到指定文档（如果不传值，当删除的文档是当前文档时跳转至默认文档）

Returns: QResult

disableCoursewareInteraction

▸ disableCoursewareInteraction(): void

禁止用户通过键盘上下左右键控制课件交互

Returns: void

disableScaleAndMove

▸ disableScaleAndMove(): void

禁止手势缩放面板和移动画布

Returns: void

disableCursorSync

▸ disableCursorSync(): void

关闭光标位置同步功能

Returns: void

disableWheelScale

▸ disableWheelScale(): void

禁止通过滚轮缩放画板

Returns: void

enableCoursewareInteraction

▸ enableCoursewareInteraction(): void

允许用户通过键盘上下左右键控制课件交互

Returns: void

enableCursorSync

▸ enableCursorSync(): void

开启光标位置同步功能

Returns: void

enableScaleAndMove

▸ enableScaleAndMove(): void

启用手势缩放面板和移动画布

Returns: void

enableWheelScale

▸ enableWheelScale(): void

允许通过滚轮缩放画板

Returns: void

enumerateDocs

▸ enumerateDocs(): DocInfo[]

列举出所有的文档信息，如果文档包含课件，会列出课件的详细信息，如课件缩略图等

Returns: DocInfo[]

interface DocInfo {
  docId: string; // 文档id
  name: string; // 文档名称
  creator: string  // 创建者 id
  fileKey?: string // 文档或课件对应的fileKey
  pages: {
      scale: number; // 缩放比例
      translate: [number, number]; // 画板偏移量
      backgroundImage?: ImageShape; // 背景图对象，包含背景图 url 信息
      pageId: string;
      backgroundColor: string;
  }[];
  currentPageIndex: number;
  courseware?: {  //  课件信息, 可能为空
    indexUrl: string
    creator: string  // 创建者 id
    slide: number
    step: number
    thumbUrls: string[]  // 课件缩略图，有多少页就有多少图片 url
    width?: number
    height?: number
    totalSlides?: number
    media?: {
      id: string
      play: boolean
      position: number
    }
  }
}

getCurrentPageNumber

▸ getCurrentPageNumber(): number

获取当前页码，页码从 0 开始

Returns: number

getI18nConfig

获取当前 i18n 配置

▸ getI18nConfig(): object

Returns: object

getRoster

▸ getRoster(): UserInfo[]

获取所有已经加入当前白板session中的用户列表

Returns: UserInfo[]

type UserInfo = {
  name: string
  userId: string
  userData: string  // 自定义用户数据
  joinTime: string
  snid: string
  os: 'android' | 'browser' | 'ios' | 'linux' | 'mac' | 'unknown' | 'windows'
}

getToolType

▸ getToolType(): ShapeType

获取当前的工具类型

Returns: ShapeType

getStatistics

▸ getStatistics(): Statistic[]

统计用户创建的图形数据，按照用户 id 聚合

Returns: Statistic[]

interface Statistic: {
  userId: string;
  shapes: {
      shapeStyle: ShapeStyle;
      shapeId: string;
      visible: boolean;
      type: ShapeType
      fontStyle?: FontStyle;
      text?: string;
  }[];
}

getTotalNumberOfPages

▸ getTotalNumberOfPages(): number

获取总白板页码数

Returns: number

gotoPage

▸ gotoPage(pageIndex: number, docId?: string, autoSwitchToDoc: boolean): QResult

切换到指定页面 (从 0 开始)，默认操作当前文档

Parameters:

NameTypeDefaultDescription
pageIndexnumber-页码
docIdstringthis._activeDocId文档 id，默认操作当前文档
autoSwitchToDocbooleantrue是否跳转到这个文档, 默认跳转到文档

Returns: QResult

getTranslate

▸ getTranslate(): object

获取画板当前在水平和竖直方向的位移

Returns: object

  • x: number 水平方向的位移

  • y: number 竖直方向的位移

getViewportPosition

▸ getViewportPosition(): object

返回当前白板视窗可见区域的坐标

Returns: object

  • maxx: number 横坐标最大值

  • maxy: number 纵坐标最大值

  • minx: number 横坐标最小值

  • miny: number 纵坐标最小值

hideWhiteboard

▸ hideWhiteboard(hideBackgroundImg: boolean): void

隐藏所有的图形元素，可以控制是否隐藏背景图，白板画布隐藏后可直接和课件交互。

对应 showWhiteboard

Parameters:

NameTypeDefaultDescription
hideBackgroundImgbooleanfalse是否隐藏背景图

Returns: void

initVision

▸ initVision(width: number, height: number, limited?: boolean): QResult

设置白板视窗位置，画布会自动缩放到合适的比例，保证所选取的视窗在当前可见区域的正中央。 这是对白板会议的全局设置，设定后其他用户也会遵循这个配置。

在指定 width 和 height 后，默认白板新建的空白白板页也会遵循这个配置。 （动态课件、转码文档、包含背景图的页面除外，这些版面会根据课件或背景图作合适的缩放）

Parameters:

NameTypeDefault valueDescription
widthnumber-视窗宽度
heightnumber-视窗高度
limitedbooleanfalse白板是否限定大小

Returns: QResult

insertPage

▸ insertPage(pageIndex: number, autoSwitch: boolean, docId?: string, autoSwitchToDoc: boolean): QResult

添加一个新页面到指定位置（不支持动态课件）

Parameters:

NameTypeDefaultDescription
pageIndexnumber-指定位置
autoSwitchbooleantrue是否自动切换到新页面，如果当前文档不被激活，也可在后台静默跳转到这个页面
docIdstringthis._activeDocId文档 id，默认操作当前文档
autoSwitchToDocbooleantrue是否切换到这个文档，默认会切换到该文档

Returns: QResult

joinChannel

▸ joinChannel(option: object, onSuccess: function, onFail: function): QResult

加入白板频道。
注意：单独使用白板SDK(@pano.video/whiteboard)时通过此API加入频道；
如果使用完整版SDK(@pano.video/panortc)，请使用 RtcEngine.joinChannel 函数加入频道。

Parameters:

▪ option: object

NameType
appIdstring
channelIdstring
namestring
tokenstring
userIdstring
autoJoinWhiteboardSessionboolean

关于各参数的说明与要求，请参考：名词解释。

autoJoinWhiteboardSession 可以控制加入白板时是否自动连接到白板的session，目前计费是以连接时长计算，如果您不用在一连接到服务器就加入白板的session，可以设置 autoJoinWhiteboardSession: false 控制白板不在第一时间加入 session，后续调用 open api 打开白板时再自动加入session。如果不配置此选项，默认会在连接到服务器时直接加入白板session。

▪ onSuccess: function

▸ (): any

▪ onFail: function

▸ (result: StatusCode): any

Parameters:

NameType
resultStatusCode

Returns: QResult

joinSession

▸ joinSession(): StatusCode

加入白板session

default 白板会自动 joinSession，其他白板需要主动调用 joinSession 才会连接到服务器。

Returns: StatusCode

leaveChannel

▸ leaveChannel(): StatusCode

离开频道，其他用户会收到当前用户离开的事件(RtsService.Events.channelUserLeave)

注意 如果您仅想离开当前白板，调用 leave 方法更合适

Returns: StatusCode

leave

▸ leave(): StatusCode

离开该白板频道（断开服务器连接），其他用户也会收到当前用户离开的事件。 用于中途离开白板，对其他用户无影响。

调用后当前白板实例仍然保留在 RtsService 中，可通过id获取到白板实例。

Returns: StatusCode

loadDoc

▸ loadDoc(fileKey: string): Promise‹Info›

加载已经缓存好的文档，sdk 会自动创建一组文档到白板中，并跳转至这个文档。

fileKey 为调用文档转码接口返回的 id。

（如果您要加载某个缓存好的文档，只需要某一个端调用即可（例如admin用户），不要在每一个客户端都调用这个方法）

Parameters:

NameTypeDefaultDescription
fileKeystring-转码文件缓存ID

Returns: Promise‹Info›

interface Info {
  fileName,
  thumbUrls,
  docId,
  pageCount
}

nextPage

▸ nextPage(): QResult

切换到下一页

Returns: QResult

on

▸ on(event: string, cb: Function): void

监听事件，内部分发的事件参见 RtcWhiteboard.EVENTS

Parameters:

NameTypeDescription
eventstringRtcWhiteboard.EVENTS
cbFunction回调函数

Returns: void

off

▸ off(event: string, cb: Function): void

取消监听事件，内部分发的事件参见 RtcWhiteboard.EVENTS

Parameters:

NameTypeDescription
eventstringRtcWhiteboard.EVENTS
cbFunction回调函数

Returns: void

open

▸ open(wrapperEle: HTMLElement): QResult

打开白板

Parameters:

NameTypeDescription
wrapperEleHTMLElement白板嵌入的 html 元素

Returns: QResult

prevPage

▸ prevPage(): QResult

切换到上一页

Returns: QResult

publishTopicMessage

▸ publishTopicMessage(topic: string, data: any ): void

发布某个主题的消息

Parameters:

NameType
topicstring
dataany

Returns: void

redo

▸ redo(): void

重做白板的上一次被撤销操作

是否可以 redo 可以通过监听historyChanged事件来获取

Returns: void

removePage

▸ removePage(index: number, docId?: string): QResult

删除指定页，页面删除成功后，会触发 RtcWhiteboard.Events.whiteboardContentUpdate，事件触发后可以通过getTotalNumberOfPages获取当前文档所有页面的总数，通过getCurrentPageNumber获取当前所处的页码

Parameters:

NameTypeDefaultDescription
indexnumberthis._pageIndex页码
docIdstringthis._activeDocId文档 id，默认操作当前文档

Returns: QResult

saveLogs

▸ saveLogs(fileName?: string): void

保存日志，会直接下载到本地

Parameters:

NameType
fileNamestring

Returns: void

sendFeedback

▸ sendFeedback(option: object): QResult

发送用户反馈到到 PANO

Parameters:

▪ option: object

feedback 参数

NameTypeDescription
contactstring联系方式
descriptionstring描述
extraInfostring额外信息(可选)
productstring产品名称
typenumber问题类型，0: 通用；1：语音；2：视频；3：白板；4：屏幕共享
uploadLogsboolean是否上传日志

Returns: QResult

QResult {
  code: string,
  message: string
}

QResult.code为OK时表示调用成功，其他表示调用失败，QResult.message为失败原因。

sendMessage

▸ sendMessage(to: string, message: any): QResult

发送自定义消息 Parameters:

NameTypeDescription
tostring接受者userId
messageany自定义消息内容

Returns: QResult

setBackgroundImage

▸ setBackgroundImage(url: string): QResult

设置背景图片

Parameters:

NameTypeDescription
urlstring背景图片 url

Returns: QResult

setBackgroundImageScalingMode

▸ setBackgroundImageScalingMode(scaleMode: WBImageScalingMode): void

设置白板背景图缩放模式

Parameters:

NameTypeDescription
scaleModeWBImageScalingMode缩放模式

Returns: void

sample code

rtcWbInstance.setBackgroundImageScalingMode(
  RtcWhiteboard.WBImageScalingMode.AutoFill
);

setProperty

▸ setProperty(property: string, value?: any, seqId?: number): void

设置 session 自定义属性，设置后会触发 propertyChanged 事件，rtcWhiteboard session 中所有用户都会接收到。

可以通过 sessionProperty 属性获取所有设置的自定义属性。

Parameters:

NameTypeDescription
propertystring属性名称
value?any属性值

Returns: void

setRoleType

▸ setRoleType(roleType: WBRoleType): QResult

设置白板角色类型 (设置角色类型是异步操作，如果您想在获取到admin权限后立即执行某些操作，请参考下方的示例)

Parameters:

NameTypeDescription
roleTypeWBRoleType角色类型

Returns: QResult

sample code

// 执行此方法前请先 joinChannel
rtcWbInstance.setRoleType(RtcWhiteboard.WBRoleType.Admin);

setScale

▸ setScale(nextScale: number): void

设置当前白板视图的缩放比例，范围 0.1 ~ 5

Parameters:

NameType
nextScalenumber

Returns: void

setScaleOfAll

▸ setScaleOfAll(nextScale: number, onlyCurrentDoc?: boolean): void

批量设置所有文档所有页面的 scale

Parameters:

NameTypeDefault valueDescription
nextScalenumber-缩放比例
onlyCurrentDocbooleanfalse是否仅缩放当前文档

Returns: void

setSelectedShapeFontStyle

▸ setSelectedShapeFontStyle(style: object): void

设置当前选中 shape 的 fontStyle

Parameters:

▪ style: object

NameTypeDescription
bold?undefined | false | true是否加粗
fontSize?undefined | number文字大小
italic?undefined | false | true是否倾斜

Returns: void

setSelectedShapeStyle

▸ setSelectedShapeStyle(style: object): void

设置当前选中 shape 的 style

Parameters:

▪ style: object

NameTypeDescription
fillStyle?undefined | string填充色，仅支持 rgba 色值，如 rgba(0,0,0,0.2)
fillType?undefined |'none'| 'color'是否填充区块，如圆形，方形等，'none' 表示不填充， 'color' 表示填充色
lineWidth?undefined | number线宽
strokeStyle?undefined | string边线或者线段颜色，仅支持 rgba 色值，如 rgba(0,0,0,0.2)

Returns: void

setStamp

▸ setStamp(stampId): QResult

选择使用某个图章。

选择图章之前，您需要先添加图章资源

Parameters

NameTypeDescription
stampIdstring图章 id

Returns

QResult

setToolType

▸ setToolType(insertType: (ShapeType)): void

设置工具类型

Parameters:

NameTypeDescription
insertTypeShapeType工具类型

Returns: void

sample code

rtcWbInstance.setToolType(RtcWhiteboard.ShapeType.Select)

setTranslate

▸ setTranslate(x: number, y: number, smooth: boolean, duration: number): void

设置画板偏移

Parameters:

NameTypeDefaultDescription
xnumber-水平方向偏移
ynumber-竖直方向偏移
smoothbooleanfalse是否平滑移动
durationnumber400平滑移动时间，默认 400 ms

Returns: void

setTranslateOfAll

▸ setTranslateOfAll(x: number, y: number, onlyCurrentDoc?: boolean): void

批量设置所有文档所有页面的 translate

Parameters:

NameTypeDefault valueDescription
xnumber-水平方向偏移
ynumber-竖直方向偏移
onlyCurrentDocbooleanfalse是否仅当前文档

Returns: void

setI18nConfig

设置 i18n 配置，可以只设置部分，会和当前配置合并

▸ setI18nConfig(config: any): void

Parameters:

NameType
configany (可以通过 getI18nConfig 方法查看完整的 config)

Returns: void

setLocale

▸ setLocale(locale: string): void

设定语言

Parameters:

NameType
localestring

Returns: void

支持的语言：

选项语言
zh_CN简体中文(中国)
zh_TW繁体中文(台湾)
en英语
de德语
fr法语
ja日语
ko韩语

showWhiteboard

▸ showWhiteboard(): void

显示白板面板

对应 hideWhiteboard

Returns: void

startFollowVision

▸ startFollowVision(): void

开始跟随正在分享视角的用户的视角

收到其他用户的视角锁定事件 userVisionShareStart 时，可以自行决定是否要跟随视角

Returns: void

stopFollowVision

▸ stopFollowVision(): void

结束跟随他人的视角（关闭后如果其他用户仍在分享视角，仍可以通过 startFollowVision继续跟随视角）

Returns: void

startVisionShare

▸ startVisionShare(): void

开启自己的视角共享，将把自己的视角同步给别人，会中其他的用户会收到您的视角跟随邀请

其他用户也可以在您开启视角跟随的情况下开启视角跟随，您的视角跟随将会被终止

通过监听 userVisionShareStart 事件来接收别人的视角共享请求

通过监听 userVisionShareStop 事件来接收别人的视角共享取消事件

通过监听 visionLockStop 事件，当自己作为视角跟随发起者时，视角共享权限被别人抢占时触发该事件

Returns: void

stopVisionShare

▸ stopVisionShare(): void

关闭自己的视角锁定，会中其他用户会收到 userVisionShareStop 事件

Returns: void

snapshot

▸ snapshot(autoDownload: boolean, mode: "all" | "view"): Promise‹string›

Overrides Whiteboard.snapshot

截图当前白板内容

Parameters:

NameTypeDefaultDescription
autoDownloadbooleantrue是否自动下载，默认下载
mode"all" | "view""all"截取全部还是只截取可视区域

Returns: Promise‹string› 白板截图 base64 字符串

subscribeTopic

▸ subscribeTopic(topic: string): void

订阅某个主题的消息，订阅主题之后，会收到 topicMessageReceived 事件

Parameters:

NameTypeDescription
topicstring主题

Returns: void

switchToDoc

▸ switchToDoc(docId: string): QResult

切换白板文档

Parameters:

NameTypeDescription
docIdstring要切换到的DocId

Returns: QResult

updateUserData

▸ updateUserData(userData: string, userName?: string): StatusCode

更新用户数据，数据会保存在服务器，其他用户会收到 userUpdate 和 rosterUpdate 事件，可从 roster 中获取该数据

Parameters:

NameType
userNamestring
userDatastring

Returns: StatusCode

undo

▸ undo(): void

撤消上一次操作

是否可以 undo 可以通过监听historyChanged事件来获取

Returns: void

unmuteCoursewareMedia

▸ unmuteCoursewareMedia(): void

取消所有已被静音的媒体文件的静音状态

Returns: void

unsubscribeTopic

▸ unsubscribeTopic(topic: string): void

取消订阅某个主题的消息

Parameters:

NameType
topicstring

Returns: void

uploadAudio

▸ uploadAudio(callback: function): void

上传音频到当前白板页（支持 .mp3, .ogg 格式）

Parameters:

▪ callback: function

音频上传回调, 支持上传进度, code值对应状态： -3: upload_failed, -2: err_failed_fetch_upload_token, -1: err_file_too_large, 1: success, 2: 'uploading', 可以通过 uploadProgress 获取上传进度

▸ (state: object): any

Parameters:

▪ state: object

NameType
codenumber
message?undefined | string
statestring
uploadProgress?undefined | object

Returns: void

uploadDoc

▸ uploadDoc(onDocTranscodeStatus: function, transcodeType: "doc" | "courseware" | "pdf", needThumb: boolean, lifeType: 1 | 2, meta?: string): QResult

上传本地文件转码成为图片并创建新的白板文件，调用接口会自动打开文件选择框

文件转码成功后会自动创建一组白板页面（文档），可以监听 docCreated 事件，会在文档创建成功时触发。

Parameters:

▪ onDocTranscodeStatus: (data: object) => any

▸ data: object

NameType
codenumber
docId?undefined | string
statusstring

code 与 status 的对应关系：

codestatus
0'upload_start'
1'upload_success'
2'transcoding'
3'transcode_success'
4'uploading'
-1'file_too_large'
-2'upload_failed'
-3'transcode_failed'

▪Default value transcodeType: "doc" | "courseware" | "pdf"= "doc"

转码类型，支持普通文档（doc）和动态课件（courseware）和高清文档（pdf）

普通文档：将文档转为图片展示，形式为翻页模式，支持 .docx, .xlsx, .pptx, .doc, .xls, .ppt, .pdf 等格式

动态课件：将 PPT 课件转为在线资源，形式为翻页模式，支持动态交互，支持.pptx、.ppt格式

高清文档：文档转为 pdf 格式展示，形式为纵向滚动模式，支持.docx, .xlsx, .pptx, .doc, .xls, .ppt, .pdf 等格式

注意：使用高清文档(pdf)需要先引入pdf插件

▪Default value needThumb: boolean= false

是否生成课件缩略图

▪Default value lifeType: 1|2= 2

转码保存时间，1-long term，2-temp，默认为2

▪ meta: string | undefined

可选，元信息(开发者自定义信息，将随文档信息原样返回)

Returns: QResult

示例代码：

rtcWbInstance.uploadDoc((state) => {
  switch (state.code) {
    case 1:
      console.log('正在转码...', state);
      break;
    case 2:
      break;
    case 3:
      console.log('转码成功', state);
      break;
    case 4:
      if (state.uploadProgress.loaded === state.uploadProgress.total) {
        console.log('文件上传成功，等待转码');
      }
      console.log(
        `文件上传进度更新: ${
          (state.uploadProgress.loaded / state.uploadProgress.total) * 100
        }%`
      );
      break;
    case 0:
      console.log('开始上传', state);
      break;
    case -1:
      console.log('转码失败', state);
      break;
    case -2:
      console.log('文件上传失败，请重试', state);
      break;
    case -3:
      console.log('文件转码失败，请重试', state);
      break;
    default:
  }
});

uploadImage

▸ uploadImage(callback: function, setAsBackground: boolean): void

上传图片，调用接口会自动打开文件选择框

setAsBackground 为 true 时上传为背景图，false 时上传成为图片元素，图片元素支持拖拽，背景图不支持拖拽

Parameters:

▪ callback: function

图片上传回调，支持上传进度，code值对应状态： -3: upload_failed，-2: err_failed_fetch_upload_token，-1: err_file_too_large

1: success，2: uploading'，可以通过 uploadProgress 获取上传进度

▸ (state: object): any

Parameters:

▪ state: object

NameType
codenumber
message?undefined | string
statestring
uploadProgress?undefined | object

▪Default value setAsBackground: boolean= true

是否设置为背景图，默认 true

Returns: void

sample code

rtcWbInstance.uploadImage((state) => {
  switch (state.code) {
    case 1:
      console.log('上传成功!')
      break;
    case 2:
      console.log(
        `已上传${(state.uploadProgress.loaded /
          state.uploadProgress.total) *
          100}%`
      )
      break;
    default:
      console.log('上传失败', state)
  }
});

uploadPdf

▸ uploadPdf(callback: function): void

上传pdf文档，调用接口会自动打开文件选择框（支持 .pdf 格式），上传完成后会自动打开该文档

注意：使用pdf文档需要先引入pdf插件

Parameters:

▪ callback: function

pdf文档上传回调, 支持上传进度, code值对应状态： -3: upload_failed, -2: err_failed_fetch_upload_token, -1: err_file_too_large, 1: success, 2: 'uploading', 可以通过 uploadProgress 获取上传进度

▸ (state: object): any

Parameters:

▪ state: object

NameType
codenumber
message?undefined | string
statestring
uploadProgress?undefined | object

Returns: void

uploadVideo

▸ uploadVideo(callback: function): void

上传视频元素，调用接口会自动打开文件选择框（支持 .mp4, .ogg, .webm 格式）

Parameters:

▪ callback: function

视频上传回调, 支持上传进度, code值对应状态： -3: upload_failed, -2: err_failed_fetch_upload_token, -1: err_file_too_large, 1: success, 2: 'uploading', 可以通过 uploadProgress 获取上传进度

▸ (state: object): any

Parameters:

▪ state: object

NameType
codenumber
message?undefined | string
statestring
uploadProgress?undefined | object

Returns: void

updateCanvasSize

• updateCanvasSize(autoAdjust: boolean, keepScale: boolean): void

手动调用更新画布 size，在外部画布容器变化后主动调用更新画板大小信息。

如果选择自动调整内容，默认会将内容调整为居中显示。

Parameters:

NameTypeDefaultDescription
autoAdjustbooleantrue是否自动调整画布内容
keepScalebooleantrue自动调整画布内容时是否保持缩放比例

updateUserData

▸ updateUserData(userName: string, userData: string): QResult

更新用户信息

Parameters:

NameType
userNamestring
userDatastring

Returns: QResult

Object literals

Static Events

RtcWhiteboard 内部状态变化时触发的回调，用户可以调用 RtcWhiteboard 实例的 on 方法添加监听回调

docCreated

白板文档创建事件，客户端调用 uploadDoc、addBackgroundImages 等可以创建新文档的接口时会触发该事件

可以通过 enumerateDocs 接口获取所有的文档信息

rtcWbInstance.on(
  RtcWhiteboard.Events.docCreated,
  (docId) => console.log(docId)
);

backgroundImageUpdate

白板文档背景图更新时触发，新建、更新、删除均会触发

rtcWbInstance.on(
  RtcWhiteboard.Events.backgroundImageUpdate,
  ({ docId, pageIndex, imgUrl }) => {
    console.log(docId, pageIndex, imgUrl)
  }
);

docDeleted

文档被删除事件，客户端调用 deleteDoc 时会触发该事件

可以通过 enumerateDocs 接口获取所有的文档信息

rtcWbInstance.on(
  RtcWhiteboard.Events.docDeleted,
  (docId) => console.log(docId)
);

docReady

html 课件文档加载完成事件

rtcWbInstance.on(
  RtcWhiteboard.Events.docReady,
  (docId) => console.log(docId)
);

docSwitched

文档切换事件，客户端调用 switchToDoc 时会触发该事件

可以通过 enumerateDocs 接口获取所有的文档信息

rtcWbInstance.on(
  RtcWhiteboard.Events.docSwitched,
  (docId) => console.log(docId)
);

docUpdated

文档内容更新事件，当文档缩略图等内容更新时会触发

可以通过 enumerateDocs 接口获取所有的文档信息

rtcWbInstance.on(
  RtcWhiteboard.Events.docUpdated,
  (docId) => console.log(docId)
);

historyChanged

undo/redo 状态变化时更新，回调参数包含目前是否可以进行 undo/redo 操作

rtcWbInstance.on(
  RtcWhiteboard.Events.historyChanged,
  (status) => console.log(`是否可以undo: ${status.undo}, 是否可以redo: ${status.redo}`)
);

messageReceived

收到自定义消息

rtcWbInstance.on(
  RtcWhiteboard.Events.messageReceived,
  ({from, message}) => console.log(from, message)
);
// {
//   from: "3309586", //用户的 userId
//   message: 'xxxx' // 消息内容
// }

newShapeReceived

收到别的用户新绘制的图形时收到这个消息

rtcWbInstance.on(
  RtcWhiteboard.Events.newShapeReceived,
  (newShape) => console.log(newShape)
);
// newShape: {
//   shapeType: string;
//   shapeId: string;
//   minx: number;
//   miny: number;
//   maxx: number;
//   maxy: number;
// }

openStateChanged

白板开启的状态变化，当 channel 中有任一用户打开白板（open），会触发这个事件，之后再打开不会再触发

pageIndexChanged

页码变化事件，当本地文档的页码发生变化时触发

rtcWbInstance.on(
  RtcWhiteboard.Events.pageIndexChanged,
  (docId, pageIndex) => console.log(docId, pageIndex)
);

readyStateChanged

白板 ready 状态变化，在加入、离开会议或者 failover 时触发

rtcWbInstance.on(
  RtcWhiteboard.Events.readyStateChanged,
  ({ready, type, message}) => console.log(ready, type, message)
);
// {
//   ready: true, // 是否 ready
//   type: "join", // 触发类型，'join' | 'failover' | 'left'
//   message: "Join channel success." // 提示消息
// }

userJoin

用户加入当前白板 session

rtcWbInstance.on(
  RtcWhiteboard.Events.userJoin,
  (userId: string) => console.log(userId)
);

userLeave

用户离开当前白板 session

rtcWbInstance.on(
  RtcWhiteboard.Events.userLeave,
  (userId: string) => console.log(userId)
);

userUpdate

用户离开当前白板 session

rtcWbInstance.on(
  RtcWhiteboard.Events.userUpdate,
  (userId: string) => console.log(userId)
);

rosterUpdate

用户列表更新

rtcWbInstance.on(
  RtcWhiteboard.Events.rosterUpdate,
  () => console.log('rosterUpdate', rtcWbInstance.getRoster())
);

userRoleTypeChanged

当前用户角色类型变化时触发

userVisionShareStart

用户视角共享开始事件。

接收到事件后可以调用 startFollowVision 开始跟随别的用户分享的视角。

rtcWbInstance.on(
  RtcWhiteboard.Events.userVisionShareStart,
  (userId, name) => console.log(userId, name)
);

userVisionShareStop

用户视角共享取消事件。

您无需主动调用 stopFollowVision，sdk 会在用户结束分享时自动取消。

rtcWbInstance.on(
  RtcWhiteboard.Events.userVisionShareStop,
  (userId, name) => console.log(userId, name)
);

visionLockStop

当自己开启视角共享，被别人抢占共享权限时触发

rtcWbInstance.on(
  RtcWhiteboard.Events.visionLockStop,
  () => console.log('visionLockStop')
);

viewportUpdate

白板窗口大小或者位置变化

rtcWbInstance.on(
  RtcWhiteboard.Events.viewportUpdate,
  (position) => console.log(position)
);
// position: {
//   minx: number;
//   miny: number;
//   maxx: number;
//   maxy: number;
// }

propertyChanged

自定义属性更新

rtcWbInstance.on(
  RtcWhiteboard.Events.propertyChanged,
  (type: 'update' | 'delete', propName: string, propValue: any) 
    => console.log('propertyChanged', type, propName, propValue)
);

sessionReady

当白板实例连接到服务器时触发

sessionClosed

当前白板session被关闭时触发

rtcWbInstance.on(
  RtcWhiteboard.Events.sessionClosed,
  (data: {message: string; reason: string}) => console.log(data)
);

topicMessageReceived

当订阅了某个主题的消息之后，收到在该主题下发布的消息

rtcWbInstance.on(
  RtcWhiteboard.Events.topicMessageReceived,
  (topic: string, from: string, message: any) => console.log(topic, from, message)
);

whiteboardLeave

离开当前白板session时触发

rtcWbInstance.on(
  RtcWhiteboard.Events.whiteboardLeave,
  (data: {message: string; reason: string}) => console.log(data)
);

whiteboardContentUpdate

白板内容更新时触发，所有影响到白板绘制的操作或者接收到别的端发过来的新图形，都会触发。

本端的操作，如翻页，添加或删除一页，上传背景图，设置translate，scale，上传文档转码成功时等都会触发这个事件。

whiteboardFailover

白板错误恢复状态变化，接收到此通知时 panosdk 已经从服务器断开，panosdk 会尝试重新连接到服务器，开发者可以提示用户正在重连

rtcWbInstance.on(
  RtcWhiteboard.Events.whiteboardFailover,
  ({state}) => console.log(state)
);
// { state: 'Reconnecting' | 'Success' | 'Failed' }

Static ShapeType

Click

点击工具

此工具下可以和动态课件交互，点击动态课件区域可以驱动动态课件执行下一步动画，或者点击课件中的音视频内容播放音视频

Select

选择工具

此工具可以和白板上绘制的普通图形以及白板中的音视频交互（非自己绘制的内容，需要admin权限才可以选中）

Pen

自由画笔

Line

直线

Rect

矩形

Square

正方形

Ellipse

椭圆形

Circle

正圆形

Text

文本

Arrow

箭头

Delete

删除工具，可以框选某个区域删除所有选中内容（如果不是admin角色，那么只能删除自己绘制的内容）

Image

图片

Video

视频文件，admin角色用户播放视频时会同步到其他端，支持循环播放

Audio

音频文件，admin角色用户播放视频时会同步到其他端，支持循环播放

Brush

刷子工具，会擦除涂抹到的地方

LaserPointer

激光笔工具

Drag

拖拽工具，可以鼠标左键或单指拖动画布(白板未固定宽高的情况下)

Stamp

图章

Static WBClearType

白板清除内容指令模式

All

清除所有内容，清除别人绘制的内容，需要 admin 权限

DRAWS

清除绘制的图形，清除别人绘制的图形，需要 admin 权限

BACKGROUND_IMAGE

清除背景图，清除别人绘制的背景图需要 admin 权限

Static WBImageScalingMode

白板插入背景图片，面板缩放 fit 图片的模式

AutoFill

FillHeight

FillWidth

Fit

Static WBRoleType

白板角色类型

Admin

admin 角色，可以操控会中其他用户绘制的图形，执行删除操作等

Attendee

普通参与者，可以读写，不能操控其他用户绘制的图形

Viewer

只读角色，无法绘制图形，只能观看

Static usePdf

▸ Static usePdf(plugin): void

使用pdf插件

import PdfPlugin from '@pano.video/panorts/lib/PdfPlugin';
import { RtcWhiteboard } from '@pano.video/panorts';

RtcWhiteboard.usePdf(PdfPlugin);

params plugin

Parameters

NameType
plugintypeof PdfPlugin
Last updated on 2022/4/1
← GroupManagerRtsService →