文档反馈官招募中，报名立赚积分兑换代金券！> HOT
文档中心>实时音视频>视频会议 SDK>含 UI 集成>UI 自定义>水印配置（Web）

水印配置（Web）

最近更新时间：2026-04-13 15:49:26

我的收藏

本页目录：

当你需要为 RoomKit 会议界面添加自定义水印（例如防泄漏提示、公司名称等）时，可以通过 setFeatureConfig 的 watermark 能力完成。


前置条件

安装包：@tencentcloud/roomkit-web-vue3
最低版本：>=5.7.0
框架依赖：Vue 3+

能力概览

conference.setFeatureConfig()：全局特性配置。 通过传入 watermark 对象，可以控制水印的开启状态、文本内容、字体大小以及间距。
参数配置项
类型
说明
watermark.enable
boolean
是否开启水印功能。
watermark.content
string[]
水印显示的文本内容，支持多行（数组形式）。
watermark.font
{ fontSize?: number }
水印字体设置，目前支持配置字体大小。
watermark.gap
[number, number]
水印在屏幕上的水平和垂直间距。

快速开始

下面示例演示一个完整的开启自定义水印场景：
设置包含当前用户 ID 和提示信息的多行水印。
调整水印的字体大小和排列间距。
说明：
sdkAppId 和 userSig 获取方式请参阅 用户鉴权。
import { conference } from '@tencentcloud/roomkit-web-vue3';

async function startMeetingWithWatermark() {
  const userId = 'your-user-id';
  
  await conference.login({
    sdkAppId: 12345678,
    userId: userId,
    userSig: 'your-user-sig',
  });

  // 建议在 createAndJoinRoom() / joinRoom() 前完成水印配置，避免进入房间后水印闪烁
  conference.setFeatureConfig({
    watermark: {
      enable: true,
      content: ['腾讯云 TRTC', `用户: ${userId}`],
      font: {
        fontSize: 14,
      },
      gap: [100, 100], 
    }
  });

  const roomId = Date.now().toString();
  // 使用 createAndJoinRoom() 接口创建并进入房间
  await conference.createAndJoinRoom({ roomId });
}

配置项详解

场景一：开启基础纯文本水印

最简单的用法是仅配置 enable 和 content。
import { conference } from '@tencentcloud/roomkit-web-vue3';

conference.setFeatureConfig({
  watermark: {
    enable: true,
    content: ['内部机密，请勿外传'],
  }
});

场景二：调整样式与密度

如果默认的水印覆盖太密或字号太大，可以通过 gap 和 font 来微调。
import { conference } from '@tencentcloud/roomkit-web-vue3';

conference.setFeatureConfig({
  watermark: {
    enable: true,
    content: ['User: 10001', 'RoomKit 水印演示'],
    font: {
      fontSize: 16, // 调整字体大小
    },
    gap: [200, 150], // 水平间距 200px，垂直间距 150px
  }
});

场景三：会中动态更新/关闭水印

setFeatureConfig 支持在会议进行中动态调用。调用后，界面上的水印状态会立即响应更新，非常适合需要根据会中角色或房间状态动态改变水印内容的场景。
import { conference } from '@tencentcloud/roomkit-web-vue3';

// 动态修改水印内容
function updateWatermarkContent(newText: string) {
  conference.setFeatureConfig({
    watermark: {
      enable: true,
      content: [newText],
    }
  });
}

// 动态关闭水印
function disableWatermark() {
  conference.setFeatureConfig({
    watermark: {
      enable: false,
    }
  });
}

注意事项

建议在 conference.login() 完成之后、conference.joinRoom() / conference.createAndJoinRoom() 之前调用，避免进入房间后水印闪烁。
局部覆盖机制（Partial）：setFeatureConfig 支持局部更新配置。这意味着你在动态更新水印时，不需要每次都把所有 Feature 配置重传一遍，只需传入变更的部分即可。
功能边界与局限：目前的 API 仅支持自定义水印的文字内容 (content)、字体大小 (font.fontSize) 以及分布间距 (gap)。暂不支持直接通过该接口修改水印的透明度、文字颜色或倾斜角度。

常见问题

为什么配置了水印但是没有显示？

请检查：
1. 是否设置了 enable: true。
2. content 数组是否为空，或者传入的字符串为空。

可以只修改 gap 不修改 font.fontSize 吗？

可以的。watermark 下的所有属性均为可选属性（Optional），你可以按需单独修改 gap 或 font。

如何获取当前的水印配置？

你可以使用 SDK 提供的 getFeatureConfig 方法获取当前已设置的水印配置：
const currentWatermarkConfig = conference.getFeatureConfig('watermark');
console.log(currentWatermarkConfig?.enable);

中国站