内容批注

功能说明

用户在共享屏幕时，可对共享屏幕上的内容进行批注，同时也可以设置允许会中其他人批注；

小鱼SDK提供了相应的接口，用于三方用户实现批注时参会者之间进行数据交互，但批注UI层面的实现需要用户自行实现。

提示

此文档仅适用于v3.10.3+版本

实现方法

内容共享者批注，是在本地桌面共享区域实现画板进行批注，批注线条随视频流共同发送给接收者查看，同时接收内容接收者发送的批注线条数据，并绘制到本地的画板上。

内容接收者批注，是在content视频画面上实现画板进行批注，每划一笔，需将批注的线条数据发送给内容共享者，并快速清除本地画板

提示

内容接收者实现批注主要是将批注线条数据发送给内容共享者，让共享者绘制到共享者的画板上，从而实现批注。发送完成接收者需要清除掉本地绘制的线条，否则本地绘制的线条会和共享者绘制的线条重复

批注过程中的清除画板逻辑，和批注逻辑一致。内容共享者直接将本地画板清空即可，而内容接收者实现清空是通过方法通知内容共享者，让内容共享者清空本地画板

批注功能相关API如下：

内容共享者

接收会控事件下发的批注权限（ConfControl）
共享屏幕时是否允许会中其他人批注（startSendContent）
开始批注（startAnnotation）
接收内容接收者发送的批注线条数据（AnnotationReceiveLine）
接收内容接收者清除批注的事件（AnnotationClean）
结束批注（stopAnnotation）

内容接收者

接收会控事件下发的批注权限（ConfControl）
开始批注（startAnnotation）
发送批注线条数据（sendAnnotationLine）
清除批注（cleanAnnotation）
结束批注（stopAnnotation）

示例代码

接收会控事件下发的批注权限

xyRTC.on('ConfControl', (e: IConfControl) => {
  const { disableAnnotation } = e;
  
  // disableAnnotation为true, 则没有批注权限
});

共享屏幕时是否允许会中其他人批注

xyRTC.startSendContent({
  ...,
  contentInfo: {
    ...,
    // 是否允许会中其他人批注
    bEnableAnnotation: true
  },
});

开始批注

xyRTC.startAnnotation()

接收内容接收者发送的批注线条数据

xyRTC.on('AnnotationReceiveLine', (line: IReceiveLine) => {
  // 需将line数据绘制到本地画板
});


/**
 * 接收发送的线
 * 
 * @property {number} sequece 线的序列号 
 * @property {number} weight 宽度
 * @property {string} color 颜色 Like "#121212ff" RGBA
 * @property {string} sourceCallUri 线目标发送设备calluri
 * @property {string} targetCallUri 线的原始发出设备calluri
 * @property {string} uuid 线uuid, 发送者（content接受者）发送后，会回调uuid
 * @property {boolean} ended 是否线结束， 默认true
 * @property {IPoint[]} points 点数组
 */
export interface IReceiveLine{
  sequece: number;
  weight: number;
  color: string;
  sourceCallUri: string;
  targetCallUri: string;
  uuid: string;
  points: IPoint[];
  ended: boolean;
}

/**
 * 点
 */
export interface IPoint{
  x:number;
  y:number;
}

接收内容接收者清除画板的事件

xyRTC.on('AnnotationClean', () => {
  // 需清空本地画板
});

发送批注线条数据

xyRTC.sendAnnotationLine(line: ILine)

/**
 * 标注线 发送
 * 
 * @property {number} weight 宽度
 * @property {string} color 颜色 Like "#121212ff" RGBA
 * @property {string} calluri 表示发给谁，
 * @property {string} uuid 线uuid, 发送者（content接受者）发送后，会回调uuid
 * @property {boolean} ended 是否线结束， 默认true
 * @property {boolean} getAllLines 默认false
 * @property {IPoint[]} points 点数组
 */
export interface ILine{
  weight: number;
  color: string;
  calluri?: string;
  uuid?: string;
  ended?: boolean;
  getAllLines?: boolean;
  points: IPoint[];
}

/**
 * 点
 */
export interface IPoint{
  x:number;
  y:number;
}

清除批注

xyRTC.cleanAnnotation()

结束批注

xyRTC.stopAnnotation()

API 参考

2024-04-23 15:26:58

导出PDF文档