Join Tencent RTC at NAB Show 2024 in Las Vegas!
Learn more 
Only  $9.9! Get 50,000 minutes with our Starter Plan, perfect for your MVP project.
Only $9.9! Get 50,000 minutes with our Starter Plan, perfect for your MVP project.
Grab It Now 
Join Tencent RTC at NAB Show 2024 in Las Vegas!
Learn more 
Only  $9.9! Get 50,000 minutes with our Starter Plan, perfect for your MVP project.
Only $9.9! Get 50,000 minutes with our Starter Plan, perfect for your MVP project.
Grab It Now 
RTC Engine
Overview
  • Web
    • Demo Quick Run
    • SDK Quick Start
    • Basic Features
      • Screen Sharing
      • Live Streaming
      • Media Device
      • Audio Volume
      • Set Encoding Profile
      • Detect Network Quality
      • Detect Capabilities
    • Advance Features
      • Enable AI Denoiser
      • Enable Audio Mixer
      • Enable Watermark
      • SEI Message
      • Custom Capturing and Rendering
      • Web Beautification Effects
    • Best Practices
      • Optimize Multi-Person Video Calls
      • Handle Autoplay Restriction
      • Handle Firewall Restriction
    • API List
    • Released Notes
    • Supported Platforms
    • Web FAQs
  • Android
    • Integration
      • 1.API Examples
      • 2.Importing the SDK
      • 3.Entering a Room
      • 4.Subscribing to Audio/Video Streams
      • 5.Publish Audio/Video Streams
      • 6.Exiting a Room
      • 7.Sensing Network Quality
      • 8.Enabling Screen Sharing
      • 9.Setting Video Quality
      • 10.Rotating Videos
    • Testing Newwork Quality
    • Custom Capturing and Rendering
    • Custom Audio Capturing and Playback
    • Client APIs
      • Overview
      • TRTCCloud
      • TRTCStatistics
      • TRTCCloudListener
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • Type Definition
      • Deprecated Interface
      • Error Codes
    • Release Notes
  • iOS
    • Integration
      • 1.API Examples
      • 2.Importing the SDK
      • 3.Entering a Room
      • 4.Subscribing to Audio/Video Streams
      • 5.Publish Audio/Video Streams
      • 6.Exiting a Room
      • 7.Sensing Network Quality
      • 8.Enabling Screen Sharing
      • 9.Setting Video Quality
      • 10.Rotating Videos
    • Testing Network Quality
    • Custom Capturing and Rendering
    • Custom Audio Capturing and Playback
    • Client APIs
      • Overview
      • TRTCCloud
      • TRTCCloudDelegate
      • TRTCStatistics
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • Type Definition
      • Deprecated Interface
      • ErrorCode
    • Release Notes
  • macOS
    • Integration
      • 1.API Examples
      • 2.Importing the SDK
      • 3.Entering a Room
      • 4.Subscribing to Audio/Video Streams
      • 5.Publish Audio/Video Streams
      • 6.Exiting a Room
      • 7.Sensing Network Quality
      • 8.Enabling Screen Sharing
      • 9.Sharing Computer Audio
      • 10.Setting Video Quality
      • 11.Rotating Videos
    • Testing Hardware Devices
    • Testing Network Quality
    • Custom Capturing and Rendering
    • Custom Audio Capturing and Playback
    • Client APIs
      • Overview
      • TRTCCloud
      • TRTCCloudDelegate
      • TRTCStatistics
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • Type Definition
      • Deprecated Interface
      • ErrorCode
      • Release Notes
    • Release Notes
  • Windows C++
    • Integration
      • 1.API Examples
      • 2.Importing the SDK
      • 3.Entering a Room
      • 4.Subscribing to Audio/Video Streams
      • 5.Publish Audio/Video Streams
      • 6.Exiting a Room
      • 7.Sensing Network Quality
      • 8.Enabling Screen Sharing
      • 9.Setting Video Quality
      • 10.Rotating Videos
    • Testing Hardware Devices
    • Testing Network Quality
    • Custom Capturing and Rendering
    • Custom Audio Capturing and Playback
    • Client APIs
      • Overview
      • ITRTCCloud
      • ITRTCStatistics
      • TRTCCloudCallback
      • ITXAudioEffectManager
      • ITXDeviceManager
      • Type Definition
      • Deprecated Interface
      • Error Codes
    • Release Notes
  • Electron
    • Integration
      • 1.API Examples
      • 2.Importing the SDK
      • 3.Entering a Room
      • 4.Subscribing to Audio/Video Streams
      • 5.Publish Audio/Video Streams
      • 6.Exiting a Room
      • 7.Sensing Network Quality
      • 8.Enabling Screen Sharing
      • 9.Sharing Computer Audio
      • 10.Setting Video Quality
      • 11.Rotating Videos
    • Client APIs
      • Overview
      • Error Codes
  • Flutter
    • Integration
      • 1.API Examples
      • 2.Importing the SDK
      • 3.Entering a Room
      • 4.Subscribing to Audio/Video Streams
      • 5.Publish Audio/Video Streams
      • 6.Exiting a Room
      • 7.Sensing Network Quality
      • 8.Enabling Screen Sharing
      • 9.Sharing Computer Audio
      • 10.Setting Video Quality
      • 11.Rotating Videos
    • Client APIs
      • Overview
      • Error Codes
  • Unity
    • Integration
      • 1.API Examples
      • 2Importing the SDK
    • Client APIs
      • Overview
      • Error Codes
  • Qt
    • Integration
      • 1.Importing the SDK
  • Overview
    • Overview
  • Pricing
    • RTC-Engine Packages
    • Billing of On-Cloud Recording
    • Billing of MixTranscoding and Relay to CDN
    • Billing Explanation for Subscription Package Duration
    • Billing of Monitoring Dashboard
    • Free Minutes
    • Pay-As-You-Go
  • Concepts
  • Features
  • Performance Statistics
  • FAQs
    • FAQs for Beginners
    • Migration Guide
      • Twilio Video to Tencent RTC
      • Billing
      • Features
      • UserSig
      • Firewall Restrictions
      • How to Downsize Installation Package
      • TRTCCalling for Web
      • Audio and Video Quality
      • Others
RTC Engine

Enable Watermark

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

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
}
});