Get Started
Docs Overview/
RTC Engine/
SDK/
Web/
Advanced Features/
Enable Watermark/

Enable Watermark

This article introduces how to use the watermark plugin to add image watermarks on camera streams.

Demo



Prerequisites

TRTC Web SDK version ≥ 5.3.0.

Implementation Steps

Install Watermark Plugin

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

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

Open Camera

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

Start Watermark Plugin

await trtc.startPlugin('Watermark', {
  imageUrl: 'https://web.sdk.qcloud.com/trtc/webrtc/test/qer-test/watermark/trtc-watermark-test.png'
});
After testing, you can replace the test image URL with your own watermark image. It is recommended to use a transparent PNG format.

Stop Watermark Plugin

await trtc.stopPlugin('Watermark');

API Description

trtc.startPlugin('Watermark', options)

Start watermark plugin.

options

Name
Type
Attributes
Description
imageUrl
string
Required
Image watermark URL
x
string
Optional
Watermark left margin
y
string
Optional
Watermark top margin
size
string |
number |
object
Optional
When passing a string:
"cover" scales the background image to fully cover the background area, which may cause parts of the background image to be invisible.
"contain" scales the background image to fit entirely within the background area, possibly leaving some areas blank.
When passing a number:
x scales the background image by x times, e.g., 0.5, with a valid range of (0,1]
When passing an object:
You can specify manually by passing {width: 200, height: 300}
The default is cover
Example:
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')

Stop watermark plugin.
Example:
await trtc.stopPlugin('Watermark');

FAQs

1. Is the watermark mirrored?
The local preview image is enabled by default, so the watermark will also be mirrored. You can disable the local preview mirror image.
await trtc.updateLocalVideo({
  option: {
    mirror: false
  }
});