虎牙开放平台文档

hyExt.stream.onWBLayoutChange

监听白板布局变化消息
引入版本 1.10.0
适用终端
虎牙直播助手-iOS：4.9.0
虎牙直播助手-安卓：4.9.0
虎牙直播PC客户端-主播侧：4.16.1.0

课前准备

本文将会展示监听白板布局变化消息sdk的基本使用，为了能够更好地理解本文，阅读前请确保充分理解了主播端白板中的相关概念。

下图展示了监听白板布局变化消息sdk的传参相对于小程序面板和视频区位置的关系。你可以在理解此图示的基础上，再结合hyExt.stream.createWB（创建白板）和hyExt.stream.updateWB（更新白板） SDK 一起使用。

在结合hyExt.stream.createWB（创建白板）SDK 使用时，可以在创建白板成功之后的回调函数中调用此 SDK 监听白板的布局变化。

只要白板的布局发生了任何变化，更新白板时改变了白板的布局或拖拽视频区中的白板的布局大小都能被成功监听。

接口签名

declare namespace hyExt {
  module stream {
    /**
     * 监听白板布局变化消息
     * @param params 输入参数
     */
    function onWBLayoutChange(params: WBLayoutChangeReq): Promise<void>
  }

  /**
   * 监听白板布局变化参数
   */
  type WBLayoutChangeReq = {
    /**
     * 白板id
     */
    wbId: string
    /**
     * 业务传入的白板标识
     */
    wbName?: string
    /**
     * 回调函数
     */
    callback: WBLayoutChangeCallback
  }

  /**
   * 回调函数
   * @param layoutInfo 布局信息
   */
  type WBLayoutChangeCallback = (layoutInfo: ChangedLayoutInfo) => void
  /**
   * 白板布局变化信息
   */
  type ChangedLayoutInfo = {
    /**
     * 布局数据
     */
    data: WBLayoutInfo
  }
  /**
   * 白板布局数据
   */
  type WBLayoutInfo = {
    /**
     * 相对推流出去的界面左侧的偏移量（PC主播端单位是像素，助手单位是点）
     */
    offsetX: number
    /**
     * 相对推流出去的界面顶部的偏移量（PC主播端单位是像素，助手单位是点）
     */
    offsetY: number
    /**
     * 推流出去的界面里白板图层占的宽度（PC主播端单位是像素，助手单位是点）
     */
    canvasWidth: number
    /**
     * 推流出去的界面里白板图层占的高度（PC主播端单位是像素，助手单位是点）
     */
    canvasHeight: number
  }
}

示例代码

hyExt.stream
  .onWBLayoutChange({
    wbId: "wbId",
    wbName: "",
    callback: (layoutinfo) => {
      const { data } = layoutinfo
      console.log("回调触发", layoutinfo)
    },
  })
  .then(() => {
    console.log("调用hyExt.stream.onWBLayoutChange成功")
  })
  .catch((err) => {
    console.log("调用hyExt.stream.onWBLayoutChange失败", err)
  })

hyExt.stream.onWBLayoutChange

课前准备

接口签名

示例代码

相关链接