水印

更新时间: 2024/09/18 16:26:13

出于信息安全、版权声明、防伪、宣传等目的,您可以为视频流画面添加编码水印,例如添加公司名称、标语等文字水印、录制时间等时间戳水印、以及 logo 等图片水印。

在教育场景中,视频水印功能可以为教学课件设置版权方 Logo 等各种类型的水印;在金融场景中,为了保证业务员的操作规范性和服务质量、信息存档,需要对业务办理的全过程进行实时录制,并相应打上水印标识以实现防伪、记录等目的。

功能介绍

NERTC SDK 支持以下三种视频水印设置:

  • 静态图片水印:使用图片作为水印。
  • 文字水印:使用一段文字信息作为水印,支持设置字体和字号。
  • 动态时间戳水印:使用当前时间戳作为水印,显示格式为 “yyyy-MM-dd HH:mm:ss"。

前提条件

  • V5.5.0 之前的版本,请联系网易云信技术支持,开通视频水印功能。
  • V5.5.0 及之后版本,您可以直接使用视频水印功能,无需人工开通

示例项目

网易云信在 GitHub 上提供设置水印的开源示例项目 Watermark,您可以前往下载体验,也可以在线体验此功能。

注意事项

  • 视频水印相关方法作用于发布的视频流,并非画布;当画布被移除时,水印也不会自动移除。因此,对视频流截图时,图片里显示水印。
  • 每次仅支持设置单个视频水印,再次调用 setEncoderWatermarkConfigs 方法设置视频水印时,会覆盖之前的水印设置。
  • 您也可以调用原来的 setCanvasWatermarkConfigs 方法设置画布水印,但仅作用于本地视频画布,因此为了从源头保证数据的真实性,建议您使用编码水印。
  • 支持同时设置画布水印和视频水印,此时视频水印优先显示在上级图层。
  • 视频水印数量最多为1个

配置步骤

调用 setEncoderWatermarkConfigs 方法设置视频水印,水印在本地视频预览与视频通话过程中均生效。调用此方法时,您需要设置 options 参数,相关参数的说明如下:

  • mediaType:设置显示水印的视频流类型,可以设置为主流(video)或辅流(screen)。
  • imageWatermarks:设置图片水印。通过 NERtcImageWatermarkConfig 类配置图片水印。
  • textWatermarks:设置文字水印。通过 NERtcTextWatermarkConfig 类配置文字水印。
  • timestampWatermarks:设置时间戳水印。通过NERtcTimestampWatermarkConfig 类配置时间戳水印。

设置 options 为 null 时,表示取消水印。

设置图片水印

设置图片水印时,需要配置以下参数:

参数 参数说明
fps 播放帧率。
取值范围为 0 ~ 30,默认值为 0,表示不自动切换图片。
loop 是否设置循环。
默认值为 true,表示循环。若设置为 false ,则水印图片组播放完毕后消失。
imageUrls 图片路径。
支持 PNG 和 JPG 格式的图片,支持设置最多 10 张图片。
wmWidth 水印框的宽度。
单位为像素(pixel),默认值为 0,表示按原始图宽。
wmHeight 水印框的高度。
单位为像素(pixel),默认值为 0,表示按原始图高。
offsetX 图片左上角与视频画布左上角的水平距离。
单位为像素(pixel),默认值为 0。
offsetY 图片左上角与视频画布左上角的垂直距离。
单位为像素(pixel),默认值为 0。

注意事项

  • 由于浏览器限制,所有图片必须存于同一域名下。
  • 图片水印的图片大小不能超过 640*360 px。
  • 若您设置的播放帧率高于视频流的帧率,则按照视频流帧率切换图片。
  • 若您设置了水印框的宽度和高度,图片将缩放至水印框的宽高尺寸;若您未设置水印框的宽高,图片将按原始尺寸展示,但当原始尺寸大于视频画面尺寸时,图片将缩放至视频画面尺寸。
  • 支持通过 offsetX 等参数设置图片水印位置,详细说明请参考设置水印位置

示例代码

//图片水印
//rtc.localStream.init()后
rtc.localStream.setEncoderWatermarkConfigs({
   "mediaType": "screen",
   "imageWatermarks": [
     {
       "imageUrls": [
         "img/logo_yunxin.png"
       ],
       "loop": true
     }
   ]
 })

设置文字水印

设置文字水印时,需要配置以下参数:

参数 参数说明
content 指定文字水印内容。
设置为空时,表示不添加文字水印。
fontSize 字体大小。
单位为像素(pixel),默认值为 10,相当于 144 dpi 设备上的 10 x 15 磅。
fontColor 字体颜色。
格式为 ARGB,默认值为 0xFFFFFFFF,即白色。
wmWidth 水印框的宽度。
单位为像素(pixel),默认值为 0,表示没有水印框。
wmHeight 水印框的高度。
单位为像素(pixel),默认值为 0,表示没有水印框。
wmColor 水印框内背景颜色。
仅支持 ARGB 格式,默认值为 0x88888888,即灰色。支持透明度设置。
offsetX 水印框左上角与视频画布左上角的水平距离。
单位为像素(pixel),默认值为 0。
offsetY 水印框左上角与视频画布左上角的垂直距离。
单位为像素(pixel),默认值为 0。

注意事项

  • 文字水印的字符串长度没有限制,但暂不支持换行。最终显示受字体大小和水印框大小的影响,超出水印框的部分不显示。
  • 支持通过 offsetX 等参数设置文字水印位置,详细说明请参考设置水印位置

示例代码

//文字水印
//rtc.localStream.init()后
rtc.localStream.setEncoderWatermarkConfigs({
   "mediaType": "video",
   "textWatermarks": [
     {
       "content": "网易云信",
       "offsetX": 200,
       "offsetY": 200
     }
   ]
 })

设置时间戳水印

设置时间戳水印时,需要配置以下参数:

参数 说明
fontSize 字体大小。
单位为像素(pixel),默认值为 10,相当于 144 dpi 设备上的 10 x 15 磅。
fontColor 字体颜色。
默认值为 0xFFFFFFFF,即白色。
wmWidth 水印框的宽度。
单位为像素(pixel),默认值为 0 表示没有水印框。
wmHeight 水印框的高度。
单位为像素(pixel),默认值为 0 表示没有水印框。
wmColor 水印框内背景颜色。
仅支持 ARGB 格式,默认值为 0x88888888,即灰色。支持透明度设置。
offsetX 水印框左上角与视频画布左上角的水平距离。
单位为像素(pixel),默认值为 0。
offsetY 水印框左上角与视频画布左上角的垂直距离。
单位为像素(pixel),默认值为 0。

注意事项

  • 时间戳水印的时间和当前时间相同,且实时变化。
  • 支持通过 offsetX 等参数设置时间戳水印位置,详细说明请参考设置水印位置

示例代码

//时间戳水印
//rtc.localStream.init()后
rtc.localStream.setEncoderWatermarkConfigs({
   "mediaType": "video",
   "timestampWatermarks":
     {
       "offsetX": 200,
       "offsetY": 200
     }
 })

切换水印

视频水印数量最多为1个,切换水印可以直接传入新的水印参数

示例代码

//文字水印
//rtc.localStream.init()后
rtc.localStream.setEncoderWatermarkConfigs({
   "mediaType": "video",
   "textWatermarks": [
     {
       "content": "网易云信",
       "offsetX": 200,
       "offsetY": 200
     }
   ]
 })
// 切换时间戳水印
rtc.localStream.setEncoderWatermarkConfigs({
   "mediaType": "video",
   "timestampWatermarks":
     {
       "offsetX": 200,
       "offsetY": 200
     }
 })

相关参考

设置水印位置

添加水印时,可以通过 offsetX、offsetY、wmWidth 和 wmHeight 设置水印的位置和区域大小。

API 参考

方法 功能描述
setEncoderWatermarkConfigs 设置水印
此文档是否对你有帮助?
有帮助
去反馈
  • 功能介绍
  • 前提条件
  • 示例项目
  • 注意事项
  • 配置步骤
  • 设置图片水印
  • 设置文字水印
  • 设置时间戳水印
  • 切换水印
  • 相关参考
  • 设置水印位置
  • API 参考