WebRTC[29]-WebRTC如何在网页端添加硬水印【技巧版】

目录

前言

正文

软水印

硬水印

CCTV直播举例

软水印的缺点

“抛砖引玉”

硬水印的具体实现

结尾

前言

做音视频的同学都知道播放器展示的视频水印分为软水印和硬水印两种，水印的作用一方面是用来增加视频画面的展示内容，比如广告效果、特效处理等；另一方面是出于版权保护的目的，防止视频盗录的风险。一般实现视频的软水印是在播放器端进行处理的，安全性会比较差。硬水印则是在视频源上进行处理，将水印打到视频里，成为视频内容的一部分，这样安全性就会非常高。

正文

软水印

软水印，就是在播放器的视图view上做操作，比如增加logo、贴图、马赛克等。其实，常见的视频网站很多时候都是使用播放器实现软水印。

从整体上的效果来讲，软水印和跑马灯、弹幕差的实现效果差不多。

硬水印

硬水印，就是通过视频转码，将logo、贴图、马赛克等信息以数据元素的形式和原视频画面融合在一起，成为视频内容的一部分。在播放过程中，不需要我们控制他们的显示时机、位置、透明度等，因为这些控制因素在转码的时候就确定了。当播放带硬水印的视频时，直接使用播放器播放就行了，不需要关心水印的位置和透明度等信息，从一定程度上减少了播放器的处理逻辑。

CCTV直播举例

接下来举一个比较形象的例子，请看下图。

编辑

上图，我一共圈出了三个区域，其中，区域1（左上角）是一个非常明显的硬水印，一般各个电视台在购买影视资源后，都会叠加自己台标，一方面是方便入库，另一方面是保护版权，防止资源盗用。区域2（右上角）一般是一个软水印（少数情况也可能是硬水印），会根据当前播放视频的清晰度动态切换，如果片源切成4K，右上角的图标中的“高清”很可能就是“4K”了。区域3（偏右下角）是“超级硬水印”，哈哈，它作为视频画面的原始内容，其实和区域1的硬水印是完全一样。

通过上面的介绍，我相信大家应该对原视频画面、软水印、硬水印就能够理解的非常清楚了。

软水印的缺点

软水印在移动端APP和PC客户端播放时安全性还比较高，毕竟客户端都是我们自己开发的，播放逻辑控制起来也相对受控，但是Web端却面临着较大的安全因素，因为浏览器是完全不受控的，如果原始视频流没有添加硬水印信息，被别有用心的人通过浏览器的开发者模式拿到视频源的URL，就可以任意传播了，不论是直播场景还是点播场景，难免会造成一些损失。

具体如何通过开发者模式拿到URL，可以参考链接：【免费】如何轻松的从音乐网站下载自己喜欢的mp3音乐？_Data-Mining的博客-CSDN博客

面对这样的问题，WebRTC在网页端应该怎样处理呢？

“抛砖引玉”

今天们就来介绍一下如何实现网页端添加WebRTC硬水印。

开始前，我们先了解一下，正常情况下，WebRTC是如何在网页端渲染视频画面的。没错，熟悉WebRTC使用背景的同学都会知道，网页渲染视频画面使用的是video标签。我们本事不需要过多的关心video标签内部的实现原理，只需要掌握它的使用方法就够了。

比如，创建本地视频流后，如何渲染呢，下面通过一个小例子来介绍。

let getUserMedia=(navigator.getUserMedia ||navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
    getUserMedia.call(navigator,{ video:true, audio:true },function(localMediaStream){ let video =document.getElementById('videotag');
        video.srcObject = localMediaStream;
    },function(e) { console.log("error: ",e);
    });