客户端视频渲染目前最理想的解决方案

时间:2022-12-20 19:05:18

很多客户端产品有视频渲染需求。视频渲染有软件渲染和硬件渲染两种方案。

软件渲染一般来说需要将常见的yuv视频流转换成rgb/rgba视频流,再通过GDI绘制到窗口上。软件渲染的优势在于可以方便的和客户端界面做融合,达到更好的界面效果,比如通过alphablend等API实现前景,背景的混合。

然后软件渲染性能存在比较大的瓶颈,现阶段最好的电脑可能也带不动1080P, 30帧的视频。只适合小视频窗口的渲染。

硬件渲染则是使用硬件加速接口,直接将视频渲染到显示器,通常对yuv流的支持都很友好,不需要做格式转换,同时性能会高很多,轻松视频4K视频的高帧率渲染。然而硬件渲染需要将视频流转换成硬件支持的Texture, 并占满整个HWND窗口空间,导致很难和GDI绘制的界面元素融合。

有没有再使其美的办法呢?

先看图:

客户端视频渲染目前最理想的解决方案

 

我一直在问为什么手机上做视频渲染这么简单,视频和其它UI元素可以完美的组合?浏览器好像也可以达到类似的效果。

前段时间我也有尝试使用sdl来实现视频和soui绘制的窗口进行融合渲染(sdlplayer),效果还比较理想。当时的实现还限于当时对视频渲染的认知不够,还是需要为视频创建一个独立的HWND,只是在将视频流绘制到这个HWND之后,再将视频上的UI前景再叠加到视频流上。

这样做基本达到了将视频使用硬件渲染,同时又能和UI前景融合的问题。不够理想在于,它还是需要多一个HWND,而且操作这些前景需要多做一次中转。

事件的转机在一个朋友提的一个问题:SOUI可不可以使用opengl来渲染界面,而绘制流程保持不变?

既然SOUI内部已经将界面效果渲染到了内存位图上了,上显示器为什么一定要用GDI呢?

结合前段时间做sdlplayer的经验,通过简单的将上屏流程抽象出一个IPresenter接口,再使用sdl来实现这个接口,即可以方便的切换到使用sdl来上屏,从而实现上屏过程的硬件加速。

当然,只是抽象出IPresenter还不够。如果一个视频占满整个窗口空间,当然没有问题,界面上的前景绘制好后直接生成一个rgba的sdl_texture,再帖到视频的yuv_texture上面即可。但是如果要达到使用单一的HWND实现视频和UI的融合,则需要支持视频显示在窗口的任意位置。

要解决这个问题,首先需要在Presenter中视频到达的时候,知道这一帧视频需要渲染到什么地方。

这个问题好办,在视频到达的时候,问一下SOUI,哪个控件占的位置是留给视频的即可。

然后,SOUI需要保证这个位置上在绘制视频前不能绘制背景。常规流程下,SOUI在渲染UI元素时是自动将整个窗口的空间刷新的,不区分哪一块是留给视频渲染的。假定窗口有一个白色的背景,那么整个窗口的内存位图就会被白色填充。在将这个内存位图叠加到视频上以后,视频就看不到了。

要解决这个问题,SOUI的方法是:窗口刷新的时候,先将整个画布清空(alpha=0,窗口全透明),再使用clip剪切掉视频占用的位置,保证后面的绘制流程不绘制视频位置。经过这样处理,视频在SOUI给定的位置渲染后,再叠加SOUI的渲染结果,就会出现视频和SOUI融合的情况。

然而这只解决了一个问题,让SOUI绘制不遮挡视频。由于前面将视频渲染位置使用clip来保证不做渲染,视频的前景也同样没有渲染。

为解决这个问题,只需要在做完前面的绘制流程后,再做一次只绘制视频前景的流程即可:清除前面的clip,从视频窗口的dui元素层开始绘制前景(如果有的话)。这样处理后就可以实现视频和UI元素的完美融合。

最后给出源代码:

https://github.com/setoutsoft/soui4js