1. 前言

KtvSDK经历了1.0到3.0版本迭代，多屏渲染模块经历了很多次调整，从最初1.0版本的简单支持双屏异显，到2.0修复了黑屏绿屏拉伸和动态性不足的问题，再到3.0修复了多个KtvPlayer实例互相干扰的问题，通用性不断增强。

实际上双屏异显属于多屏渲染，双屏异显可以适用于大多数场景，对于普通的K歌应用足以。因此，对于普通的K歌app，如果仅仅是双屏异显，请考虑使用KtvSDK双屏异显的能力。

什么时候考虑双屏异显？

双屏异显属于多屏渲染的子集。

在ktvSDK中，开启双屏异显的方式很简单，只需要将渲染组件设置为GLVideoSurfaceView渲染即可，具体可以参考其他章节设置surface_type。

鉴于KtvSDK的管理机制，双屏异显方式的好处是可以减少对渲染布局的管理，只有是GLVideoSurfaceView渲染，会自动同步视频，但是也有一定的性能问题，音画画面同步需要加锁。

当然，这里的渲染机制并不包含Presentation的相关逻辑，总得来说，View和KtvPlayer应该作为Presentation的内部元素，而不是相反，因此，KtvSDK内部并不会主动处理Presentation的任何变化。

在使用双屏异显时，ktvSDK的管理机制决定了在起播时其必须依赖GLSurfaceView，否则无法渲染视频。

总结下适用条件

最多只有2个屏幕

单机双屏

屏幕尺寸一致

不需要多进程渲染

不需要后台渲染

不支持屏幕录制

很少多屏互动的场景

仅简单场景

缺点

很难实现GLContext共享，后期优化有一定难度

耦合度较高，该方案后续升级会有一定难度

渲染时需要加锁，GPU利用率有点低，并发弱

页面切换可能引发视频黑屏

什么时候使用多屏渲染？

本次实现的多屏渲染是和原来的双屏异显完全不同的一套方案，同时不会依赖主副屏的生命周期，也不会依赖GLSurfaceView、KtvSDK的管理机制。另外，多屏渲染可以实现多屏同时渲染、以及argb数据读取、H264编码、推流。可用于支持后台渲染、远程渲染等需求、多屏互动等场景。

与原有的双屏异显相比，功能和灵活性大大增强，性能差距不大，部分情况优于双屏异显，并且利于后期优化

总结一下适用条件：

多进程渲染

后台渲染

多主机多屏幕渲染

单主机多屏幕渲染

需要合成MV、歌词、midi等画面的渲染

画面推流

支持更多屏幕

支持Surface-to-Surface高性能屏幕录制

屏幕尺寸不一致的情况

可共享GLContext，便于优化和提升性能

多屏互动的场景

耦合度很低，便于业务扩展

极端复杂场景

缺点：

上手难度较高

与此同时，原有的双屏异显模块也是被保留了，之前的功能可以正常使用。

2. 多屏渲染模块使用

以上是前言内容，对于本节来说，前言的内容可能不太重要，简单了解下就行，或者不看也行，接下来我们来看看多屏渲染。

多屏渲染的前提之一就是同一个播放器的内容输出到多个屏幕，也就是意味着同时渲染多个Surface组件。

多屏渲染方法很多，如EGL、MediaProjection投影、Scrcpy、Android 10版本的SurfaceControl，基于通用性，KtvSDK使用了EGL方案。

这个效果图仅仅是分屏展示，具体要展示到不同的屏幕可以使用Presentation或者Overlay机制来实现

开启多屏渲染模式

和双屏异显一样，需要依赖open gl。

多屏播放器Layout

起播方式和原来的起播方式一样，但需要注意的是，原有的起播方式需要IVideoView的子类，比如KtvSdk内置的KtvVideoLayout，而多屏渲染需要IMirrorSurface和IVideoView的子类，因此，KtvSDK内置了KtvVideoMirrorLayout，用于支持多屏渲染。

传入播放器就能起播了，和原来的KtvVideoLayout完全一样

画面采集

我们经常会遇到一种场景，需要录制本屏幕的数据，然后编码为视频数据，推流给其他主机或者直播。

这里我们提供两种方式，具体场景我们建议按场景使用

通过FrameListener采集

通过下面方式可以实现画面采集，但是这里拿到的数据是rgba buffer

本方案适合画面截屏的场景

通过CaptureEncodeRequest采集

这种方式更加适合跨屏推流，性能优于FrameListener方式，这种方式会直接将视频画面编码为H264数据，数据量更小，编码的H264数据可以直接推流

本方案适合推流和录制场景，性能高、内存更低

注意点

KtvVideoMirrorLayout需要的Context必须是ApplicationContext，否则无法工作

KtvVideoMirrorLayout 不允许被添加到xml 布局中，否则无法工作

KtvVideoMirrorLayout和KtvVideoLayout都用于管理画布，但是前者是虚拟布局，不会在Android的View树展示，只否则对MirrorVideoRenderLayout等其他Surface组件的管理和渲染

KtvVideoMirrorLayout可以通过setFrameListener方法注册argb_8888的数据回调

播放或者采样结束时需要调用setFrameListener(null)防止内存泄漏

FrameListener 回调的图片默认是1280x720的

如果要获取帧画面跨网络传输，建议不要监听FrameListener，应该优先使用CaptureEncodeRequest，因为从EGL读取图片本身要消耗一定的性能

注意： KtvVideoMixCapture 也是支持多屏渲染的，用法几乎和KtvVideoMirrorLayout一致，后面我们会说到。

Surface 接入

KtvVideoMirrorLayout 默认是离屏渲染的，如果要把画面展示到页面上，需要调用attachMirrorSurface，当然这些方法都是被IMirrorSurface约定的

这里的Surface包括Android平台上的任何Surface，如SurfaceView、GLSurfaceView、TextureView、ImageReader等创建的Surface。为了方便开发者，KtvSdk提供了用于支持SurfaceView、GLSurfaceView、TextureView的组件 ——MirrorVideoRenderLayout。

MirrorVideoRenderLayout 适配

这个Layout用法和VideoRenderLayout类似，当然这个组件并不是必要的，如果你想自行实现也是可以的。如上所述，用于支持SurfaceView、GLSurfaceView、TextureView一些能力，减少接入难度。

KtvVideoMirrorLayout和MirrorVideoRenderLayout对接

下面是对接方式示例代码

设置拉伸模式

val renderLayout = MirrorVideoRenderLayout(context)

renderLayoutA?.setScaleType(VideoScaleType.FILL)

renderLayoutC?.setScaleType(VideoScaleType.FILL_FIT)

renderLayoutE?.setScaleType(VideoScaleType.FILL_HEIGHT);

renderLayoutE?.setScaleType(VideoScaleType.CENTER);

按类型创建Surface

renderLayoutA?.connectSurface(MirrorVideoRenderLayout.VIEW_TYPE_SURFACE, listener) //用SurfaceView渲染

renderLayoutC?.connectSurface(MirrorVideoRenderLayout.VIEW_TYPE_TEXTURE, listener) //用textureview 渲染

renderLayoutE?.connectSurface(MirrorVideoRenderLayout.VIEW_TYPE_GL, listener) // 用open gl 渲染

调整视频画面

ktvVideoLayout?.changeMirrorSurfaceSize(surface, width, height)

注意：

MirrorVideoRenderLayout 只支持VIEW_TYPE_SURFACE、VIEW_TYPE_TEXTURE、VIEW_TYPE_GL 三种类型。

connectSurface 用于指定渲染画布类型和监听器，用于监听Surface的创建

MirrorSurfaceListener 用于MirrorVideoRenderLayout和KtvVideoMirrorLayout桥接通信

onVideoSizeChanged 适配

之所以提供这个组件的另一个原因是，内置了自动调整画面的逻辑，MirrorVideoRenderLayout实现了下面的方法

以上就是核心逻辑

3. 增强功能

开发中，MirrorSurfaceListener可能存在局限性，因此必要时可以选择使用MirrorSurfaceConnectionListener

用法也是类似的
renderLayout?.connectSurface(VideoScaleType.CENTER,MirrorVideoRenderLayout.VIEW_TYPE_TEXTURE, listener)

使用场景

以上的方案能做到视频内容多途径渲染，无论多屏还是双屏异显，以下几种场景ktvSDK 3.0均能友好的支持

基于Android 规范多屏联接

基于网络的独立主机链接

车载宽屏（一屏多显）

基于Android 规范多屏联接

第一种是基于HDMI、USB、WifiDisplay模式的音视频输出模式，在Android系统中，如果有屏幕接入系统，在系统中会创建与之对应的虚拟屏，这种方式我们可以为每个虚拟屏创建一个【渲染幕布（SurfaceView、GLSurfaceView或者TextureView）】的Presentation，就能实现将一个屏幕的内容输出到多个屏幕上，是非常简单的一种形式。

基于网络的主机多屏联接

这种一般运用于多屏互动，其本质是【基于Android 规范多屏联接】的扩展和简化。因为HDMI、USB、WifiDisplay接入的屏幕不仅会同步画面，可能音频也可能会被同步，这种情况定制需求的自由度相对角度，因此，为了提高可扩展性，一些场景使用网络自由接入，当然，这点和WifiDisplay的实现也有很多相似的地方，但相比而言可定制化程度要高很多。

车载宽屏

目前一些新型车机，一个屏幕可以展示多个应用，这种情况下一般需要多进程+投影方式实现。

4. 非合成输出 & 合成输出

KtvSDK支持单独视频画面输出，同时也有实现视频+UI合成输出的方法

上面这个效果并不是直接在主屏幕上输出，而是将动画和视频合成结束之后，最终输出到主屏的SurfaceView上展示出来

非合成输出：直接输出视频画面

合成输出：歌词与视频画面合成后输出，参考demo 中的KtvVideoMixCapture和OffscreenMixActivity部分

多屏合成关键工具

KtvVideoMixCapture是实现视频与普通View合成的重要工具，目其API与KtvVideoMirrorLayout几乎完全一致，支持几乎所有KtvVideoMirrorLayout相关能力，包括多屏渲染，但是他会比KtvVideoMirrorLayout多1-2个环节，主要是对Presentation进行录制。

两者都是支持多屏渲染的

由于合成需要提供Prensentation来支持合成，本质上是“提取”Presentation的画面，上图我们可以看到需要传入VideoMixPresentationFactory，来自定义你的Prensentation，后者其本质是Dialog，你只需要把歌词、midi、mv布局添加好，调用此方法会自动合成。

如下图，我们将Prensentation的画面（MV + 旋转的方块）合成之后，分别输出到4个Surface上

工作机制

5. 事件处理

Presentation 不是主屏幕的组件，一些电机屏幕或者触摸的事件，需要从Activity映射到Presentation上，最理想的选择是参考DialogFragment这种用法

6. 推流

KtvSDK 提供最简单的推流方式，具体参考如下工具

RtpStreamer
RtpClient

7. 总结

整个过程主要涉及KtvMirrorVideoLayout、KtvVideoMixCapture、MirrorVideoRenderLayout用法，对于开发而言，只要能掌握这些组件，就能应用自如的实现目标需求。
另外，demo中也有example代码，可进行参考

com.tme.ktv.demo.OffscreenMultiScreenActivity

com.tme.ktv.demo.OffscreenMultiScreenService

demo 地址

另外，对于获取argb传输，当前KtvSDK并没有内置rtc或者rtmp，这部分请自行实现。
MirrorSurfaceListener

KtvSDK-多屏渲染

1. 前言#

什么时候考虑双屏异显？#

什么时候使用多屏渲染？#

2. 多屏渲染模块使用#

开启多屏渲染模式#

多屏播放器Layout#

画面采集#

通过FrameListener采集#

通过CaptureEncodeRequest采集#

注意点#

Surface 接入#

MirrorVideoRenderLayout 适配#

KtvVideoMirrorLayout和MirrorVideoRenderLayout对接#

设置拉伸模式#

按类型创建Surface#

调整视频画面#

onVideoSizeChanged 适配#

3. 增强功能#

使用场景#

基于Android 规范多屏联接#

基于网络的主机多屏联接#

车载宽屏#

4. 非合成输出 & 合成输出#

多屏合成关键工具#

5. 事件处理#

6. 推流#

7. 总结#

1. 前言

什么时候考虑双屏异显？

什么时候使用多屏渲染？

2. 多屏渲染模块使用

开启多屏渲染模式

多屏播放器Layout

画面采集

通过FrameListener采集

通过CaptureEncodeRequest采集

注意点

Surface 接入

MirrorVideoRenderLayout 适配

KtvVideoMirrorLayout和MirrorVideoRenderLayout对接

设置拉伸模式

按类型创建Surface

调整视频画面

onVideoSizeChanged 适配

3. 增强功能

使用场景

基于Android 规范多屏联接

基于网络的主机多屏联接

车载宽屏

4. 非合成输出 & 合成输出

多屏合成关键工具

5. 事件处理

6. 推流

7. 总结