水印和截图

2024-02-29

功能简介

当需要为教育类的教学课件设置版权方 Logo 等场景下，可使用 SDK 的水印功能来实现。

本文主要讲述如何利用 SDK 实现水印和截图功能。

示例源码下载

请参考下载示例源码获取源码。

相关源码请查看 “/ZegoExpressExample/Examples/Others/Beautify” 文件。

前提条件

在实现水印和截图功能之前，请确保：

已在 ZEGO 控制台创建项目，并申请有效的 AppID 和 AppSign，详情请参考控制台 - 项目信息。
已在项目中集成 ZEGO Express SDK，并实现了基本的音视频推拉流功能，详情请参考快速开始 - 集成和快速开始 - 实现流程。

使用步骤

水印

调用 ZegoWatermark 配置一个水印的图片 URL 以及该水印在画面中的大小方位。

调用 setPublishWatermark 接口设置推流水印。

注意

水印图片只支持 “PNG” 与 “JPEG” 两种图片格式，即 “.png”、“.jpg”、“.jpeg” 三种后缀的图片文件。

ZegoWatermark 对象中的 imageURL 参数支持传两种路径格式：绝对路径和 Assets。

绝对路径

file://[图片在 Bundle 中的绝对路径]：需要将图片存放于项目 Bundle 内任意位置，通过 NSBundle 的 pathForResource:ofType: 方法获取图片的绝对路径，并加上 “file://” 前缀。

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

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

Assets

asset://[图片资源名称]：需要将图片存放在 iOS 工程自带的 “Assets.xcassets” 中。

ZegoWatermark *watermark = [[ZegoWatermark alloc] init];
watermark.imageURL = @"asset://ZegoLogo";
// 水印布局左上角为坐标系原点，区域不能超过编码分辨率设置的大小。若为空表示取消水印
watermark.layout = CGRectMake(0, 0, 200, 200);
// 设置水印，支持在推流前后动态修改
[self.engine setPublishWatermark:watermark isPreviewVisible:YES];

ZegoWatermark *watermark = [[ZegoWatermark alloc] init];
watermark.imageURL = @"asset://ZegoLogo";
// 水印布局左上角为坐标系原点，区域不能超过编码分辨率设置的大小。若为空表示取消水印
watermark.layout = CGRectMake(0, 0, 200, 200);
// 设置水印，支持在推流前后动态修改
[self.engine setPublishWatermark:watermark isPreviewVisible:YES];

截图

推流后，调用 takePublishStreamSnapshot 接口对推流画面截图。

[[ZegoExpressEngine sharedEngine] takePublishStreamSnapshot:^(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;
    }
}];

[[ZegoExpressEngine sharedEngine] takePublishStreamSnapshot:^(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;
    }
}];

拉流后，调用 takePlayStreamSnapshot 接口对拉流画面截图。

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

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

常见问题

ZegoWatermark 中的 layout 如何指定？

水印的布局不能超过当前设置的推流的视频编码分辨率，对推流编码分辨率的设置可参考 setVideoConfig 接口。