即时通信 IM 水印配置（Web）

一、前置条件

·安装包：@tencentcloud/roomkit-web-vue3

·最低版本：>=5.7.0

·框架依赖：Vue 3+

二、能力概览

·conference.setFeatureConfig()：全局特性配置。 通过传入 watermark 对象，可以控制水印的开启状态、文本内容、字体大小以及间距。

三、快速开始

下面示例演示一个完整的开启自定义水印场景：

·设置包含当前用户 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);