概述

本文首要讲的是笔者近期遇到一个难题，从遇上，到测验各种方案，踩各种坑，终究处理的心路旅程，供作参阅学习。

前文

我们的产品是一个东西类软件（运用nwjs的桌面应用），用户能够提交自己感兴趣的链接，我们去协助收集里面的视频。

最近一个用户z j . w 2 # : B n常运用的一个* 0 k T e J =网站上的视频加了非常严峻的水印（动态方位，从左到右移动的水印，而且仍是很多个水印）

类似这样：

在查看了视频链接7 ] #无法逆! 3 B 9 c P r Q向到无水印视频的链接之后（视频链接是一个UUm c = $ u ` O j +ID），就有了本文。

笔者技术介绍

一个前端，自认为编程根底还行，写过JAVA（crud boy）。

第一步

一初步，毫无疑问，我当然是跟产品说，不可，这个做不了，去水印不现实+ S N % / z。不过，链接里面不是有图片么，我们自己把图片组成视频，你觉得这样的降级方案怎么样？
通过一番剧烈讨(si)论(bi)，产品勉强赞同了。但是，需求我在图片上做一些动画效果，例如图片之间的动画图片什么的，不能单纯一张图片静止不动播映几秒。

为了省钱且开发^ t 3 #时间赶（线上急着用），我首要测验了有没有方案能在前端直接生成视频，成果还真的有~

Whammy 这个库能将你的canvas动画转成webp(视频格局的y R ! Y一种)

他的原理其实便是将canvas* V n +逐帧保存到webp，终究将一组webp转成webm格局的视频）

我很快就把canvas动画写好了，然后逐帧保存，嗯，就这样搞定了~写的时分仍是很easy的

但是嘛~~~缺点就出来了，速度实在是太特么慢了，视频体积也太特么大了。

在当时至少也勉强处理了一点问题，给布置上去了（又不是不能用.jpg)D 9 } e g

第二步

前面的方案布置上线之后，我便立刻初步了优化之路，通过一下午的探究，我发现………………这玩意没的优化空间，撑死便是把canvas动画改成webgl烘托，烘托速度快一点。

但是上面提到的两个缺点跟动画烘托速度没啥联络，把一帧动画转成webp的速度实在是慢到令人发指，终究的webp转成webm的速度也是0 4 | %无法忍受，最最无_ , R , E w M z S法忍受的是还极度吃CPU和内o b K e ; k % ; s存。

所以，我很快就抛弃了优化方案，准备重构！已然你JS速度这么慢，C+K ? 3 u H A 0 x 7+速度快啊，我用C++写不就行了嘛~自己写一个c++扩N 9 3 _展，再打包成nodejs原生q * *模块。

emmm，听起来如同可行，但是，我没写过C++啊！（只在菜鸟教程上看过C++入门）

自己从0初步写是不太现实的，所以凭借了搜索引擎，

先看了看C++通过图片2 j W D Z |转成视频的方案（从stackoverflow上扒了不少代码），又看了一些nodejs原生模块的教程，又看了FFMPEG，嗯，这个好强大！

一番血和泪，终究把拷贝出来的代码修修改改,运用了freeImg 翻开图片，进行图片操作，逐帧修改操作，终究调用FFMPEG组成MP4导出，

当然了，把这个C++终究编译到nwjs客s y户端上去n v M J执行，也D X k L ~ g U q是踩了不少坑。

到这儿，仍是存在一个丧命问题，懂图@ Y , a画处理的同学到这儿是不是发现一个问题了，没错，由于我的弱鸡，我没有用到GPU！！x T m N r！这样重构出来的( N 4 , u功用并没有比本来的方案提高太多，仍是没有处理问题。

到这儿，我现已快熬不住了，功用功用好歹是优化了一些，先上线吧。

第三步

后边其实一向想的是把C++改成调用GPU去完结，但是一向没时间，而且半途有计算过我们用户电脑的配置，大部分用户的电脑都没什么独立显卡……

而且不少用户都不满意这种降级方案的完结……

早在第一步的时分我就跟产品说过视频去水印的或许处理方案，深度学% 9 U P I i 5习标记出视频水印方位，然后运用水印原图的差值叠加的方法去水印，嗯，理论上是可行的。但是，我们团队只要一p F $ F K个前端和后端啊，
上哪去给你生出一个会深度学习的！

迫于产品天天给我L N C a x w j B压力，我初步去了解一些深度学习的方案了，不看不知道一看吓一跳。

如同如同[ [ 8 I ;没有想象中那么难，深度学习结构都现已封装的那么完全了，如同不懂深度学习的人也能够调用结构来练习自己的模型？

到这儿的时分，其实我现已跟产品夸下海口了233333

依据网上的一大堆教程和介绍s O 6 c u %，终究决议选用tensorflow object detect api，运用官方供应的预练习模型，花了两三天总算把tensorflow-gpu版别下载了下来 ( $ ; $ = 5，
又花了几天跑了官方demo和别人开源练习好的模型，嗯，可行！

期间最苦楚的工作是自己标了几p j z $ W w a十张图片，太折磨人了。。

公司电脑显卡不太行，我拿了自己的# / 1 p k战神笔记本1060跑了好几天，总算！！！！

用N & 8 F 0opencv调用练习出来的数据模型，辨认水印方位，进行批改，保存到一个新视频里，再运用FFMPEG将音频合过来。

圆满处理了问题了。

后续

由于涉及到产品隐私问题，就不供应代码和示例了~

整个过程中，给我协助最大的是y a P X c T 谷歌，github,阅读英文技术文章的才干。遇到问题就谷歌一下（强烈推荐英文搜索！！！），查找处理方案，

想了解/运用一个技术结构/第三方库的最好的方法是上官网看教程，到github看issue，都找不到就看看下源码吧，说不定就有思路了。

不要把自己局限在某个技术范围上，敢想敢做233333

受限于文笔和技术水平，写的或许不是很好，假如过错请指出。

我的github blog，欢迎way m 1tch/star~~~
github.com/zuw } W Z 7 vluoaaa/bl…