文档概览/
Feedback

水印

本文介绍如何使用水印插件在摄像头流上添加图片水印。

Demo



前提条件

TRTC Web SDK 版本 ≥ 5.3.0。

实现步骤

安装水印插件

import { Watermark } from 'trtc-sdk-v5/plugins/video-effect/watermark';

let trtc = TRTC.create({ plugins: [Watermark] });

打开摄像头

await trtc.startLocalVideo({
  view: 'local-video'
  option: {
    mirror: false
  }
});

启动水印插件

await trtc.startPlugin('Watermark', {
  imageUrl: 'https://web.sdk.qcloud.com/trtc/webrtc/test/qer-test/watermark/trtc-watermark-test.png'
});
测试后，您可以将测试图片 URL 替换为您自己的水印图片。建议使用透明 PNG 格式。

停止水印插件

await trtc.stopPlugin('Watermark');

API 说明

trtc.startPlugin('Watermark', options)

启动水印插件。

options

参数名
类型
属性
说明
imageUrl
string
必填
图片水印 URL。
x
string
可选
水印左侧边距。
y
string
可选
水印顶部边距。
size
string |
number |
object
可选
传入字符串时：
"cover" 缩放背景图片以完全覆盖背景区域，可能导致部分背景图片不可见。
"contain" 缩放背景图片以完整显示在背景区域内，可能留有空白区域。
传入数字时：
x 将背景图片缩放 x 倍，例如 0.5，有效范围为 (0,1]。
传入对象时：
可以通过传入 {width: 200, height: 300} 手动指定。
默认值为 cover。
示例：
await trtc.startPlugin('Watermark', {
  imageUrl: 'https://web.sdk.qcloud.com/trtc/webrtc/test/qer-test/watermark/tv2.png',
  size: 'contain'
});
await trtc.startPlugin('Watermark', {
  imageUrl: 'https://web.sdk.qcloud.com/trtc/webrtc/test/qer-test/watermark/tv2.png',
  size: 'cover'
});
await trtc.startPlugin('Watermark', {
  imageUrl: 'https://web.sdk.qcloud.com/trtc/webrtc/test/qer-test/watermark/tv2.png',
  x: 0,
  y: 0,
  size: 0.5
});
await trtc.startPlugin('Watermark', {
  imageUrl: 'https://web.sdk.qcloud.com/trtc/webrtc/test/qer-test/watermark/tv2.png',
  x: 0,
  y: 0,
  size: {
    width: 100,
    height: 200
  }
});

trtc.stopPlugin('Watermark')

停止水印插件。
示例：
await trtc.stopPlugin('Watermark');

常见问题

水印是否会镜像？

本地预览默认开启镜像，因此水印也会镜像。您可以关闭本地预览镜像。
   await trtc.updateLocalVideo({
     option: {
       mirror: false
     }
   });