Watermark and Screenshot

Overview

When you need to set copyright owner logos for educational courseware and other scenarios, you can use the SDK's watermark feature to achieve this.

This document mainly describes how to use the SDK to implement watermark and screenshot features.

Demo Source Code Download

Please refer to Download Demo Source Code to obtain the source code.

For related source code, please check the files in the "lib\topics\OtherFunctions\beauty_watermark_snapshot" directory.

Prerequisites

Before implementing watermark and screenshot features, please ensure:

• You have created a project in the ZEGOCLOUD Console and obtained a valid AppID and AppSign. For details, please refer to Console - Project Information.
• You have integrated the ZEGO Express SDK into your project and implemented basic audio and video publishing and playing functions. For details, please refer to Quick Start - Integration and Quick Start - Implementation.

Usage Steps

Watermark

Call ZegoWatermark to configure a watermark image URL and the size and position of the watermark in the picture.

Call the setPublishWatermark interface to set the publishing stream watermark.

The imageURL parameter in the ZegoWatermark object supports passing two path formats.

// Supports images in JPG and PNG formats
String imageURL = "file:///sdcard/Android/data/im.zego.zegoexpressapp/ZegoLogo.png";
// The watermark layout takes the upper left corner as the origin of the coordinate system, and the area cannot exceed the size of the encoding resolution setting. If empty, it means canceling the watermark
var layout = Rect.fromLTWH(0,0,300,600);
var watermark = ZegoWatermark(imageURL, layout);
// Set watermark, supports dynamic modification during publishing stream
ZegoExpressEngine.instance.setPublishWatermark.setPublishWatermark(watermark: watermark, isPreviewVisible: true);

// Supports images in JPG and PNG formats
String imageURL = "file:///sdcard/Android/data/im.zego.zegoexpressapp/ZegoLogo.png";
// The watermark layout takes the upper left corner as the origin of the coordinate system, and the area cannot exceed the size of the encoding resolution setting. If empty, it means canceling the watermark
var layout = Rect.fromLTWH(0,0,300,600);
var watermark = ZegoWatermark(imageURL, layout);
// Set watermark, supports dynamic modification during publishing stream
ZegoExpressEngine.instance.setPublishWatermark.setPublishWatermark(watermark: watermark, isPreviewVisible: true);

Assets

flutter-asset://[Image resource name]: You need to declare the relative path of the resource file in pubspec.yaml.

// Supports images in JPG and PNG formats
String imageURL = "flutter-asset://resources/images/ZegoLogo.png";

// The watermark layout takes the upper left corner as the origin of the coordinate system, and the area cannot exceed the size of the encoding resolution setting. If empty, it means canceling the watermark
var layout = Rect.fromLTWH(0,0,300,600);
var watermark = ZegoWatermark(imageURL,layout);
// Set watermark, supports dynamic modification during publishing stream
ZegoExpressEngine.instance.setPublishWatermark.setPublishWatermark(watermark: watermark, isPreviewVisible: true);

// Supports images in JPG and PNG formats
String imageURL = "flutter-asset://resources/images/ZegoLogo.png";

// The watermark layout takes the upper left corner as the origin of the coordinate system, and the area cannot exceed the size of the encoding resolution setting. If empty, it means canceling the watermark
var layout = Rect.fromLTWH(0,0,300,600);
var watermark = ZegoWatermark(imageURL,layout);
// Set watermark, supports dynamic modification during publishing stream
ZegoExpressEngine.instance.setPublishWatermark.setPublishWatermark(watermark: watermark, isPreviewVisible: true);

Screenshot

1. After publishing stream, call the takePublishStreamSnapshot interface to take a screenshot of the publishing stream picture.

   ZegoExpressEngine.instance.takePublishStreamSnapshot().then((ZegoPublisherTakeSnapshotResult result) {
       // Save image
   });

   ZegoExpressEngine.instance.takePublishStreamSnapshot().then((ZegoPublisherTakeSnapshotResult result) {
       // Save image
   });

2. After playing stream, call the takePlayStreamSnapshot interface to take a screenshot of the playing stream picture.

   ZegoExpressEngine.instance.takePlayStreamSnapshot(streamID).then((ZegoPlayerTakeSnapshotResult result) {
       // Save image
   });

   ZegoExpressEngine.instance.takePlayStreamSnapshot(streamID).then((ZegoPlayerTakeSnapshotResult result) {
       // Save image
   });

FAQ

1. How to specify imageURL in ZegoWatermark?

   Supports images in JPG and PNG formats. If the image path is an absolute path on the device, imageURL must use file:// as prefix + absolute path on the device;

   If the path is in Assets format and the image is placed in the Flutter project, you need to first declare the relative path of the resource file in pubspec.yaml, and imageURL must use "flutter-asset://" as prefix.

2. How to specify layout in ZegoWatermark?

   The layout of the watermark cannot exceed the currently set video encoding resolution of the publishing stream. For setting the publishing encoding resolution, please refer to the setVideoConfig interface.