icon

一.前言

曾经有个项目要求给实时画面添加时间水印，当时在老大的带领下，使用的方案是ffmpeg+freetype，但是这种方案有两点不太好

1. 性能问题，视频分辨率设置为1920*1080时就有点处理不过来并且CPU略高

2. 水印看不清问题

   

   1.jpeg

因为我们的时间水印是白色，这样一旦背景是白色时，就会导致水印看不到，当时是给白色字体加了黑边来规避这个问题，但是看到很多大厂都是用反色的方案

水印反色

二.实现思路

1. 视频画面作为一路原始图像输入，背景透明的时间水印(背景的alpha值为0,时间字体的alpha值不为0)作为第二路的原始图像输入，然后判断以下两个条件同时成立，将时间水印的像素点变黑
   • 时间水印背景不透明时(也就是当前渲染的像素点为时间像素时)
   • 视频背景为白色时

2. 如何判断视频画面为白色呢，不会真的去判断RGB三个像素都等于1.0把，这样的代码计算也太严格了点，参考下面RGB转YUV公式我们可以知道，当RGB值都比较大时，亮度分量Y的值也会比较大，因此这里我们用亮度分量Y来判断，当Y大于某个值时，我们就觉得背景色比较白会导致我们的时间水印看不清了

   

   RGB转换YUV公式
3. 采用OpenGL用GPU代替CPU的方式来做图像处理，增加效率

三.实现后的效果

3F1D8F41-8313-4B6A-A918-48F30A805528.jpeg

四.关键代码

1. 生成时间水印

- (UIImage *)string2image；
- (char*)image2pixel:(CGImageRef)image；

2. shader判断当背景亮度大于0.85时将时间像素变为黑色

// gray是Y分量的大小
time = mix(time, vec4(vec3(0.0), time.a), step(0.85, gray));

3. shader判断当时间水印像素点不透明度大于0.9时显示时间水印像素，否则显示视频画面

time = mix(result, time, step(0.90, time.a));

五.遇到的问题

1. 用UIGraphicsBeginImageContextWithOptions开启包含透明通道的位图并用NSString的drawInRect画字符串上去时以为只要有字符串的地方alpha一定是1.0，然后判断alpha只有为1.0时才显示时间，结果导致时间水印显示不全，后来一个像素一个像素去读才发现并不是有时间像素的位置alpha一定是1.0
2. 时间水印在OpenGL中的纹理环绕方式之前用的GL_REPEAT，结果导致时间水印显示不出来，改用GL_CLAMP_TO_EDGE后正常，这个问题是没有找到原因的，因为这两个参数按道理是超出纹理坐标后的贴图方式，个人不觉得在这个Demo里会影响水印显示的，希望有高人能指出原因吧。

六.总结

1. Demo在1920x1080 30fps 渲染时的CPU大概维持在百分之8左右，加入时间水印的逻辑后CPU大概在百分之14左右，因此在性能上是没问题的
2. OpenGL的学习个人感觉难度还是不小的，因为OpenGL的接口出错不那么好定位，而且稍微有调用接口顺序不对，就容易黑屏，因此定位问题需要更扎实的理论基础，继续加强学习吧
3. 刚开始学习OpenGL的同学可以跟着这位大神的博客，本人最开始学习就参考了他的很多文章及Demo
   落影loyinglin：OpenGLES

七.参考书籍及文章

天天P图攻城狮：OpenGL shader性能优化策略一减少分支语句
LearnOpenGL CN-纹理
Dev_Maskmale：iOS 开发之字符串转图片
书籍：音视频开发进阶指南(基于Android与iOS平台的实践)

八.Demo地址

视频水印添加及反色 Demo地址