Tutorial: 开启水印

开启水印

功能描述

本文主要介绍如何使用水印插件在视频流上添加图片水印。

前提条件

  • TRTC Web SDK 版本 >= 5.3.2。

实现流程

引入并注册插件

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

Name Type Attributes Description
imageUrl string 必填 图片水印地址
x string 选填 水印左边距
y string 选填 水印上边距
size string | number | object 选填 传入字符串时：
- "cover" 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。
- "contain" 缩放背景图片以完全装入背景区，可能背景区部分空白。
传入数字时：
- x 表示缩放背景图片 x 倍。如 0.5，取值范围为 (0,1]
传入对象时：
- 可以传入 {width: 200, height: 300} 来手动指定
默认为 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.updatePlugin('Watermark')

更新水印的图片、位置、大小。

options

Name Type Attributes Description
imageUrl string 必填 图片水印地址
x string 选填 水印左边距
y string 选填 水印上边距
size string | number | object 选填 传入字符串时：
- "cover" 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。
- "contain" 缩放背景图片以完全装入背景区，可能背景区部分空白。
传入数字时：
- x 表示缩放背景图片 x 倍。如 0.5，取值范围为 (0,1]
传入对象时：
- 可以传入 {width: 200, height: 300} 来手动指定
默认为 cover		 
await trtc.updatePlugin('Watermark', {
  imageUrl: 'https://web.sdk.qcloud.com/trtc/webrtc/test/qer-test/watermark/tv2.png',
  x: 100,
  y: 200,
  size: {
    width: 50,
    height: 50
  }
});

trtc.stopPlugin('Watermark')

关闭水印

Example:

await trtc.stopPlugin('Watermark');

常见问题

1. 水印是镜像的？

本地预览的镜像是默认开启的，因此水印也会被镜像，可以将本地预览镜像关闭。

await trtc.updateLocalVideo({
  option: {
    mirror: false
  }
});

2. 更新水印画面会黑一下？

更新 SDK 到 v5.8.6 以上。