Live Streaming
  • iOS : Objective-C
  • Android
  • Web
  • Flutter
  • React Native
  • Electron
  • Unity3D
  • Windows
  • macOS
  • Linux
  • Overview
  • Live Streaming vs. Interactive Live Streaming
  • Develop your app
    • Live Streaming
      • Integrate the SDK
      • Implement a basic live streaming
      • Enhance basic livestream
      • CDN
      • Play live streams
    • Interactive Live Streaming
  • Upgrade the livestream
    • Advanced features
      • Enhance the livestream
        • Share the screen
        • Improve your appearance in the livestream
        • Beautify & Change the voice
        • Output the livestream in H.265
        • Watermark the live/Take snapshots
        • Config video codec
        • Visualize the sound level
      • Message signaling
        • Convey extra information using SEI
        • Broadcast real-time messages to a room
        • Quotas and limits
      • Ensure livestream quality
        • Test network and devices in advance
        • Check the room connection status
        • Monitor streaming quality
        • Configure bandwidth management
      • Play media files
        • Play media files
        • Play sound effects
      • Record video media data
      • Join multiple rooms
      • Publish multiple live streams
      • Low-latency live streaming
      • Use the bit mask
      • Common audio config
      • Playing streams via URL
      • Mix the live streams
    • Distincitve features
      • Set the voice hearing range
      • Single stream transcoding
      • Low-light enhancement
      • Customize the video and audio
  • Upgrade using Add-on
  • Resources & Reference
    • SDK
    • Sample code
    • API reference
      • Client APIs
      • Server APIs
    • Debugging
      • Error codes
    • FAQs
    • Key concepts
  • Documentation
  • Live Streaming
  • Upgrade the livestream
  • Advanced features
  • Enhance the livestream
  • Watermark the live
  • Take snapshots

Watermark the video/Take snapshots

Last updated:2023-05-17 19:00

Introduction

ZEGOCLOUD's SDKs provide 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 Video Call SDK.

Prerequisites

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

  • ZEGO Express SDK has been integrated into the project to implement basic real-time audio and video functions. For details, please refer to Quick start .
  • A project has been created in ZEGOCLOUD Console and applied for a valid AppID and AppSign. For details, please refer to Console - Project Information .

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];
```

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

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.

Page Directory