Web端TRTC混流，一个流屏幕录制，一个流摄像头采集，混流后观众看到两个画面出现错位的解决方案

本文主要讲解一下Web腾讯TRTC的混流布局出现大小屏幕错位的问题。

首先，给出TRTC云端混流的官网以及介绍（https://cloud.tencent.com/document/product/647/16827 ）。

我在开发中使用的是服务端REST API 混流方案，混流画面排版模式使用的是屏幕分享模式。

混流画面排版模式共有4中，出了下图3种之外，还有一种画中画模式，画中画模式和悬浮模板相似，差别是小画面可以指定在大画面的任何位置之上。

场景：使用两个流，一个屏幕录制分享，一个摄像头采集。然后混流，观众端出现大小屏幕高度不一致。如下图：

单个流和混流的分辨率大小：

摄像头单流：640*480 宽高比：4:3 = 1.3333 屏幕单流：1920*1080 宽高比：16:9 = 1.7777 混流：1920*1080 宽高比：16:9 = 1.7777

根据场景的描述和单个推流的分辨率比例，因为要保证每一个画面不变形并且完整显示。当前的屏幕分享流的分辨率和混流的一样，然后再加上摄像头的单流画面，为保证所有的都显示完整，所以画面就会进行缩放，两个流的分辨率比例不一致，因此缩放了就出现了位置偏差。

那这个怎么解决呢？？？

这里提供两种方案：

方案一：当前分辨率不变，使用画中画布局的混流方案

设置LayoutParams.Template=3,并且可以指定小画面的位置。唯一不足就是小画面必须覆盖在大画面之上。

方案二：使用原来的屏幕分享布局，固定混流输出分辨率是1600x720，按照右侧小画面的数量设置大画面的上行分辨率，这样可以保证大画面不做缩放。

假设整个混流输出分辨率， 宽为W，高为H， 比例为 W: H 不同人数下， 屏幕分享布局的4个状态小窗口的宽高如下： 1-5人： 宽为W/5，高为H/4， 比例为： W: H*5/4 6-7人： 宽为W/7，高为H/6， 比例为： W: H*7/6 8-9人： 宽为W/9，高为H/8， 比例为： W: H*9/8 10-16人：宽为W/10，高为H/8， 比例为： W: H*5/4

例如：固定混流输出分辨率是1600x720，按照右侧小画面的数量设置大画面的上行分辨率。