1. 前言

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

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

为什么应该首先考虑双屏异显？

双屏异显属于多屏渲染的子集，在ktvSDK中，开启双屏异显的方式很简单，只需要将渲染组件设置为open gl 即可，具体可以参考其他章节。鉴于KtvSDK的管理机制，双屏异显方式的好处是可以减少对渲染布局的管理，其本身兼顾了一些副屏和主屏的生命周期管理和优化。当然，这里的渲染机制并不包含Presentation的相关逻辑，总得来说，View和KtvPlayer应该作为Presentation的内部元素，而不是相反，因此，KtvSDK内部并不会主动处理Presentation的任何变化。

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

什么时候使用多屏渲染？

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

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

但缺陷也是有的，多屏渲染目前而言，不依赖KtvSdk管理机制，那么意味着显示端需要自行管理Surface的生命周期。

2. 多屏渲染模块使用

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

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

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

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

开启多屏渲染模式

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

播放器起播

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

注意点

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

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

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

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

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

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

如果不需要获取帧画面跨网络传输，建议不要监听Frame，因为从EGL读取图片本身要消耗一定的性能

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

  KtvPlayerImpl player = new KtvPlayerImpl();   //创建播放器实例
   //设置播放参数
  KaraokePlayer.DataSourceType dataSourceType = KaraokePlayer.DataSourceType.ORIGINAL;
  player.setTonePitchShift(0)
  .setKtvVideoLayout(ktvVideoLayout) //传入KtvVideoMirrorLayout
  .setDataSourceType(dataSourceType)
  .setMicVolume(0.7F)
  .setVolume(0.7F)
  .addCallback(new KaraokePlayerListener() {
        @Override
        public void onVideoSizeChanged(KaraokePlayRequest request, int width, int height) {
                super.onVideoSizeChanged(request, width, height);
                        if (callback != null) {
                            Message msg = Message.obtain();
                            msg.what = CALLBACK_ON_VIDEO_SIZE_CHANGED;  //监听VideoSizeChanged
                            msg.arg1 = width;
                            msg.arg2 = height;
                            try {
                                callback.send(msg);
                            } catch (Throwable e) {
                                e.printStackTrace();
                            }
                        }
                    }
        });
        player.play(songInfo);

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 listener = object :MirrorSurfaceListener {
      override fun onSurfaceCreated(surface: Surface?, width: Int, height: Int) {
            ktvVideoLayout?.attachMirrorSurface(surface, width, height)   //连接多屏渲染引擎
     }

      override fun onSurfaceChanged(surface: Surface?, width: Int, height: Int) {
          ktvVideoLayout?.changeMirrorSurfaceSize(surface, width, height) // 调整视频画面缩放比
      }

     override fun onSurfaceDestroyed(surface: Surface?) {
         ktvVideoLayout?.detachMirrorSurface(surface) //断开与渲染引擎的连接
     }

 };

设置拉伸模式

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实现了下面的方法

  /**
     * 
     * @param width 视频宽度
     * @param height 视频高度
     * @param pixelWidthHeightRatio 视频宽高比 ，一般设置为 (width*1.0f)/height即可
     */
     public void setVideoSize(int width, int height, float pixelWidthHeightRatio) {
            
    }

以上就是核心逻辑

3. 增强功能

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

public interface MirrorSurfaceConnectionListener {
    void onSurfaceDestroyed(View parentView,IMirrorView childView,Surface surface);

    void onSurfaceCreated(View parentView,IMirrorView childView,Surface surface, int width, int height);

    void onSurfaceChanged(View parentView,IMirrorView childView,Surface surface, int width, int height);
}

用法也是类似的
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 中的MixPresentation部分

5. 事件处理

在一些情况下，副屏点击事件需要传递给主屏，这种SDK是不支持的，需要自行实现

6. 总结

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

com.tme.ktv.demo.OffscreenMultiScreenActivity

com.tme.ktv.demo.OffscreenMultiScreenService

demo 地址

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

KtvSDK-多屏渲染

1. 前言#

为什么应该首先考虑双屏异显？#

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

2. 多屏渲染模块使用#

开启多屏渲染模式#

播放器起播#

注意点#

Surface 接入#

MirrorVideoRenderLayout 适配#

KtvVideoMirrorLayout和MirrorVideoRenderLayout对接#

设置拉伸模式#

按类型创建Surface#

调整视频画面#

onVideoSizeChanged 适配#

3. 增强功能#

使用场景#

基于Android 规范多屏联接#

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

车载宽屏#

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

5. 事件处理#

6. 总结#

1. 前言

为什么应该首先考虑双屏异显？

什么时候使用多屏渲染？

2. 多屏渲染模块使用

开启多屏渲染模式

播放器起播

注意点

Surface 接入

MirrorVideoRenderLayout 适配

KtvVideoMirrorLayout和MirrorVideoRenderLayout对接

设置拉伸模式

按类型创建Surface

调整视频画面

onVideoSizeChanged 适配

3. 增强功能

使用场景

基于Android 规范多屏联接

基于网络的主机多屏联接

车载宽屏

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

5. 事件处理

6. 总结