水印处理
融云支持在视频流上添加水印。添加水印有多种控制方式,本文仅介绍方案一:
- 方案一:基于 canvas 实现添加水印,并发布带水印的视频流。客户端发布的视频流即带有图片水印,因此订阅分流或合流的直播观众均会看到带水印的视频流。
- 方案二:使用客户端 SDK 提供构建 MCU 配置的方法
addPictureWaterMark
,为合流中为单道视频流(子视图)添加图片水印。仅订阅合流的直播观众可看到水印。详见合流布局。 - 方案三:使用服务端 API 的
/rtc/mcu/config
接口,在服务端处理,添加时间戳水印、文字水印或图片水印。这种方式支持为单人视频流或合流视频添加水印,但只有订阅合流的观众可看到带水印的视频流。本文不介绍服务端的处理方案,如有需要,请参见服务端文档直播合流。
方案一、二适用于实现 App 客户端用户自主添加个性化水印,例如每个主播可自行设置贴纸、挂件等;方案三更适用于由 App 添加统一风格的水印。
客户端与服务端添加的水印相互独立。如果同时使用,则订阅合流的观众可能会看到水印叠加。
前提条件
添加水印功能主要使用到了 canvas.captureStream 捕获 canvas 中绘制出的流对象。兼容性情况可参考 canvas.captureStream 兼容性情况。
实现流程
- 采集音视频资源。
- 创建 video 标签播放视频流,用于将视频绘制到 canvas 画布中。
- 创建 image 实例,加载水印图片。
- 创建 canvas 标签,将视频和水印绘制到 canvas 画布中。
- 使用 canvas.captureStream 从画布中采集视频轨道,转为融云 RTC 视频轨道,通过 RTC SDK 的 publish 接口发布到房间中。
步骤一:采集音视频资源
以获取摄像头、麦克风的资源为例,使用浏览器原生 API MediaDevices.getUserMedia() 获取 mediaStream
。
javascript
const mediaStream = await navigator.mediaDevices.getUserMedia({
audio: true,
video: {
width: 640,
height: 480
}
})
如需为屏幕共享需要添加水印,您也可以从屏幕分享源采集获得资源。如果播放文件,可以从文件获取资源。
步骤二:播放音视频资源
创建播放视频的 video
元素。元素宽高需与采集的视频资源的分辨率宽高一致,避免拉伸。本端不需要播放自己的声音,因此示例中已将音轨作静音处理。
javascript
// 使用 video 标签播放摄像头视频;不播放自己的声音,避免回声
<video muted id="videoEl" style="display:none; width:640px; height:480px"></video>
播放资源。以下示例使用了 srcObject:
javascript
/**
* 播放音、视频
*/
const videoEl = document.getElementById('videoEl');
videoEl.srcObject = mediaStream;
步骤三:加载水印图片
创建 image 实例,加载水印图片。注意,加载线上图片时,需允许跨域访问。参见允许图片和 canvas 跨源使用。
javascript
const loadImage = (imageUrl) => {
return new Promise((resolve) => {
const image = new Image();
image.src = imageUrl;
image.onload = () => resolve(image);
});
}
const image = await loadImage('/assets/image/watermark.jpg')