腾讯云 RTC SDK - 开启水印

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.stopPlugin('Watermark')

关闭水印

Example:

await trtc.stopPlugin('Watermark');

常见问题

1. 水印是镜像的？

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

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