RTC Engine

Web
- Run Sample Demo
- Integration
- 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
  - Enable Virtual Background
  - Enable Beauty and Effects
  - Data Messages
  - Custom Capturing and Rendering
- API List
- Released Notes
- Supported Platforms
- Web FAQs
  - Optimize Multi-Person Video Calls
  - Handle Autoplay Restriction
  - Handle Firewall Restriction
  - Others
Android
- Run Sample Code
- Integration
- Basic Features
  - Sensing Network Quality
  - Enabling Screen Sharing
  - Setting Video Quality
  - Rotating Videos
- Advanced Features
  - 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
- Solution
  - Real-Time Chorus (TUIKaraoke)
    - Quick Integration
    - Implementation Steps
    - Song Synchronization
    - Lyric Synchronization
    - Vocal Synchronization
    - Mixing Stream Solution
    - TRTCKaraoke APIs
    - FAQs
- Release Notes
iOS
- Run Sample Code
- Integration
- Basic Features
  - Sensing Network Quality
  - Enabling Screen Sharing
  - Setting Video Quality
  - Rotating Videos
- Advanced Features
  - 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
- Solution
  - Quick Integration
  - Implementation Steps
  - Song Synchronization
  - Lyric Synchronization
  - Vocal Synchronization
  - Mixing Stream Solution
  - TRTCKaraoke APIs
  - FAQs
- Release Notes
macOS
- Run Sample Code
- Integration
- Basic Features
  - Sensing Network Quality
  - Enabling Screen Sharing
  - Sharing Computer Audio
  - Setting Video Quality
  - Rotating Videos
- Advanced Features
  - 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
- Run Sample Code
- Integration
- Basic Features
  - Sensing Network Quality
  - Enabling Screen Sharing
  - Setting Video Quality
  - Rotating Videos
- Advanced Features
  - 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

RTC Engine

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

Demo
Prerequisites
Implementation Steps
API Description
- trtc.startPlugin('Watermark', options)
- trtc.stopPlugin('Watermark')
FAQs

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`