CN112351283A - 一种透明视频处理方法 - Google Patents

Abstract

本发明属于网络视频处理技术领域，具体是一种透明视频处理方法，其特征在于包括以下步骤：S1在设计动画时将视频保存为分解视频，分解视频的每一帧图片都分为两部分，其中左边为透明通道，右边为正常视频，两侧视频均为黑底；S2通过Flash的as3.0进行视频的加载及播放，将视频加载到Flash内，显示的视频效果为S1中的分解视频；S3对步骤S2中的的分解视频进行分解，需要显示出来的动画部分用白色表示并显示在左边透明通道中；S4利用as3.0在步骤S3中的视频上添加着色器；S5利用着色器选取分解视频中的像素，进行叠加计算，将步骤S3中任意取左侧透明视频的R、G、B层替换右侧正常视频的α层，并将正常视频的新的R、G、B、α层进行像素叠加，像素处理速度快。

Description

一种透明视频处理方法

技术领域

本发明属于网络视频处理技术领域，具体是一种透明视频处理方法。

背景技术

随着互联网的发展，网页交互和动画展示方案越来越复杂。 用户对网页动画的质量和绚丽程度要求越来越高。 在计算机性能日益提升的情况下，我们现在可以在前端对视频进行实时处理，并且可以针对每一个视频像素进行处理。

当前常用的视频处理方式是用一般平台使用WebGL对MP4格式的动画视频进行渲染，UDE将动画视频保存为左右两个板块，左侧为透明数据部分，右侧为黑色背景的正常视频，在播放视频动画时，利用GPU并行计算每个像素点或者CPU列队计算像素点将左右两边的视频重叠，然后进行播放。上述视频处理方式中GPU虽然比较强大，但是GPU对一些低版本的浏览器并不支持，造成低版本浏览器无法播放这些动画视频，容易造成兼容性问题。

而使用CPU对视频的每一帧一个像素一个像素的逐个处理，因为计算速度的限制，这个方法只能用来处理一些尺寸较小的视频，尺寸稍微大一点的视频其计算量就会成倍数的增加，以一个1080*720的视频为例，它每秒的计算次数至少达到1080*720*15（其中15为每秒钟视频播放的帧数）次，大量的计算导致性能较低的电脑视频播放时的卡顿。

发明内容

为了弥补现有技术的不足，本发明提供了一种高性能高兼容性的透明视频处理方法。

所述的一种透明视频的处理方法，其特征在于包括以下步骤：

S1在设计动画时将视频保存为分解视频，所述分解视频的每一帧图片都分为两部分，其中左边为透明通道，右边为正常视频，两侧视频均为黑底；

S2通过Flash的as3.0进行视频的加载及播放，将视频加载到Flash内，显示的视频效果为所述S1中的分解视频；

S3对步骤S2中的所述的分解视频进行分解，需要显示出来的动画部分用白色表示并显示在左边所述透明通道中；

S4利用as3.0在步骤S3中的视频上添加着色器，通过所述着色器生成滤镜，所述滤镜对像素每一帧进行处理；

S5利用着色器选取所述分解视频中的像素，进行叠加计算，将所述步骤S3中任意取左侧透明视频的R、G、B层进行替换右侧正常视频的α层，并将正常视频的新的R、G、B、α层进行像素叠加。

所述的透明视频处理方法，其特征在于所述步骤S1中的所述透明通道用于存放视频的透明数据。

所述的透明视频处理方法，其特征在于所述步骤S3中，所述透明通道中的透明数据均为白色，其R、G、B层相同。

所述的透明视频的处理方法，其特征在于所述步骤S5在替换像素时，需要将每一帧视频图像与顶点坐标进行映射，视频右半侧映射到画面中。

与现有技术相比，本发明有以下优点：

本次算法有效利用了as3.0提供的Flash着色器来替代原有的逐帧算法，使用Flash进行透明视频处理，兼容性非常高，并且可以不依赖于浏览器，仅需安装Flash播放器就可以使用。通过as3.0对webgl的支持，webgl能够提供更快的像素处理速度。

附图说明

图1为本发明处理方法的流程示意图；

图2为本发明透明视频处理方法利用着色器替换RGB像素的；

图3为本发明处理方法实施例的处理示意图；

图4为本发明处理方法实施例的处理效果图。

具体实施方式

在本发明的描述中，需要理解的是，术语“一端”、 “另一端”、 “外侧”、 “上”、 “内侧”、 “水平”、 “同轴”、 “中央”、 “端部”、 “长度”、 “外端”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。

下面结合附图对本发明作进一步说明。

如图所示，一种透明视频的处理方法，首先UED在设计动画时将视频保存为一个较为特殊的视频，这个视频的每一帧图片都分为左右两部分，左边为透明通道，存放视频的透明数据部分；右边为正常视频，两侧视频均为黑底。

在浏览器版本较高或者硬件环境性能良好的情况下，首先尝试使用webgl进行渲染，如果出现渲染异常，则表明浏览器不支持此方式。

结合图2-图4所示，以某一动画视频为例，UDE设计效果如下：

首先，UED在设计动画时，将视频保存为一个较为特殊的视频，这个视频的每一帧图片都分为左右两部分，左边为透明通道，存放视频的透明数据部分；右边为正常视频，两侧视频均为黑底。

通过Flash的as3.0来实现视频的加载和播放，将视频加载到Flash内，使视频能够正常播放，显示出来的具体效果为左边是透明通道右边是图像的正常视频。

Flash代码如下：

_netConnection = new NetConnection();

_netConnection.connect(null);

_netStream = new NetStream(_netConnection);

_netStream.checkPolicyFile = true;

_netStream.client = this;

var url:String = data.url || "";

_netStream.play(url);

_video = new Video();

_video.attachNetStream(_netStream);

this.addChild(_video);

执行此代码后出现效果图3所示，需要显示出来的动画部分用白色表示并显示在左边，透明通道中白色区域内的透明数据相同，其R、G、B层相同，通过选取透明视频的任意R、G、B层用于替换正常视频中的α层中。

然后利用as3.0在视频上添加着色器，并用着色器生成一个滤镜，滤镜可以使用着色器的算法对像素的每一帧进行处理。

着色器算法为将左侧的透明数据转移到右边的视频上面，因为左侧的透明通道数据rgb三个通道数据是一样的，所以任意选一个通道进行替换。

可以取左边的r通道数据，替换右侧视频的alpha通道。 这样就可以使右侧的视频对应区域变成透明的。

对应的着色器算法通过代码表述如下：

<languageVersion : 1.0;>

kernel test

< namespace : "Your Namespace";

vendor : "Your Vendor";

version : 1;

>

{

parameter float2 center

<

minValue:float2(0.0, 0.0);

maxValue:float2(4096.0, 4096.0);

defaultValue:float2(0.0, 0.0);

>;

input image4 src;

output pixel4 dst;

void

evaluatePixel()

{

float2 curPoint = outCoord();

if(curPoint.x > center.x){

dst.a = sampleNearest(src, curPoint - float2(center.x, 0)).r;

dst.rgb = sampleNearest(src, curPoint).rgb;

}

}

}

利用着色器取左边的透明通道和右边的视频区域像素，进行叠加计算，然后替换掉原来的RGB像素，需要将每一帧视频图像与顶点坐标进行映射，视频右半侧映射到画面中，利用Flash的视频功能将正常视频的新的R、G、B、α层进行像素叠加，并最终呈现。

具体来说，UED在进行视频动画设计时，将需要显示出来的动画部分用白色表示并显示在左边。

左边的白色指示的是用户能够看到的地方，黑色是需要透明处理的区域。 当要播放视频时，由于透明数据是白色的，所以它的R、G、B层是一样的，所以可以任意取透明视频的R、G、B层来替换正常视频的α层，并利用Flash提供的视频功能将正常视频新的R、G、B、α层进行像素叠加，然后呈现给观众。

本次算法有效利用了as3.0提供的flash着色器来替代原有的逐帧算法，使用Flash进行透明视频处理，兼容性非常高，并且可以不依赖于浏览器，仅需安装Flash播放器就可以使用。通过as3.0对WebGL的支持，WebGL能够提供更快的像素处理速度，因为WebGL工作原理类似于多线程同时进行渲染，所以速度远超CPU。

例如：以一个1080*720的视频为例，它每秒的计算次数至少达到1080*720*15=11664000（其中15为每秒钟视频播放的帧数）次。 这个数字非常大，非常的耗费时间。 本方法利用GPU多通道并行的进行计算，假设通道数为N，那么进行11664000次计算所需要的时间为1/N秒。并且这个加速效果跟显存的位宽有关系，位宽越大一次渲染数据就越大。

本发明方法主要提高视频动画播放的兼容性，基于Flash播放平台而进行的技术优化，以支持更多的低版本浏览器的用户。

在浏览器版本较高或者硬件环境性能良好的情况下，视频动画播放会优先采用GPU处理方式来播放视频。而当浏览器版本较低或硬件环境较差的情况下，抛弃一部分显示效果，采用基于Flash的透明视频替换叠加的方式进行视频播放。

最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。

Claims (4)

1.一种透明视频处理方法，其特征在于包括以下步骤：

S1在设计动画时将视频保存为分解视频，所述分解视频的每一帧图片都分为两部分，其中左边为透明通道，右边为正常视频，两侧视频均为黑底；

S2通过Flash的as3.0进行视频的加载及播放，将视频加载到Flash内，显示的视频效果为所述S1中的分解视频；

S3对步骤S2中的所述的分解视频进行分解，需要显示出来的动画部分用白色表示并显示在左边所述透明通道中；

S4利用as3.0在步骤S3中的视频上添加着色器，通过所述着色器生成滤镜，所述滤镜对像素每一帧进行处理；

S5利用着色器选取所述分解视频中的像素，进行叠加计算，将所述步骤S3中任意取左侧透明视频的R、G、B层进行替换右侧正常视频的α层，并将正常视频的新的R、G、B、α层进行像素叠加。

2.根据权利要求1所述的透明视频处理方法，其特征在于所述步骤S1中的所述透明通道用于存放视频的透明数据。

3.根据权利要求1或2所述的透明视频处理方法，其特征在于所述步骤S3中，所述透明通道中的透明数据均为白色，其R、G、B层相同。

4.根据权利要求1所述的透明视频的处理方法，其特征在于所述步骤S5在替换像素时，需要将每一帧视频图像与顶点坐标进行映射，视频右半侧映射到画面中。

Images