Real-Time Audio and Video
  • Platform
  • Framework / Engine
  • iOS
  • Android
  • macOS
  • Windows
  • Linux
  • Web
  • WeChat Mini Program

Beauty/Watermark/Snapshot

Update Time:2021-09-17 18:57

1 Introduction

There are times and occasions when the users want to look like their best self in a video conference call or a live broadcast. Using the ZEGO Express SDK and Effects SDK together can helping you implement AI beautification features such as skin smoothing and skin color adjustment that make users look amazing on live video. To implement a video call or live streaming with beautification features, see Best practices - Implement a video call with beautification features.

The ZEGO Express SDK also provides the ability to watermark your video stream. For example, businesses and organizations can use the watermark feature to display their logo on the video.

This document mainly describes how to implement the watermark and screenshot features with the ZEGO Express SDK.

2 Sample code

For the sample code related to this feature, check out the source files in the /ZegoExpressExample/Examples/Others/Beautify directory in the SDK sample code package.

For information about how to download and run the sample code, see Sample Codes.

3 Prerequisites

Before implementing the watermark and screenshot features, make sure you complete the following steps:

  1. Create a project in ZEGO Admin Console, and get the AppID and AppSign of your project. For details, see ZEGO Admin Console - Project management.
  2. Integrate the ZEGO Express SDK into your project. For details, see Integration.
  3. Implement the basic audio and video features. For details, see Implementation.

4 Implementation steps

4.1 Using beauty features

To implement the beauty features, see Best practices - Implement a video call with beautification features.

4.2 Using stream watermark

Images in "JPG" and "PNG" formats (i.e., image files with subfixes ".jpg", ".jpeg", and ".png") can be used as watermarks.

Currently, the imageURL parameter in the ZegoWatermark object supports the following two path formats:

  1. Accessing the image in the Bundle via the absolute path

    file://[the absolute path of the image in the bundle]: If the image is stored somewhere in the Bundle, you obtain the absolute path of the image in the bundle through the pathForResource:ofType: method of NSBundle. The imageURL should start with a prefix file:// followed by the absolute path of the image in the bundle.

    watermark-bundle
```objc
ZegoWatermark *watermark = [[ZegoWatermark alloc] init];

NSString *imagePath = [[NSBundle mainBundle] pathForResource:@"ZegoLogo" ofType:@"png"];
watermark.imageURL = [NSString stringWithFormat:@"file://%@", imagePath];

watermark.layout = CGRectMake(0, 0, 200, 200);

[self.engine setPublishWatermark:watermark isPreviewVisible:YES];
```
  1. Accessing the image in the Assets directory of the iOS project

    asset://[image file name]: The image is must be stored in Assets.xcassets of the iOS project.

    watermark-assets
```objc
ZegoWatermark *watermark = [[ZegoWatermark alloc] init];
watermark.imageURL = @"asset://ZegoLogo";
watermark.layout = CGRectMake(0, 0, 200, 200);
[self.engine setPublishWatermark:watermark isPreviewVisible:YES];
```

4.3 Using snapshot feature

  1. To take a snapshot of the published images, call the takePublishStreamSnapshot method.
[[ZegoExpressEngine sharedEngine] takePublishStreamSnapshot:^(int errorCode, UIImage * _Nullable image) {

            if (errorCode == ZegoErrorCodeCommonSuccess && image) {
                UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, UIScreen.mainScreen.bounds.size.width / 2, UIScreen.mainScreen.bounds.size.height / 2)];
                imageView.image = image;
                imageView.contentMode = UIViewContentModeScaleAspectFit;

            }
}];
  1. To take a snapshot of the played images, call the takePlayStreamSnapshot method.
[[ZegoExpressEngine sharedEngine] takePlayStreamSnapshot:self.streamID callback:^(int errorCode, ZGImage * _Nullable image) {
        if (errorCode == ZegoErrorCodeCommonSuccess && image) {
            UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, UIScreen.mainScreen.bounds.size.width / 2, UIScreen.mainScreen.bounds.size.height / 2)];
            imageView.image = image;
            imageView.contentMode = UIViewContentModeScaleAspectFit;
        }
}];

5 API Reference

Method Description
setPublishWatermark Sets up stream watermark before stream publishing.
takePublishStreamSnapshot Takes a snaphot of the published images.
takePlayStreamSnapshot Takes a snapshot of the played images.

6 FAQ

  1. How to set the layout property of the ZegoWatermark object?

    The watermark area cannot exceed the size set by the encoding resolution of the stream.

    For more details about the encoding resolution of the stream, refer to the setVideoConfig method.